jquery 插件闭包
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
1. 對JQuery自身的擴(kuò)展插件
顧名思義，這種插件是對JQuery自身的方法庫進(jìn)行擴(kuò)展的。在使用的時候通過$.MethodName()的方式直接使用。
插件代碼示例：
示例說明：當(dāng)要對JQuery自身進(jìn)行擴(kuò)展的時候，需要采用$.extend();的形式進(jìn)行開發(fā)，JQuery的extend()方法為我們提供了擴(kuò)展JQuery自身的方式，在extend()方法中，我們采用{...}的形式編寫具體的方法體。其中，最重要的是要定義我們自己的擴(kuò)展方法，如示例中的handleTableUI。定義的方式是：方法名 : function(參數(shù)){ 方法體 }。通過此種方式我們就可以定義JQuery自己的擴(kuò)展方法，而且這個方法可以在web頁面通過智能提示顯示出來。頁面中調(diào)用的代碼如下：
對HTML標(biāo)記或頁面元素進(jìn)行擴(kuò)展
使用這種插件的擴(kuò)展方式，在使用此插件時，需要首先引用經(jīng)過JQuery包裝的頁面元素，如：$("#tableId").Method()。
插件代碼示例：
這里重點說一下這一句
var options= $.extend(defaults, options);
這里其實就是合并多個對象為一個。這里就是，如果你在調(diào)用的時候?qū)懥诵碌膮?shù)，就用你新的參數(shù)，如果沒有寫，就用默認(rèn)的參數(shù)。
?
當(dāng)要對頁面元素進(jìn)行JQuery擴(kuò)展時，需要采用(function($){...})(JQuery);的方式進(jìn)行開發(fā)。在“...”處，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(參數(shù)){...};的形式定義擴(kuò)展方法的具體內(nèi)容。在頁面調(diào)用的時候不同于對JQuery自身的擴(kuò)展。具體調(diào)用代碼如下：
3. 不要用在頁面顯式調(diào)用JQuery的方法，而是通過直接添加JQuery插件腳本引用，即可實現(xiàn)對該插件的調(diào)用。
一般，如果需要用到一些全局的JQuery插件，即：插件的方法不需要顯式調(diào)用，而是引用腳本即可；同時，這種插件一般對整個Web頁面起到全局配置或設(shè)置的作用，如：對<body></body>內(nèi)部的內(nèi)容進(jìn)行整體布局，此時可以采用腳本引用的方式實現(xiàn)。
插件代碼示例：
( function ($) {??? $.tableUI = { set: function () {??? varthisTable = $( "table" );??? $(thisTable).find( "tr" ).bind( "mouseover" , function () {??? $( this ).css({ color: "#ff0011" , background: "blue" });??? });??? $(thisTable).find( "tr" ).bind( "mouseout" , function () {??? $( this ).css({ color: "#000000" , background: "white" });??? });??? }??? };??? //此處需要進(jìn)行自調(diào)用??? $( function () {??? $.tableUI.set();??? });??? })(jQuery);示例說明：如果上面這段代碼在my.plugin.js文件中，那么，我們只需要在頁面上添加對此腳本文件的引用即可，引用方式為：<scriptsrc="Scripts/my.plugin.js"type="text/javascript"></script>，當(dāng)然，在所有要用到JQuery的地方，需要首先添加對JQuery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調(diào)用自己所寫的插件方法，上面代碼中有注釋的地方。否則，我們寫的插件代碼將不會起作用。
?
二、插件的基本要點
?
在編寫插件的時候，我們需要記住這些要點，雖然不照著這么做不會影響使用，但是要是你的插件是不規(guī)范的代碼，那何必花苦心思去寫插件。
?
?jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JavaScript庫插件混淆。例如命名為jquery.color.js。
?所有的對象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對象本身上。
?在插件內(nèi)部，this指向的是當(dāng)前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內(nèi)部的this指向的是DOM元素。
?可以通過this.each來遍歷所有元素。
?所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號結(jié)尾，否則壓縮的時候可能出現(xiàn)問題。為了更穩(wěn)妥些，甚至可以在插件頭部先加上一個分號，以免他人的不規(guī)范代碼給插件帶來影響。具體方法可以參考后面的代碼。
?插件應(yīng)該返回一個jQuery對象，以保證插件的可鏈?zhǔn)讲僮?。除非插件需要返回的是一些需要獲取的量，例如字符串或者數(shù)組等。
避免在插件內(nèi)部使用$作為jQuery對象的別名，而應(yīng)使用完整的jQuery來表示。這樣可以避免沖突。當(dāng)然，也可以利用閉包這種技巧來回避這個問題，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名。很多插件都是這么做的，本教程也會利用這種形式。
?
?
?
OK，以上就是我對JQuery插件的幾點理解，希望對大家能有所幫助，也希望大家在使用的過程中能及時反饋相關(guān)信息。
轉(zhuǎn)載于:https://my.oschina.net/u/876290/blog/391429
總結(jié)
以上是生活随笔為你收集整理的jquery 插件闭包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开心消消乐隐藏关139关怎么过
- 下一篇： 英特尔Nehalem微架构三级缓存原理学