另类的Jquery与Prototype混用法

分类：编程 | jeff 发表于：2008-07-22 15:37:44 | 2条评论 |

jQuery和prototype都是现在比较流行的Javascript开发框架，两者都拥有数量相当的粉丝，当然不排除同时喜欢使用两种框架的。但问题来了，由于jQuery以及prototype都使用了美元符函数“$”作为选择器，在两者混合使用的时候$函数被重复定义了，结果导致其中一个框架不能使用。

流行的解法：

不过很快，有很多人给出了解决方案，如比较流行的方案是这样的：

js 代码

<script src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src="prototype.js"></script>

这样一来，你可以使用JQ来代替jQuery里的$函数名，而prototype的$函数照常使用，像这样：

js 代码

<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jquery");
$("test_prototype").innerHTML="this is prototype";
});
</script>

尽管这种办法在一定程度上解决了两者的冲突，但作为jQuery的死忠，我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么，是不是有另一种解决方案，让两种框架能和谐共处呢？现在流行和谐嘛！

另类解法：

先看一小段代码，猜一下会有什么效果？

js 代码

<script type="text/javascript">
(function(name){
alert('hello '+ name);
})("world");
</script>

应该很简单吧？效果是弹出一个窗品说“hello world”。仔细看这一段Script，前后有两个括号组成，第一个括号里面是一个function对象，第二个括号是一个字符串。可以这样理解，第一个括号里面定义了一个函数，第二个括号里面给出的参数，两个加在一起实际上是完成了一次函数调用！

那现在来点真实的：

js 代码

<script type="text/javascript" src="jquery-1.2.6.js">
</script>
<script type="text/javascript" src="prototype-1.6.0.2.js">
</script>
<div id="test_jquery"></div>
<div id="test_prototype"></div>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
alert($("#test_jquery").html("this is jqeury"));
});
})(jQuery);
$("test_prototype").innerHTML="this is prototype";
//-->
</script>

经测试，jQuery与Prototpye工作均正常。唯一以往常不一样的是，我们要在以前写的Jquery外面加多一个外套：

java 代码

(function($){
//这里写Jquery代码
})(jQuery);

这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码，这个方案更合适现有Jquery的代码升级至Jquery + prototypt。

不足之处：

还是不能解决Jquery插件的问题，这个问题是传统方法也无法解决的，只能够手动去修改插件脚本里面对$的调用，而根本的解决办法是以后的插件都用刚才那种另类的方式去写，才能保证其可用性。而Jquery UI现在好像是这样做了，我从Demo的源码里面看到的。

使用ThickBox注意事项

分类：编程 | jeff 发表于：2008-03-18 19:07:21 | 74条评论 |

原来打算用ThickBox做一个弹出窗口来修改些资料，并在新窗口进行Ajax操作。

在没用ThickBox前，先调试完该页面，工作正常，IE，FF下都运行无误。正式使用上Thick Box。突然发现在FF下面不工作了，连简单的Alert都出不来。而用IE就是正常的。

我猜想是ThickBox默认使用了Ajax的方式加载链接的内容再显示出来的，而FF在加载过程中并没有对新页面中的Javascript进行解释，IE则是有的。既然如此，使用Iframe的方式应该能行。ThickBox的确可以在链接的参数里指定“TB_iframe”是否为True，否则就使用Ajax来加载，不保证新页面的JS能被解释。

使用FF又使用Thickbox的同学需要注意这一点了。

PS：FF＝FireFox

Ext2.0 + cjson 快乐起舞

分类：编程 | jeff 发表于：2007-11-09 01:06:04 | 0条评论 |

虽然说我买了很多CSS的书扔在家里，也翻过来看过。可你知道程序员没几个静得下来专门搞CSS，我是这批人中的其中之一。我希望的事就是有个很好的美工可以帮我做一些好的样式，我拿来就用。

平时做Web应用，好多的页面，每一个请求的处理器最终还对应回一个页面，这是大部分Web Framework的做法，Asp,php并不这样。有些是通过配置，动态语言则直接写在代码里，因为代码本身就相当于配置。最后页面越来越多，突然想，不用写页面多好啊，客户需要什么数据就提供什么数据好了。

现在好了，一次过实现你两个愿望，使用Extt来做前端，省去你百分之八十的UI工夫，用Ajax来交互，把该死的页面啊模板啊扔一边去。

好长一段时间没有关注Ext（前身为YUI-Ext）。如今已经是出了2.0版，除了完美的UI之外，还和Jquery，Prototype等框架进行了整合。Ext2.0简直可以用惊艳来形容。超乎想象的UI控件效果让人目瞪口呆，而且使用起来也极其方便，让你感觉写界面就像在写配置文件一样。现在Java的FX也类似这样的。有Ext，我不用担心自己是个CSS菜鸟，Ext做出来的UI恐怕还不是一般美工做得了的捏。。卡卡。。

Ext有自己在客户端的数据存储结构（Store之类的），UI的组件封装得很完善，如客户端校验、表格组件、分页组件、树、布局、表单与工具栏等，开箱即用。需要与服务器交换数据的时候通常通过新建Ext的存储并设置远程代理（Url）及配置一些参数就可以。交互数据的格式有Json和XML。Json是首推的。而使用Ext来做界面，一个很大的习惯上的改变就是：很少用Html来做展现，除非布局，你一般都是在写Javascript，就像写C/S的代码一样。

我最近在为本站后台作完善工作。决定了使用Ext来做前端，使用Json来交换数据。关于Python的Json转换库，在网上找到功能相对好的是Cjson，由C语言编写，编译成Python的模块进行使用的。Cjson使用起来也很方便，一Encode一Decode，速度飞快并且提供错误捕捉。最爽的地方在于，Python的数据格式与Json的格式太相似了，用Python来构造Json的原型，太Cool了。

使用Ext做Ajax前端的好处还在于，透明的切换服务器的实现。前端只关心传过来的数据，其他一概不关心。