JS封裝插件案例

這次帶給大家JS封裝外掛案例，JS封裝外掛的注意事項有哪些，下面就是實戰案例，一起來看一下。

由於專案原因，工作一年多還沒用js寫過插件，專案太成熟，平常基本上都是在使用已經封裝好的功能插件。感覺自己好low......這兩天想自己抽空寫一個canvas畫統計圖與折現圖的插件，所以就去網上學習了下如何封裝.....雖然之前看了很多源碼，但是感覺就算了解也是野路子.....

# 什麼是封裝呢？

# 我的理解就是 把一個功能單獨做成一個組件，就像做餃子，以前做餃子必須自己先用麵粉做餃子皮，再做餃子餡，然後再手工包餃子，但是現在人們發明了自動包餃子機器，雖然機器裡面的每一步驟和你自己包餃子是一樣的，但是實際上你現在需要做的就只有一件事，就是放原料。這邊機器就是封裝好的插件，而原料就是你要傳遞的參數

# 為什麼要把js功能封裝成插件呢？我覺得有以下幾點吧

  1、方便程式碼重複使用

  2、避免各個相同功能組件的干擾，可能會有作用域的一些問題吧

#   3、便於維護，同時利於專案累積

#   4、不覺得一直複製貼上很low麼.......

我在網路上看到的封裝好像有兩種，一種是js的原生封裝，一種是jquery的封裝。這邊我先講一下原生封裝吧。

我們在封裝的時候會把js程式碼放到一個自執行函數裡面，這樣可以防止變數衝突。

(function(){
  ......
  ......
}()}

然後再建立一個建構子

(function(){
  var demo = function(options){
    ......
  }
}())

把這個函數暴露給外部，以便全域呼叫

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

其實實作在你可以直接呼叫了，封裝好了，雖然沒實作什麼功能

var ss = new demo({
  x:1,
  y:2
})；

或

new demo({
  x:2,
  y:3
})；

然後傳參怎麼搞呢，我們一個插件一般有一些必選參數或可選參數，在我看來可選參數不過就是在插件裡面給了預設值罷了。我們傳的參數會覆寫插件中的預設參數，可以用$.extend({})覆寫

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

# 然後你可以在初始化建構函式的時候執行一些操作

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});

我這邊有個疑問，extend只是jquery有嗎，js物件有什麼代替方法嗎？晚點在看看............. 

# 還有要提的是封裝js的時候我們要考慮周全，例如它的擴充性和相容性，還有效能怎麼樣，還有沒必要的就不需要封裝了......要有選擇性。

現在網路上已經完成的插件數不勝數，而且功能又十分強大，但是恰恰是這點，有的時候一個很大的插件我們只用到很小的一部分，那麼就需要我們自己修改成適合我們自己的了，而且有些項目的風格和現在的插件風格也不同，所以關鍵是要適合自己的項目。                 

##相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vuejs怎麼操作頁面區域化

#webpack2 React使用詳解

#JQUERY透過目前標籤名稱取得屬性的值

#

以上是JS封裝插件案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！