如何简单粗暴的编写属于自己的插件-白红宇

作为一个刚入行不久的web前端工程师，虽然经验不多，但是基于本人的性格，有自己掌握的并且认为比较好玩比较高大上的东西当然是要献给大家的。此博客发表后也希望可以帮到一些还在为插件编写徘徊的兄弟们。

1、首先先来一段我自己项目开发中最喜欢的插件的写法，也是一个比较经典的jQuery插件写法。

//闭包限定命名空间;(function($,doc,win){var Plugins = function(options){    this.setting = {        //这里是插件中各种参数,各种属性配置        pluginsID : '',        alertHtml : ''    };    /**     * 这里如果有懂JavaScript设计模式的朋友们应该知道     * 这是比较常见的适配器模式,通过适配器来适配传入的参数     */    for(var i in this.setting){        this.setting[i] = options[i] || this.setting[i];    }    //或者通过$.extend(this.setting,options)进行适配,不过这样可能会多添加属性,小伙伴们可以自行去测试    //调用插件方法    this.init();}Plugins.prototype = {    myFn : function(){        var self = this;        $(self.setting.pluginsID).click(function(){            alert(self.setting.alertHtml);        })    },    init : function(){        //定义变量self保存this,避免this指向偏移        var self = this;        self.myFn();    }};//将编写好的插件暴露出去window['Plugins'] = Plugins;})(jQuery,document,window);

对于为什么会在代码最前面加上一个";"，这个也是为了避免后期因为利用grunt,gulp等构建工具进行代码的压缩打包产生的不必要的冲突。插件调用方法如下：

$(function(){    //插件的调用    new Plugins({        pluginsID : '#plugins',        alertHtml : '欢迎来到插件世界'    });})

2、接下来给大家分享一下jQuery官方提供的一个标准化的开发模式

;(function($){    $.fn.plugins = function(options){        var setting = {            //各种参数，各种属性        }        var options = $.extend(setting,options);        this.each(function(){            //各种功能            //定义变量self保存当前对象            var self = $(this);            self.find(options.pluginsID).click(function(){                alert(options.alertHtml);            });        });                // 返回当前对象,可以在插件调用的同时进行链式操作        return this;    }})(jQuery);

调用方法如下：

$(function(){    //插件的调用    $('body').plugins({        pluginsID : '#plugins',        alertHtml : '欢迎来到插件世界'    });})

那么上面的return this怎么进行链式操作呢？操作也是相当的简单，具体操作如下：

$(function(){    //return this将插件的调用对象$('body')重新返回了回去,因此只需要在插件调用后进行链式操作即可    $('body').plugins({        pluginsID : '#plugins',        alertHtml : '欢迎来到插件世界'    }).find('#plugins').css({background:'red'});})怎么样，这```  种操作是不是很方便。3.原生JavaScript插件开发。

;(function(doc,win){

var Plugins = function(options) {

this.setting = {    pluginsID : '',    alertHtml : ''};for(var i in this.setting){    this.setting[i] = options[i] || this.setting[i];}this.init();

};

// 通过单例模式抽象JavaScript一些属性样式方法

Plugins.prototype = {

g : function(id){    return document.getElementById(id);},on : function(id,type,fn){    this.g(id)['on'+type] = fn;},init : function(){    var self = this;    self.on(self.setting.pluginsID,'click',function(){        alert(self.setting.alertHtml)    })}

};

window['Plugins'] = Plugins;

})();

调用方法如下：

new Plugins({

pluginsID : 'plugins',alertHtml : '欢迎来到插件世界'

});

以上原生JavaScript插件的开发是不是和前面的两种十分的相似，因为他们都是通过原型模式进行插件的中的继承从而实现插件的功能。还有一种原生JavaScript插件的开发便是动态原型模式进行开发，话不多说，直接上code。