Think in jQuery
设计者高高在上,不食人间烟火,只是提供约束,不要这样,必须那样,而不是提供方法和可以复用的API。
开发者是处于解决问题的一线,饱尝重复造轮子的疾苦,他们最需要的是快速的解决问题,以更恰当的方式工作,寻找更容易构建系统的技术和方式。
Jquery给设计者上了很好的一课。
Jquery就像一个魔法师一样,$()就像魔法棒一样,随手一指,一个木偶变复活了,一瞬间具备了各种各样的复杂的能力。
1)分离和粘合
在jquery的身上得到淋漓的体现。不仅是分离结构(structure)和行为功能(behaviour),在强调分离的同事,提供了强大的连接、粘合的能力。
1.结构 <div id="div_portlet"></div>
2.功能 function tooltip(){}
3.粘合 $("#div_portlet" ).tooltip(); //对于开发者,一行代码就达到设计上的分层分离和功能实现两个目标了。
同样是使用传统的javacript library, 所谓OO的做法如下:
<script> var tootip = new Tooltip(); //创建OO对象</script>
<div id="div_portlet" onmouseover="tooltip.display();" onmouseout="tooltip.hide();" ></div>
两者对比,可以看出,Jquery非常非常的体贴开发者,通过强内聚的API的设计,封装,再封装,一个方法包办了onmouseover和onmouseout两个事件,擦屁股的事情也解决了。
想象以前,是怎么给一个table或DIV做圆角的,很多的方案是CSS+圆角图片,很麻烦,图片的背景还要符合页面环境的颜色。
jquery是怎么做的:$("#div_portlet" ).corner(); //搞定,不需要CSS,不需要图片。
2)封装,封装,再封装
Write less. Do more, 是Jquery的口号。
也应当是每个设计者设计API牢记的,API的设计宗旨就是要,苦了我一个,幸福无数人的精神。参见【好事要做到底,我们需要full stack的API设计 】。
有人说,Jquery的代码太乱,真是有闲工夫,我还在Javaeye论坛上,见过别人说Spring的代码乱,还有人说JBPM的代码像一托屎。这些伟大的框架,都是自己封装了复杂度,竭力把最简洁的API留给使用者,让你专注于自己该做的事情。换来的却是责难。
可惜的是,我们用别人的库是,总是要做一大堆的事情,才完成一个复杂的功能。
例如我们在显示Flash Object时,使用swfObject.js 需要完成的代码是:
<script type="text/javascript">
var so = new SWFObject("../open-flash-chart/open-flash-chart.swf", "ofc", "250", "200", "9", "#FFFFFF");
so.addVariable("data-file", "../data-files/data-60.txt");
so.addParam("allowScriptAccess", "always" );//"sameDomain");
so.write("my_chart");
</script>
同样使用JQuery jQuery Flash Plugin,一条代码就搞定了。
$('#hello').flash(
{ src: 'hello.swf' },
{ expressInstall: true }
);
3) 充分利用倒钩(hook)、回调(callback) 定制行为
在API的默认behaviour不能满足要求的前提下,使用hook、callback,可以让API的调用者,可以尽最大程度的定制自己、添加自己的特殊行为。Jquery的core、Plug-in,都大量的使用了这种技巧。
如:$("div_content").toggle(); // 默认是切换hide 和 dispaly 两者行为。
如果你想在切换时,做一点其他的事情。如通知另一个控件。
可以:$("div_content").toggle(function(){
//可以发送消息,或出发事件。
});
4) 减少代码的行数是降低复杂度的最有效方式
http://www.netvibes.com 是一个portal网站,它的portal使用了Mootool的javascript框架, javascript的总行数将近6万行。Mootool的OO确实做的很好,号称适合在大型、复杂的应用中使用,可惜在复杂的应用当中,过度的OO,并不能提供简洁的功能,继承的滥用反而增加了复杂度和维护的难度。
我down下来代码后,看了看,觉得 如果使用Jquery,代码最少能缩小一半。
如果你一定要坚持你的应用是大型的javascript应用(尽管没有标准衡量),你就喜欢Class,看不到这个单词,你就不爽。看看下面的文字。
5). OO和JQuery的结合
很多人并不了解OO,对于OO不过是叶公好龙吧了,以为OO,就是一定要出现个Class, 然后在不断的new 来new去,这就是OO的编程。本来一个Utility的方法,非要OO,结果先要new一个Object, 然后在调用Ojbect的方法。
OO是这样子吗?当然不是,封装、继承、多态,是OO的核心。
OO的编程虽然可以帮助用户开发高度有弹性、易扩展、以维护的程序,但前提是要理解OO。
如果我们不满足于使用Jquery的API、plug-in的功能,我们想用它来作为我们开发大型OO-based 项目的基础javascript框架时,我们仍然可以通过plug-in的方式,让JQuery具有OO编程的基础框架的功能。
Low Pro for jQuery 是一个模拟prototye OO 的Jquery plug in, 是你可以用Prototype的OO方式编程。
使用插件前的API的调用方式
$('#example4').draggable({ helper: 'clone', revert: true });
假设我们遇到了复杂的情况,想改变draggable的情况,这是只有修改源文件了。
使用插件后,我们可以通过类,继承类来改变对象的行为。
Draggable = $.klass({
initialize: function(options) { },
onmousedown: function() {}
});
通过继承来扩展对象的行为:
GhostedDraggable = $.klass(Draggable, {
onmousedown: function($super) {
$super();
//此处可以编写自定义的行为代码
}
});
然后通过attach的方法绑定到制定的DIV上:
$('div.product').attach(GhostedDraggable, { anOption: thing });
6).在应用中,尽可能的使用一个框架,便于技术积累。
Jquery可以满足你大部分的要求,不是做不到,是你不知道, 你不知道Jquery的有这样的能力罢了。
我做的最近一个Portal项目,javascript全部是基于Jquery的,参见下图。
使用的插件不多,但都实用。
JTab、Draggable、Selectable、Sortable、Jcorner、Jtip
那个chart也是基于Jquery, 不过是拿过来经过经过改进的。
至于我们基于jquery的编程风格就不用多说了。