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

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了網(wǎng)站制作、成都做網(wǎng)站，成都網(wǎng)站設(shè)計(jì)，1元廣告，成都做網(wǎng)站選創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價(jià)比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

什么是封裝呢？

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

為什么要把js功能封裝成插件呢？我覺(jué)得有以下幾點(diǎn)吧

1、便于代碼復(fù)用

2、避免各個(gè)相同功能組件的干擾，可能會(huì)有作用域的一些問(wèn)題吧

3、便于維護(hù)，同時(shí)利于項(xiàng)目積累

4、不覺(jué)得一直復(fù)制粘貼很low么.......

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

我們?cè)诜庋b的時(shí)候會(huì)把js代碼放到一個(gè)自執(zhí)行函數(shù)里面，這樣可以防止變量沖突。

(function(){

  ......

  ......

}()}

然后再創(chuàng)建一個(gè)構(gòu)造函數(shù)

(function(){

  var demo = function(options){

    ......

  }

}())

把這個(gè)函數(shù)暴露給外部，以便全局調(diào)用

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

其實(shí)現(xiàn)在你可以直接調(diào)用了，封裝好了，雖然沒(méi)實(shí)現(xiàn)什么功能

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

或者

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

然后傳參怎么搞呢，我們一個(gè)插件一般有一些必選參數(shù)或者可選參數(shù)，在我看來(lái)可選參數(shù)不過(guò)就是在插件里面給了默認(rèn)值罷了。我們傳的參數(shù)會(huì)覆蓋插件中的默認(rèn)參數(shù)，可以用$.extend({})覆蓋

(function(){

  var demo = function(options){

    this.options = $.extend({

      "x" : 1,

      "y" : 2,

      "z" : 3

    },options)

  }

  window.demo = demo;

}())

然后你可以在在初始化構(gòu)造函數(shù)的時(shí)候執(zhí)行一些操作

(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>

就是這樣了。一個(gè)超級(jí)簡(jiǎn)單的封裝

 

關(guān)于“js如何封裝成插件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：js如何封裝成插件
網(wǎng)頁(yè)URL：http://aaarwkj.com/article42/gopshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、軟件開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、服務(wù)器托管、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)