jquery 插件閉包

時間 2019-11-21

標籤 jquery 插件閉包欄目 JQuery 简体版

原文原文鏈接

1. 對JQuery自身的擴展插件
javascript

顧名思義，這種插件是對JQuery自身的方法庫進行擴展的。在使用的時候經過$.MethodName()的方式直接使用。
插件代碼示例：css

$.extend({

handleTableUI : function (table){

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" });

});

}

});

示例說明：當要對JQuery自身進行擴展的時候，須要採用$.extend();的形式進行開發，JQuery的extend()方法爲咱們提供了擴展JQuery自身的方式，在extend()方法中，咱們採用{...}的形式編寫具體的方法體。其中，最重要的是要定義咱們本身的擴展方法，如示例中的handleTableUI。定義的方式是：方法名 : function(參數){ 方法體 }。經過此種方式咱們就能夠定義JQuery本身的擴展方法，並且這個方法能夠在web頁面經過智能提示顯示出來。頁面中調用的代碼以下：
java

<scripttype= "text/javascript" >

$(document).ready( function () {

$.handleTableUI( "newTable" );

});

</script>

對HTML標記或頁面元素進行擴展
使用這種插件的擴展方式，在使用此插件時，須要首先引用通過JQuery包裝的頁面元素，如：$("#tableId").Method()。
插件代碼示例：jquery

( function ($){

$.fn.tableUI = function (options){

var defaults = {

evenRowClass: "evenRow" ,

oddRowClass: "oddRow" ,

activeRowClass: "activeRow"

}

var options = $.extend(defaults, options);

this .each( function (){

var thisTable=$( this );

//添加奇偶行顏色

$(thisTable).find( "tr:even" ).addClass(options.evenRowClass);

$(thisTable).find( "tr:odd" ).addClass(options.oddRowClass);

//添加活動行顏色

$(thisTable).find( "tr" ).bind( "mouseover" , function (){

$( this ).addClass(options.activeRowClass);

});

$(thisTable).find( "tr" ).bind( "mouseout" , function (){

$( this ).removeClass(options.activeRowClass);

});

};

})(jQuery);

這裏重點說一下這一句web

var options= $.extend(defaults, options);數組

這裏其實就是合併多個對象爲一個。這裏就是，若是你在調用的時候寫了新的參數，就用你新的參數，若是沒有寫，就用默認的參數。閉包

當要對頁面元素進行JQuery擴展時，須要採用(function($){...})(JQuery);的方式進行開發。在「...」處，定義咱們本身的方法，定義方式是：$.fn.自定義方法名 = function(參數){...};的形式定義擴展方法的具體內容。在頁面調用的時候不一樣於對JQuery自身的擴展。具體調用代碼以下：函數

3. 不要用在頁面顯式調用JQuery的方法，而是經過直接添加JQuery插件腳本引用，便可實現對該插件的調用。佈局

通常，若是須要用到一些全局的JQuery插件，即：插件的方法不須要顯式調用，而是引用腳本便可；同時，這種插件通常對整個Web頁面起到全局配置或設置的做用，如：對<body></body>內部的內容進行總體佈局，此時能夠採用腳本引用的方式實現。this

插件代碼示例：

( 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" });

});

}

};

//此處須要進行自調用

$( function () {

$.tableUI.set();

});

})(jQuery);

示例說明：若是上面這段代碼在my.plugin.js文件中，那麼，咱們只須要在頁面上添加對此腳本文件的引用便可，引用方式爲：<scriptsrc="Scripts/my.plugin.js"type="text/javascript"></script>，固然，在全部要用到JQuery的地方，須要首先添加對JQuery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調用本身所寫的插件方法，上面代碼中有註釋的地方。不然，咱們寫的插件代碼將不會起做用。

2、插件的基本要點

在編寫插件的時候，咱們須要記住這些要點，雖然不照着這麼作不會影響使用，可是要是你的插件是不規範的代碼，那何須花苦心思去寫插件。

jQuery插件的文件名推薦命名爲jquery.[插件名].js，以避免和其餘JavaScript庫插件混淆。例如命名爲jquery.color.js。

全部的對象方法都應當附加到jQuery.fn對象上，而全部的全局函數都應當附加到jQuery對象自己上。

在插件內部，this指向的是當前經過選擇器獲取的jQuery對象，而不像通常的方法那樣，例如click()方法，內部的this指向的是DOM元素。

能夠經過this.each來遍歷全部元素。

全部的方法或函數插件，都應當以分號結尾，不然壓縮的時候可能出現問題。爲了更穩妥些，甚至能夠在插件頭部先加上一個分號，以避免他人的不規範代碼給插件帶來影響。具體方法能夠參考後面的代碼。

插件應該返回一個jQuery對象，以保證插件的可鏈式操做。除非插件須要返回的是一些須要獲取的量，例如字符串或者數組等。

避免在插件內部使用$做爲jQuery對象的別名，而應使用完整的jQuery來表示。這樣能夠避免衝突。固然，也能夠利用閉包這種技巧來回避這個問題，使插件內部繼續使用$做爲jQuery的別名。不少插件都是這麼作的，本教程也會利用這種形式。

OK，以上就是我對JQuery插件的幾點理解，但願對你們能有所幫助，也但願你們在使用的過程當中能及時反饋相關信息。