js封装成插件
由于項(xiàng)目原因,工作一年多還沒用js寫過插件,項(xiàng)目太成熟,平時(shí)基本都是在使用已經(jīng)封裝好的功能插件。感覺自己好low......這兩天想自己抽空寫一個(gè)canvas畫統(tǒng)計(jì)圖與折現(xiàn)圖的插件,所以就去網(wǎng)上學(xué)習(xí)了下如何封裝.....雖然之前看了很多源碼,但是感覺就算了解也是野路子.....
什么是封裝呢?
我的理解就是 把一個(gè)功能單獨(dú)做成一個(gè)組件,就像做餃子,以前做餃子必須自己先用面粉做餃子皮,再做餃子餡,然后再手工包餃子,但是現(xiàn)在人們發(fā)明了自動包餃子機(jī)器,雖然機(jī)器里面的每一步驟和你自己包餃子是一樣的,但是實(shí)際上你現(xiàn)在需要做的就只有一件事,就是放原料。這邊機(jī)器就是封裝好的插件,而原料就是你要傳的參數(shù)
為什么要把js功能封裝成插件呢?我覺得有以下幾點(diǎn)吧
1、便于代碼復(fù)用
2、避免各個(gè)相同功能組件的干擾,可能會有作用域的一些問題吧
3、便于維護(hù),同時(shí)利于項(xiàng)目積累
4、不覺得一直復(fù)制粘貼很low么.......
我在網(wǎng)上看到的封裝好像有兩種,一種是js的原生封裝,一種是jquery的封裝。這邊我先講一下原生封裝吧。
我們在封裝的時(shí)候會把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)用了,封裝好了,雖然沒實(shí)現(xiàn)什么功能
var ss = new demo({x:1,y:2 });或者new demo({x:2,y:3 });?
?然后傳參怎么搞呢,我們一個(gè)插件一般有一些必選參數(shù)或者可選參數(shù),在我看來可選參數(shù)不過就是在插件里面給了默認(rèn)值罷了。我們傳的參數(shù)會覆蓋插件中的默認(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è)超級簡單的封裝
?
我這邊有個(gè)疑問,extend只是jquery有嗎,js對象有什么代替方法嗎?晚點(diǎn)在看看.............
?
還有需要提的是封裝js的時(shí)候我們要考慮周全,比如它的擴(kuò)展性和兼容性,還有性能怎么樣,還有沒必要的就不需要封裝了......要有選擇性。
現(xiàn)在網(wǎng)上已經(jīng)完成的插件數(shù)不勝數(shù),而且功能又十分強(qiáng)大,但是恰恰是這點(diǎn),有的時(shí)候一個(gè)很大的插件我們只用到很小的一部分,那么就需要我們自己修改成適合我們自己的了,而且有些項(xiàng)目的風(fēng)格和現(xiàn)在的插件風(fēng)格也不同,所以關(guān)鍵是要適合自己的項(xiàng)目。
?
隔日不上
看了下jquery封裝
感覺就是把window對象換成了jquery對象?
(function($){$.fn.demo = function(options){var options = $.extend({....})}; })(jQuery);調(diào)用的時(shí)候
$("#xx").demo();?
轉(zhuǎn)載于:https://www.cnblogs.com/jiangshichao/p/7503044.html
總結(jié)
- 上一篇: settings.xml 文件配置
- 下一篇: java标识符的规则等