jQuery( )的构造原理和jquery插件的编写

首先来了解一个概念：

Jquery（）方法的构建原理：

$()是一个函数调用，调用的结果是返回了一个Jquery的实例对象。

jQuery( )的构造原理就很清晰了：每次调用jQuery( )都返回由构造函数init指定返回的this对象，而this对象已经被赋值为那个新创建的空对象。由于把jQuery.prototype都赋给了init.prototype，所以新创建的空对象继承所有jQuery的方法。

jQuery.prototype原型对象上的扩展属性/方法和事件，将会给jQuery的对象“扩展”。基于这一点，jQuery是这样写的：jQuery.fn = jQuery.prototype 。所以，当我们扩展一个插件功能时，如下：

jQuery.fn.check = function() { 
return this.each(function() { 
this.checked = true; 
}); 
};

其实就是：

jQuery.prototype.check = function() { 
return this.each(function() { 
this.checked = true; 
}); 
};

基本插件的编写：

说白了就是向上面写的加一个新方法到$.fn中，之后就可以像使用其他jquery方法一样的去使用写的方法了。如果想要写一个插件，使得被选中元素，display为none，那么我们可以写：

$.fn.vanish=function(){
This.csss(‘display’,’none’);
}
//调用的时候可以直接调用
$(“.laala”).vanish();

但是这个时候不能使用jquery的连缀特性，即没法对同一个元素，连续使用多个方法。但是当我们改变一句插件的语法。该插件就可以使用连缀属性了。

$.fn.vanish=function(){
This.csss(‘display’,’none’);
return this;
}
//调用的时候可以直接调用,并可以使用连缀属性
$(“.laala”).vanish().addClass(“jfjfj”);

当我们学会了插件的写法是不是写多一点插件会方便一点呢。当编写插件师实际上是占用一个$.fn扩展槽。优化的写法是只占用一个jquery的$.fn扩展槽。因为这会降低覆盖其他插件的几率。也会降低他被覆盖的几率。所以当我们写：

(function( $ ) {

    $.fn.openPopup = function() {
        // Open popup code.
    };

    $.fn.closePopup = function() {
        // Close popup code.
    };

}( jQuery ));

的时候，可以优化为：

(function( $ ) {

    $.fn.popup = function( action ) {

        if ( action === "open") {
            // Open popup code.
        }

        if ( action === "close" ) {
            // Close popup code.
        }

    };

}( jQuery ));

（更多代码优化的信息，请见我上一篇文章）

这时候我们想起，我们用jquery的外部插件的时候，经常可以自定义一些选项来改变插件的什么变量。

其实：           

(function ( $ ) {

    $.fn.greenify = function( options ) {

        //设置了插件的默认的一些属性
        var settings = $.extend({
            color: "#556b2f",
            backgroundColor: "white"
        }, options );

        // 返回值是基于上边变量的值的。
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });

    };

}( jQuery ));
//所以调用的时候可以直接
$( "div" ).greenify({
     color: "orange"
});

这样就编写了一个简单的插件了。