JQuery插件之$.fn

muzhuyu 發布于2019-08-26 13:34 / 2002人閱讀

摘要：既然是插件就要考慮兼容性，所以通過在匿名函數中多定義一個的形參，由于只傳入了一個實參，從而可以保證形參未被賦值，從而最終是我們想要的的值，什么是我們想要的即，沒有被賦值，就是。表示一個匿名函數，后面緊跟一個，表示立即執行函數。

jQuery對象方法

$("a").css("color", "red");

當使用$選擇元素的時候，它會返回一個jQuery對象，這個對象中包含了你一直使用的方法（比如：.css()，.click()等）。這個jQuery對象是從$.fn對象中得到的這些方法。$.fn對象包含了jQuery對象的所有方法，如果想編寫我們自己的方法，也要將方法定義在$.fn對象里面。使用這種方式編寫插件，即jQuery類的實例將會擁有此功能。為什么會有這種效果？簡單看下源碼

jQuery.fn = jQuery.prototype ={ 
　　　init: function( selector, context ){
      //do something...
};

從源碼可知，當使用$.fn的方式編寫插件時，就是在jQuery的原型中綁定新的方法，所以根據原型的特性，新創建的jQuery對象自然會擁有新綁定的方法。

初識插件

目的：改變a標簽的字體顏色
做法：創建名為greenify的方法，將其加在$.fn里面。
如此一來，greenify方法適用于所有的jQuery對象了



    Title
    
    


    Click Me!!!
    Cover Me!!!

$.fn還有另外一種寫法$.fn.extend({})

jQuery.fn.extend({
    greenify: function () {
        $(this).css("color", "red");
    }
});
$(function () {
    $("a").greenify();
});

鏈式寫法

jQuery.fn.extend({
    greenify: function () {
        $(this).css("color", "red");
        //在結尾處返回this
        return this;
    }
});
$(function () {
    $("a").greenify().addClass("greenified");
});

鏈式編程的好處就是當調用完一個方法后，可以在后面繼續調用該對象的其他方法。

$的別名保護

$在JavaScript庫中使用是非常廣泛的，如果你正在使用的其他JavaScript類庫中也使用到了$，并且你也使用了jQuery，那么你不得不使用jQuery.noConflict()來解除沖突。顯然這會破壞我們的插件，因為它是在假設$是jQuery函數的別名（實際上$本來就是jQuery的別名）如果既想使用其他插件，也要使用jQuery的$別名，我們需要將代碼放進立即執行函數（文章結尾會對其簡單解釋）中，然后將jQuery作為實參傳遞進去，$作為形參接收。

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };

}( jQuery ));

由于window，document都是全局作用域的，而將其傳入函數內部后，其在內部是作為局部變量存在的，這樣做可以提高性能，減少作用域的查找時間，如果在函數內部多次調用window、document，這是很高效的做法。

(function ( _window, _document ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 
}( window, document));

另外，存儲私有變量也是使用立即執行函數的主要目的，假如想要存儲一個默認的顏色，就可以使用一個私有變量進行存儲。

 (function ($) {
     var defaultColor = "pink";
     $.fn.extend({
         setColor:function () {
            $(this).css("color", defaultColor);
            return $(this);
         }
     })
 })(jQuery);
 $(function () {
     //所有div的text都會變成粉色
     $("div").setColor();
 });

;分號的使用

通常在編寫插件時，會在在立即執行函數前加入一個分號

;(function($){
   //do something...
})(jQuery);

作用：防止多個文件壓縮合并后，前一個文件最后一行語句沒加分號，而引起合并后的語法錯誤。
如果前面已經加了分號，此時就會多出來一個分號，但這樣是不會報錯的。即不怕多，就怕少。

undefined解決兼容性問題

;(function($, undefined){
  //do something...
})(jQuery)

上面代碼的undefined參數略顯多余，此參數是為了解決undefined在老一輩的瀏覽器（IE5）可以被賦值的問題，全局的undefined有可能會被其他函數覆蓋。

 var undefined = 99;
 alert(undefined);

以上代碼如果在IE5運行，可以彈出99，而不是undefined，如果是這樣的話，全局的undefined就有被其他函數覆蓋的危險；但以上代碼在chrome運行，會彈出undefined。
既然是插件就要考慮兼容性，所以通過在匿名函數中多定義一個undefined的形參，由于只傳入了一個實參jQuery，從而可以保證undefined形參未被賦值，從而最終是我們想要的undefined的值，什么是我們想要的undefined？即，undefined沒有被賦值，undefined就是undefined。

最大限度的減少插件的空間

當使用$.fn創建插件時，盡量減少空間的占用，能使用參數進行區分的，就不要多定義一個方法，這樣可以降低插件被覆蓋的可能性。

反例

(function( $ ) {
    $.fn.TurnOnLight= function() {
        // Turn on
    };
    $.fn.TurnOffLight = function() {
        // Turn off
    };
}( jQuery ));

正例

(function( $ ) {
    $.fn.light = function( action ) {
        if ( action === "turnOn") {
            // Turn on light code.
        }
        if ( action === "turnOff" ) {
            // Turn off light code.
        }
    };
}( jQuery ));

使用參數選項

當插件越來越復雜時，通過接收參數選項的方式來自定義插件是一種很好的做法。



    Title
    



JavaScript
Jquery

調用changeColor不傳遞任何參數，文本顏色默認紅色，背景默認天藍色；反之按照傳入參數渲染顏色。默認的顏色被$.extned()覆蓋為其他顏色。

$.extend({
    color: "red",
    backgroundColor:"skyblue"
}, options)

以上代碼執行結果：options如果有值，那么它將覆蓋第一個參數并返回options；如果為undefined則直接返回第一個參數。

簡單解釋立即執行函數（IIFE）

立即執行函數(（Immediately-Invoked Function Expression）也稱為自調用函數，函數定義好后會自動執行。(function(){})表示一個匿名函數，后面緊跟一個()，表示立即執行函數。

(function(){
   console.log("我會立即執行");
})()
(function(param){
    console.log(param); //我會立刻執行
})("我會立刻執行");

優點：不會產生產生全局變量，不會造成變量污染。
缺點：只能執行一次，沒法重復執行。
在編寫插件時，使用IIFE是最合適不過的了，插件只需要引用一次，即執行一次。

GPU云服務器云服務器 jquery插件源碼jquery jquery插件手寫jQuery插件 jquery表單插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109073.html

前端基礎進階（十一）：詳細圖解jQuery對象，以及如何擴展jQuery插件

摘要：而在構造函數中，返回了的實例對象。在中直接返回過的實例，這里的是的真正構造函數最后對外暴露入口時，將字符與對等起來。因此當我們直接使用創建一個對象時，實際上是創建了一個的實例，這里的正真構造函數是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早幾年學習前端，大家都非常熱衷于研究jQuery源...

RebeccaZhong 2019-08-21 18:31 評論0 收藏0
jQuery入門筆記之（七）插件

摘要：目前插件已超過幾千種，由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言，直接使用這些插件將快速穩定架構系統，節約項目成本。也就是說，插件也是代碼，通過文件引入的方式植入即可。現在我們就完成了一個下拉菜單的插件。插件(Plugin)也成為 jQuery 擴展(Extension)，是一種遵循一定規范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界...

defcon 2019-08-19 17:44 評論0 收藏0
理解jquery的$.extend

摘要：當目標對象為空時，對象將會被默認為目標對象，這時相當于我們在的命名空間下添加新的功能，這是常見的插件開發模式。以上皆個人愚見，請笑納理解jquery的$.extend 今日在寫js插件過程中需要使用擴展對象的方法，便想到了jQuery.extend這個方法，但又不甚了解，故去查了下官方API文檔，自己也進行了相應嘗試，現將所得總結如下： $.extend和$.fn.extend的相關...

CarterLi 2019-08-21 15:18 評論0 收藏0
jQuery擴展

摘要：傳遞一個可拓展的默認對象參數而不是大量的參數給插件。始終命名空間的方法，事件和數據。 jq--CDN jQ -- jQuery源碼解析 1、jQuery.extend() 與 jQuery.fn.extend()把jQuery看成一個封裝js類這樣好理解$.extend是擴展的jQuery這個類為jQuery類添加類方法可以理解為靜態方法只跟這個類本身有關跟具體的實例化對象是...

hss01248 2019-08-26 13:35 評論0 收藏0
手把手教你JQuery插件的寫法和規范

摘要：示例合并和，修改并返回。例如我們插件里面需要有個方法來檢測用戶調用插件時傳入的參數是否符合規范。私有方法，檢測參數是否合法調用調用調用者覆蓋插件暴露的共公方法調用自定義高亮插件本文實例講述了jQuery插件編寫步驟。分享給大家供大家參考，具體如下：如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目里了。至于使用jq...

Alex 2019-08-20 15:19 評論0 收藏0