一入前端深似海，从此红尘是路人系列第二弹之如何简单粗暴的编写出一个属于自己的插件

作为一个刚入行不久的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。

;(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]; } // 使用必要条件进行检测，然后再往其原型中添加函数。 if(typeof this.NULL != "function") { // 缓存Plugins.prototype var proto = Plugins.prototype; // 抽象获取元素id方法 proto.g = function(id){ return document.getElementById(id); }, // 抽象元素绑定事件 proto.on = function(id,type,fn){ this.g(id)['on'+type] = fn; }, proto.init = function(){ var self = this; self.on(self.setting.pluginsID,'click',function(){ alert(self.setting.alertHtml) }) } } }; window['Plugins'] = Plugins; })();

调用方法如下：

new Plugins({ pluginsID: 'plugins', alertHtml: '欢迎来到插件世界' }).init();

以上几种便是我知道的一些常见插件的编写方式，相信各位小伙伴们看完对插件的开发也有了一定的了解。当然对于插件开发，其中最重要的就是继承和闭包了。对于继承这里我就不多说了，可以参考我另外一篇文章https://my.oschina.net/qiangdada/blog/745061。对于闭包，过段时间我也会写一篇有关的文章给各位小伙伴作为参考理解的。

小伙伴们，看完这篇文章后你有没有找到属于自己的那款简单粗暴的插件开发形式呢？

原文发布时间为：2016年09月16日
原文作者：qiangdada 

本文来源：开源中国 如需转载请联系原作者