一入前端深似海，今後紅塵是路人系列第二彈之如何簡單粗暴的編寫出一個屬於本身的插件

做爲一個剛入行不久的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。對於閉包，過段時間我也會寫一篇有關的文章給各位小夥伴做爲參考理解的。

小夥伴們，看完這篇文章後你有沒有找到屬於本身的那款簡單粗暴的插件開發形式呢？