jquery插件的开发

插件实例：将指定标签文字颜色改为红色

一、第一个分号作用：

本来别人的代码也正常工作，只是最后定义的那个函数没有用分号结尾而以，然后当页面中引入我们的插件时，报错了，我们的代码无法正常执行。

原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连，因为中间没有分号嘛，总之我们的代码无法正常解析了，所以报错。所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯 。

二、用自调用匿名函数包裹你的代码 ：

JavaScript中无法用花括号方便地创建作用域，但函数却可以形成一个作用域，域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。可以防止与同名全局变量冲突。

(function() {

//内容

})()

三、传参（传系统参数）

将系统变量以参数形式传递到插件内部也是个不错的实践。

　　当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升

　　最后我们得到一个非常安全结构良好的代码：

;(function($,window,document,undefined){    //我们的代码。。    //blah blah blah...})(jQuery,window,document);

至于这个undefined，稍微有意思一点，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了。是不是有点hack的味道，值得细细体会的技术，当然不是我发明的，都是从前人的经验中学习。

四、插件开发方法

jQuery插件开发方式主要有三种：

1. 通过$.extend()来扩展jQuery：方式太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以
2. 通过$.fn 向jQuery添加新的方法：常用方法
3. 通过$.widget()应用jQuery UI的部件工厂方式创建：用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等

五： 支持链式调用

jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。

　　要让插件不打破这种链式调用，只需return一下即可。

$.fn.myPlugin = function() {    //在这里面,this指的是用jQuery选中的元素    this.css('color', 'red');    return this.each(function() {        //对每个元素进行操作        $(this).append(' ' + $(this).attr('href'));    }))}

六：接收参数

this.options = $.extend({},this.defaults,opt)

将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。

七： 面向对象的插件开发

将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。

所以上述实例新建了一个对象命名为Beautifier，然后我们在插件里使用这个对象来编码。

参考资料： http://www.jq-school.com/Show.aspx?id=884