Think in jQuery（转）

本文转载自Speed's smart design，仅供参考以及从另外一个角度来了解jQuery，不代表本人认同其中的全部观点。

大部分情况下，我们面临的背景是：

设计者高高在上，不食人间烟火，只是提供约束，不要这样，必须那样，而不是提供方法和可以复用的API。

开发者是处于解决问题的一线，饱尝重复造轮子的疾苦，他们最需要的是快速的解决问题，以更恰当的方式工作，寻找更容易构建系统的技术和方式。

Jquery给设计者上了很好的一课，Jquery就像一个魔法师一样，$()就像魔法棒一样，随手一指，一个木偶变复活了，一瞬间具备了各种各样的复杂的能力。

1）分离和粘合

在jquery的身上得到淋漓的体现。不仅是分离结构(structure)和行为功能(behaviour)，在强调分离的同事，提供了强大的连接、粘合的能力。

结构 <div id="div_portlet"></div>
功能 function tooltip(){}
粘合 $("#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，不需要图片，Ethan注：需要corner插件

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的编程风格就不用多说了。

Think in jQuery（转）

相关