jQuery插件编写

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jplyue/article/details/82356695

如何编写一个jQuery插件？

先将模板附上

var default = {
    ...
}

function Plugin(element, options){
    this.element = element;
    this.options = $.extend({}, defaults, options);
    console.log('I am from ', element );
    this.init();
}

$.fn.pluginName = function(params){
    var lists = this,
        retval = this,
        args = Array.prototype.slice.call(arguments, 1);

    lists.each(function(){
        var dataPlugin = $(this).data("plugin");
        if(!dataPlugin){
            $(this).data("plugin", new Plugin(this, params));
            $(this).data("plugin-id", new Date().getTime());
        }else if(typeof params == "string"){
            retval = dataPlugin[params].apply(dataPlargs);
        }else if(typeof params == 'object'){
            dataPlugin.options = $.extend({}, dataPlugin.options, params);
            dataPlugin.restart();
        }
    });

    return retval || this;
}

$.fn.pluginName 即给 $.fn添加扩展function，所以jQuery对象会继承pluginName。

调用方式：

$('div').pluginName({
    ...options
});

解释

大体流程：针对每个jQuery对象，只初始化一个插件实例，将其储存在data中。访问插件时，如果实例存在，直接读取；否则，初始化一个新实例，并将其绑定。另外，如果传入的参数不是object，是string，可以直接调取function中的方法。

default

可以在此处定义预设的参数
this.options = $.extend({}, defaults, options);
这句执行之后，defaults会被options覆盖

lists:

页面上可能存在多个div，对每个div都进行插件的初始化

retval

return value

args

传入的参数，第一个参数为params，剩余的参数统一放进args进行管理

Plugin.prototype = {
    delete: function(node){

    },
    restart: function(){
        this.init();
    }
}

$.fn.pluginName = function(params){
    var lists = this,
        retval = this,
        args = Array.prototype.slice.call(arguments, 1);

    lists.each(function(){
        var dataPlugin = $(this).data("plugin");
        if(!dataPlugin){
            //之前并未初始化，初始化并将实例通过data方法绑定到jQuery对象上
            $(this).data("plugin", new Plugin(this, params));
            //同时绑定一个id
            $(this).data("plugin-id", new Date().getTime());
        }else if(typeof params == "string"){
            //传入的是string时，调用function的原型方法
            retval = dataPlugin[params].apply(dataPlargs);
        }else if(typeof params == 'object'){
            //传入的是object时，更新配置参数，并重新初始化插件
            dataPlugin.options = $.extend({}, dataPlugin.options, params);
            dataPlugin.restart();
        }
    });

    return retval || this;
}

调用方法说明

//比如你想调用Plugin中的delete方法
$(div).pluginName('delete', node);
//此时的arg = [node], params = 'delete'

以上……