jQuery插件开发心得

最近做项目，遇到一个问题，需要我能监测按键，控制页面动态生成一个列表，同时列表的内容，需要从后台拿取JSON数据，填充在我前台的代码模板中，同时前台能通过点击，将其中的具体数据，填充到某个需要的空白节点中。用了1个多小时差不多搞定了，但是后来发现一个问题，就是需求不停的变，需要很多地方应用这样的处理模式，当时由于时间比较赶，来不及考虑太多，用了最笨的方法，就是不停的重复复制。但是后来终于静下心来度过了1期的时间关卡后，开始考虑代码的复用，很希望能通过自己编写一个插件，能在不同的地方调用自己所希望要的东西，此意既已萌生，便开始行动....

其实根据后来自己编写的一些心得以及研读了不少外国牛人编写的插件发现，插件的封装，无外乎注意那么几点要素：

1、既然是针对Jquery插件的封装，那么必须了解，jquery为我们提供了哪些封装所需的方法

就是两种：一个是针对$封装全局函数，一个是针对$内部扩展对象方法，分别用到$.extend()和$.fn.extend();其实二者当我写到后面，发现本质上是一样的，可以融会贯通，互相转换；这里其实到后面才慢慢体会到是设置参数变量的精髓所在！

2、闭包的运用，闭包是好东西，简单说就是一种可以获取到函数内部变量的方法。那么此处运用闭包就是避免冲突，可以让我们在内部继续使用我们喜欢的$标识符，运用强大的选择器功能，获取我们想要的一切了。

格式如下：

(function($){
     //codes here
})(jQuery);

这一句可能使我们在看插件看到的最频繁的一句话了，所以牢记！

3、this对象的使用 经过自己编写的心得发现，熟练的运用变量来存储this变量对象是一件非常重要的事,因为插件的书写，里面面对的必然是一些已被高度抽象化的代码，那么this在指定是具体哪个对象上就显的非常有作用 this.each()可能就会和内部嵌套的$(selector).click(function(){$(this)})中的this指代的就会有所不同；

其次一个重要的作用就是，为了使我们日后编写出来的插件依旧可以满足Jquery的链式调用，必要的返回this对象也是非常重要的一个地方！

4、对插件对象的参数化问题（我姑且这么叫-.-）

我们知道jQuery强大的选择器机制以及对DOM的强大操控和简单的方法调用，深得众人喜爱，那么我们会发现一个现象，就是jquery中提供的参数可写可不写，不写证明使用默认值，写了就会修改默认参数，而那些没有修改的值仍然用默认参数值，那么这种强大的而又实用的操作参数的手段 就是依靠

$.extend()方法，该方法在Jquery API中的解释是，将对象1与对象2合并，同时返回前者，所以我们就可以这么给参数进行初始化

var opt=$.exted({
    "name":"liyanlong",
    "age":24
},options)

那么它的意思就是将options与{}中的内容进行合并，{}中的为默认值，大多数为一些JSON格式的数据，如果我options为空，证明没有传值，证明直接调用。而如果修改了某个默认值，那么它就会用options中的项将{}中对应的给覆盖掉，通过这种手段对参数进行初始化。

其实最规范的写法是 var opt=$.extend({},$.fn.default,options) 通过这种方式，可以将值一直传递到空的{}中，而不会对初始值做任何更改

5、剩下的应该都是一些细节问题了，就是对插件的命名、因为日后有可能涉及到压缩，对分号的处理不能大意，那么后面我附上一个简单的color()取色插件，复杂的就不写了-.-

//命名：jquery.color.js
(function($){　
  $.fn.extend(
     "color":function(value){
         return css("color",value);
      }
  );
})(jQuery);

其实这就已经写完了，其实很简单，当然短到2 3行 长到几千行，看功能而定了，只要思路明确，就能写成！