js如何封裝成插件

這篇文章將為大家詳細講解有關js如何封裝成插件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是封裝呢？

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

為什么要把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"
});
</script>

就是這樣了。一個超級簡單的封裝

關于“js如何封裝成插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。