由于項目原因，工作一年多還沒用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" }); </script>

?

?

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

?

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

?

還有需要提的是封裝js的時候我們要考慮周全，比如它的擴展性和兼容性，還有性能怎么樣，還有沒必要的就不需要封裝了......要有選擇性。

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

?

隔日不上

看了下jquery封裝

感覺就是把window對象換成了jquery對象？

(function($){$.fn.demo = function(options){var options = $.extend({....})}; })(jQuery);

調用的時候

$("#xx").demo();

?

轉載于:https://www.cnblogs.com/jiangshichao/p/7503044.html

總結

以上是生活随笔為你收集整理的js封装成插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。