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

做为一个刚入行不久的web前端工程师，虽然经验很少，可是基于本人的性格，有本身掌握的而且认为比较好玩比较高大上的东西固然是要献给你们的。此博客发表后也但愿能够帮到一些还在为插件编写徘徊的兄弟们。

一、首先先来一段我本身项目开发中最喜欢的插件的写法，也是一个比较经典的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: '欢迎来到插件世界'
  });
})

二、接下来给你们分享一下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。对于闭包，过段时间我也会写一篇有关的文章给各位小伙伴做为参考理解的。

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