jQuery插件开发

一、开发方式：

1.类级别组件开发

　　- 即在jQuery命名空间下添加新的全局函数，也称为静态方法。

　　具体方法如下：

jQuery.myPlugin = function(){
    // do something    
}

　　例如：$.ajax()、$.extend()

2.对象级别组件开发

　　- 即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法，也称为动态方法。

　　具体方法如下：

$.prototype.myPlugin = function(){
    // do something
}

二、链式调用：

$.fn.myPlugin = function (){
    return this.each(function(){
        //do something
    })  
}

    链式调用是jQuery的特点，实现链式调用的方法就是return this返回当前对象，上面的代码中用了each方法来循环实现每个对象的访问。

- 单例模式的动态方法：

$.fn.MyPlugin = function(){
    var me = $(this),
        instance = me.data("myPlugin");   //利用data()来存放插件对象的实例

    //如果实例存在就不重新创建，如果不存在就创建  
    if(!instence){
        me.data("myPlugin",(instance = new myPlugin()));
    }
}

 

总结：一个单例模式jQuery插件的框架可以这样写：

//创建一个闭包，形参是$,实参是jQuery
(function($){
　　//私有方法
　　var privateFun = function(){ }

　　var PageSlide = (function(){
　　　　//更改对象
　　　　function PageSlide(element,options){
　　　　　　this.settings = $.extend(true,$.fn.PageSlide.default,options||{});
　　　　　　this.element = element;
　　　　　　this.init();
　　　　}

　　　　PageSlide.prototype = {
　　　　　　// 初始化方法
　　　　　　init : function(){ }
　　　　}

　　return PageSlide;
})();

//默认参数
$.fn.PageSlide = function(options){
　　//实现链式调用
　　return this.each(function(){
　　　　var _self = $(this),
　　　　　　instance = _self.data('PageSlide');//存放插件实例
　　　　if (!instance) {
　　　　　　instance = new PageSlide(_self,options);
　　　　　　_self.data('PageSlide',instance);
　　　　}　　

　　　　if ($.type(options)=='string') return instance[options]();
　　});
}

    //配置默认参数

$.fn.PageSlide.default = { }

})(jQuery);

jQuery的$.extend()方法能够将默认参数与自定义参数合并，当有ture时是深拷贝，没有true时是浅拷贝。