JQuery插件之$.fn

muzhuyu 發(fā)布于2019-08-26 13:34 / 2024人閱讀

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

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的原型中綁定新的方法，所以根據(jù)原型的特性，新創(chuàng)建的jQuery對象自然會擁有新綁定的方法。

初識插件

目的：改變a標簽的字體顏色
做法：創(chuàng)建名為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");
        //在結(jié)尾處返回this
        return this;
    }
});
$(function () {
    $("a").greenify().addClass("greenified");
});

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

$的別名保護

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

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

}( jQuery ));

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

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

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

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

;分號的使用

通常在編寫插件時，會在在立即執(zhí)行函數(shù)前加入一個分號

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

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

undefined解決兼容性問題

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

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

 var undefined = 99;
 alert(undefined);

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

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

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

反例

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

使用參數(shù)選項

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



    Title
    



JavaScript
Jquery

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

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

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

簡單解釋立即執(zhí)行函數(shù)（IIFE）

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

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

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

云服務(wù)器 GPU云服務(wù)器 jquery插件源碼jquery jquery插件手寫jQuery插件 jquery表單插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109073.html

發(fā)表評論

登陸后可評論

0條評論

muzhuyu

男|高級講師

我要關(guān)注我要私信

TA的文章

華為機試HJ77：火車進站

閱讀 2661·2021-09-23 11:21
主機記錄是什么-什么是主機記錄和指針記錄？

閱讀 1923·2021-09-22 15:15
Totyun：香港VPS/日本VPS全場5折優(yōu)惠;2核2G內(nèi)存,10Mbps不限流量,$6/月起

閱讀 1014·2021-09-10 11:27
老板讓我十分鐘上手nx-admin

閱讀 3471·2019-08-30 15:54
css盒子模型

閱讀 690·2019-08-30 15:52
蘋果官網(wǎng)上展示的分辨率是物理像素嗎？

閱讀 1364·2019-08-30 15:44
小丸子成長記---在stylus下用DIV+CSS一步一步打造小丸子

閱讀 2380·2019-08-29 15:06
可想造一個屬于你自己的jQuery庫?(二)

閱讀 3007·2019-08-28 18:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JQuery插件之$.fn

相關(guān)文章

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

jQuery入門筆記之（七）插件

**理解jquery的$.extend**

jQuery擴展

**手把手教你JQuery插件的寫法和規(guī)范**

發(fā)表評論

0條評論

muzhuyu

男|高級講師

TA的文章

華為機試HJ77：火車進站

主機記錄是什么-什么是主機記錄和指針記錄？

Totyun：香港VPS/日本VPS全場5折優(yōu)惠;2核2G內(nèi)存,10Mbps不限流量,$6/月起

老板讓我十分鐘上手nx-admin

css盒子模型

蘋果官網(wǎng)上展示的分辨率是物理像素嗎？

小丸子成長記---在stylus下用DIV+CSS一步一步打造小丸子

可想造一個屬于你自己的jQuery庫?(二)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JQuery插件之$.fn

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！