Think in Jquery

转载地址：http://www.blogjava.net/OneEyeWolf/archive/2008/07/15/215042.html

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