jQuery 插件封裝的方法
擴(kuò)展jQuery插件和方法的作用是非常強(qiáng)大的,它可以節(jié)省大量開(kāi)發(fā)時(shí)間。這篇文章將概述jQuery插件開(kāi)發(fā)的基本知識(shí),最佳做法和常見(jiàn)的陷阱。
一、入門(mén)
編寫(xiě)一個(gè)jQuery插件開(kāi)始于給jQuery.fn加入新的功能屬性,此處添加的對(duì)象屬性的名稱(chēng)就是你插件的名稱(chēng):
. 代碼如下:
jQuery.fn.myPlugin = function(){ //你自己的插件代碼 };
用戶(hù)非常喜歡的符號(hào)哪里去了?它仍然存在,但是,為了避免和其他JavaScript庫(kù)沖突,我們最好將jQuery傳遞給一個(gè)自我執(zhí)行的封閉程序,jQuery在此程序中映射為符號(hào),這樣可以避免$號(hào)被其他庫(kù)覆寫(xiě)。
. 代碼如下:
(function ($) { $.fn.myPlugin = function () { //你自己的插件代碼 }; })(jQuery);
在這個(gè)封閉程序中,我們可以無(wú)限制的使用$符號(hào)來(lái)表示jQuery函數(shù)。
二、環(huán)境
現(xiàn)在,我們可以開(kāi)始編寫(xiě)實(shí)際的插件代碼。 但是,在這之前,我們必須得對(duì)插件所處的環(huán)境有個(gè)概念。 在插件的范圍里, this關(guān)鍵字代表了這個(gè)插件將要執(zhí)行的jQuery對(duì)象, 這里容易產(chǎn)生一個(gè)普遍的誤區(qū),因?yàn)樵谄渌琧allback的jQuery函數(shù)中,this關(guān)鍵字代表了原生的DOM元素。這常常會(huì)導(dǎo)致開(kāi)發(fā)者誤將this關(guān)鍵字無(wú)謂的包在jQuery中,如下所示。
. 代碼如下:
(function ($) { $.fn.myPlugin = function () { //此處沒(méi)有必要將this包在$號(hào)中如$(this),因?yàn)閠his已經(jīng)是一個(gè)jQuery對(duì)象。 //$(this)等同于 $($('#element')); this.fadeIn('normal', function () { //此處callback函數(shù)中this關(guān)鍵字代表一個(gè)DOM元素 }); }; })(jQuery); $('#element').myPlugin();
三、基礎(chǔ)知識(shí)
現(xiàn)在,我們理解了jQuery插件的基礎(chǔ)知識(shí),讓我們寫(xiě)一個(gè)插件,做一些事情。
. 代碼如下:
(function ($) { $.fn.maxHeight = function () { var max = 0; this.each(function () { max = Math.max(max, $(this).height()); }); return max; }; })(jQuery); var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
這是一個(gè)簡(jiǎn)單的插件,利用.height()返回頁(yè)面中高度最大的div元素的高度。
四、維護(hù)Chainability
很多時(shí)候,一個(gè)插件的意圖僅僅是以某種方式修改收集的元素,并把它們傳遞給鏈中的下一個(gè)方法。 這是jQuery的設(shè)計(jì)之美,是jQuery如此受歡迎的原因之一。 因此,要保持一個(gè)插件的chainability,你必須確保你的插件返回this關(guān)鍵字。
. 代碼如下:
(function ($) { $.fn.lockDimensions = function (type) { return this.each(function () { var $this = $(this); if (!type || type == 'width') { $this.width($this.width()); } if (!type || type == 'height') { $this.height($this.height()); } }); }; })(jQuery); $('div').lockDimensions('width').CSS('color', 'red');
由于插件返回this關(guān)鍵字,它保持了chainability,這樣jQuery收集的元素可以繼續(xù)被jQuery方法如.css控制。 因此,如果你的插件不返回固有的價(jià)值,你應(yīng)該總是在其作用范圍內(nèi)返回this關(guān)鍵字。 此外,你可能會(huì)推斷出,傳遞給插件的參數(shù)將會(huì)在插件的作用范圍內(nèi)被傳遞。 因此,在前面的例子,字符串'width'變成了插件的類(lèi)型參數(shù)。
五、默認(rèn)值和選項(xiàng)
對(duì)于比較復(fù)雜的和提供了許多選項(xiàng)可定制的的插件,最好有一個(gè)當(dāng)插件被調(diào)用的時(shí)候可以被拓展的默認(rèn)設(shè)置(通過(guò)使用$.extend)。 因此,相對(duì)于調(diào)用一個(gè)有大量參數(shù)的插件,你可以調(diào)用一個(gè)對(duì)象參數(shù),包含你了你想覆寫(xiě)的設(shè)置。
. 代碼如下:
(function ($) { $.fn.tooltip = function (options) { //創(chuàng)建一些默認(rèn)值,拓展任何被提供的選項(xiàng) var settings = $.extend({ 'location': 'top', 'background-color': 'blue' }, options); return this.each(function () { // Tooltip插件代碼 }); }; })(jQuery); $('div').tooltip({ 'location': 'left' });
在這個(gè)例子中,調(diào)用tooltip插件時(shí)覆寫(xiě)了默認(rèn)設(shè)置中的location選項(xiàng),background-color選項(xiàng)保持默認(rèn)值,所以最終被調(diào)用的設(shè)定值為:
. 代碼如下:
{ 'location': 'left', 'background-color': 'blue' }
這是一個(gè)很靈活的方式,提供一個(gè)高度可配置的插件,而無(wú)需開(kāi)發(fā)人員定義所有可用的選項(xiàng)。
六、命名空間
正確命名空間你的插件是插件開(kāi)發(fā)的一個(gè)非常重要的一部分。 正確的命名空間,可以保證你的插件將有一個(gè)非常低的機(jī)會(huì)被其他插件或同一頁(yè)上的其他代碼覆蓋。 命名空間也使得你的生活作為一個(gè)插件開(kāi)發(fā)人員更容易,因?yàn)樗梢詭椭愀玫馗櫮愕姆椒?,事件和?shù)據(jù)。
七、插件方法
在任何情況下,一個(gè)單獨(dú)的插件不應(yīng)該在jQuery.fnjQuery.fn對(duì)象里有多個(gè)命名空間。
. 代碼如下:
(function ($) { $.fn.tooltip = function (options) { // this }; $.fn.tooltipShow = function () { // is }; $.fn.tooltipHide = function () { // bad }; $.fn.tooltipUpdate = function (content) { // !!! }; })(jQuery);
這是不被鼓勵(lì)的,因?yàn)樗?fn使.fn命名空間混亂。 為了解決這個(gè)問(wèn)題,你應(yīng)該收集對(duì)象文本中的所有插件的方法,通過(guò)傳遞該方法的字符串名稱(chēng)給插件以調(diào)用它們。
. 代碼如下:
(function ($) { var methods = { init: function (options) { // this }, show: function () { // is }, hide: function () { // good }, update: function (content) { // !!! } }; $.fn.tooltip = function (method) { // 方法調(diào)用 if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method' + method + 'does not exist on jQuery.tooltip'); } }; })(jQuery); //調(diào)用init方法 $('div').tooltip(); //調(diào)用init方法 $('div').tooltip({ foo: 'bar' }); // 調(diào)用hide方法 $(‘div').tooltip(‘hide'); //調(diào)用Update方法 $(‘div').tooltip(‘update', ‘This is the new tooltip content!');
這種類(lèi)型的插件架構(gòu)允許您封裝所有的方法在父包中,通過(guò)傳遞該方法的字符串名稱(chēng)和額外的此方法需要的參數(shù)來(lái)調(diào)用它們。 這種方法的封裝和架構(gòu)類(lèi)型是jQuery插件社區(qū)的標(biāo)準(zhǔn),它被無(wú)數(shù)的插件在使用,包括jQueryUI中的插件和widgets。
八、事件
一個(gè)鮮為人知bind方法的功能即允許綁定事件命名空間。 如果你的插件綁定一個(gè)事件,一個(gè)很好的做法是賦予此事件命名空間。 通過(guò)這種方式,當(dāng)你在解除綁定的時(shí)候不會(huì)干擾其他可能已經(jīng)綁定的同一類(lèi)型事件。 你可以通過(guò)追加命名空間到你需要綁定的的事件通過(guò) ‘.'。
. 代碼如下:
(function ($) { var methods = { init: function (options) { return this.each(function () { $(window).bind('resize.tooltip', methods.reposition); }); }, destroy: function () { return this.each(function () { $(window).unbind('.tooltip'); }) }, reposition: function () { //... }, show: function () { //... }, hide: function () { //... }, update: function (content) { //... } }; $.fn.tooltip = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.tooltip'); } }; })(jQuery); $('#fun').tooltip(); //一段時(shí)間之后… … $(‘#fun').tooltip(‘destroy');
在這個(gè)例子中,當(dāng)tooltip通過(guò)init方法初始化時(shí),它將reposition方法綁定到resize事件并給reposition非那方法賦予命名空間通過(guò)追加.tooltip。 稍后, 當(dāng)開(kāi)發(fā)人員需要銷(xiāo)毀tooltip的時(shí)候,我們可以同時(shí)解除其中reposition方法和resize事件的綁定,通過(guò)傳遞reposition的命名空間給插件。 這使我們能夠安全地解除事件的綁定并不會(huì)影響到此插件之外的綁定。
九、數(shù)據(jù)
通常在插件開(kāi)發(fā)的時(shí)候,你可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個(gè)元素。 使用jQuery的data方法是一個(gè)很好的基于元素的記錄變量的途徑。盡管如此,相對(duì)于記錄大量的不同名字的分離的data, 使用一個(gè)單獨(dú)的對(duì)象保存所有變量,并通過(guò)一個(gè)單獨(dú)的命名空間讀取這個(gè)對(duì)象不失為一個(gè)更好的方法。
. 代碼如下:
(function ($) { var methods = { init: function (options) { return this.each(function () { var $this = $(this), data = $this.data('tooltip'), tooltip = $('<div />', { text: $this.attr('title') }); // If the plugin hasn't been initialized yet if (!data) { /* Do more setup stuff here */ $(this).data('tooltip', { target: $this, tooltip: tooltip }); } }); }, destroy: function () { return this.each(function () { var $this = $(this), data = $this.data('tooltip'); // Namespacing FTW $(window).unbind('.tooltip'); data.tooltip.remove(); $this.removeData('tooltip'); }) }, reposition: function () { // ... }, show: function () { // ... }, hide: function () { // ... }, update: function (content) { // ... } }; $.fn.tooltip = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.tooltip'); } }; })(jQuery);
將數(shù)據(jù)通過(guò)命名空間封裝在一個(gè)對(duì)象中,可以更容易的從一個(gè)集中的位置讀取所有插件的屬性。
十、總結(jié)和最佳做法
編寫(xiě)jQuery插件允許你做出庫(kù),將最有用的功能集成到可重用的代碼,可以節(jié)省開(kāi)發(fā)者的時(shí)間,使開(kāi)發(fā)更高效。 開(kāi)發(fā)jQuery插件時(shí),要牢記:
1.始終包裹在一個(gè)封閉的插件:
. 代碼如下:
(function($) { /* plugin goes here */ })(jQuery);
2.不要冗余包裹this關(guān)鍵字在插件的功能范圍內(nèi)
3.除非插件返回特定值,否則總是返回this關(guān)鍵字來(lái)維持chainability 。
4.傳遞一個(gè)可拓展的默認(rèn)對(duì)象參數(shù)而不是大量的參數(shù)給插件。
5.不要在一個(gè)插件中多次命名不同方法。
3.始終命名空間的方法,事件和數(shù)據(jù)。
最后加一個(gè)自己寫(xiě)的放大鏡的插件`
(function($){$.fn.Fdj=function(){ $('#smallImg').on('mouseover', function() { $('#slider').show(); }) $('#smallImg').on('mouseout', function() { $('#slider').hide(); }) $('#smallImg').on('mousemove', function(e) { var x = e.clientX - $('#slider').width() / 2; var y = e.clientY - $('#slider').height() / 2; if(x <= 0) { x = 0 } if(x > $('#smallImg').width() - $('#slider').width()) { x = $('#smallImg').width() - $('#slider').width(); } if(y <= 0) { y = 0 } if(y > $('#smallImg').height() - $('#slider').height()) { y = $('#smallImg').height() - $('#slider').height(); } $('#slider').css({ 'left': x, 'top': y }) var X=x/$('#smallImg').width()*800 var Y=y/$('#smallImg').height()*800 $('#img').css({ left:-X, top:-Y }) }) } })(jQuery)
以上所述是小編給大家介紹的jQuery 插件封裝的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)
最近做項(xiàng)目用到了jquery。在做的過(guò)程中走了很多彎路,不停的搜索??偨Y(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考2013-09-09jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果,涉及jQuery事件響應(yīng)及元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱(chēng)的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱(chēng)的option方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
用戶(hù)點(diǎn)擊下一步時(shí),不對(duì)Display=none的新增區(qū)域表單進(jìn)行驗(yàn)證,需要在用戶(hù)點(diǎn)擊“取消增加時(shí)”,禁用服務(wù)器驗(yàn)證控件。反之,啟用服務(wù)器驗(yàn)證控件。2010-04-04jquery 判斷div show的狀態(tài)實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 判斷div show的狀態(tài)實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12