jQuery.fn.extend與jQuery.extend到底區別在哪?


聲明:此文是寫給剛接觸的人或者是對這一方法概念比較模糊的人。若是您jQuery基礎很好,此文就不值得你浪費時間了。

還是先吐個槽,網上都都是轉載抄襲,基本上就那么一兩篇文章,說的還不清楚....

正文:

其實說白了,從兩個方法本身就能看出來端倪。

我們先把jQuery看成了一個類,這樣好理解一些。

jQuery.extend(),是擴展的jQuery這個類。

假設我們把jQuery這個類看成是人類,能吃飯能喝水能跑能跳,現在我們用jQuery.extend這個方法給這個類拓展一個能唱歌的技能。這樣的話,不論是男人,女人,xx人.....等能繼承這個技能(方法)了。

我們這樣寫:

jQuery.extend({
    liu: function(){
        alert('liu');
    }
});

 然后:$.liu();這樣就能打印出來”liu“這個字符串

測試代碼如下:

<!doctype html>
<html lang="zh-cmn-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    ;(function($) {
        $.extend({
            liu: function(){
             alert('liu');
        }
    });
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $.liu();
    });

    </script>
</head>
<body></body>
</html>

 

 這說明啥啊,這說明.liu()變成了jQuery這個類本身的方法(object)嘛。他現在能”唱歌“了。

但是吧,這個能力啊,只有代表全人類的 jQuery 這個類本身,才能用啊。你個人想用,你張三李四王五麻六,你個小草民能代表全人類嘛?

所以啊,這個擴展也就是所謂的靜態方法。只跟這個 類 本身有關。跟你具體的實例化對象是沒關系滴。

我們再看看jQuery.fn.extend()這個方法。

從字面理解嘛,這個拓展的是jQuery.fn的方法。

jQuery.fn是啥玩意呢?

源碼里是這么寫的:

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

 

哦,原來jQuery.fn=jQuery.prototype,就是原型啊。

那就一目了然了,jQuery.fn.extend拓展的是jQuery對象(原型的)的方法啊!

對象是啥?就是類的實例化嘛,例如

$("#abc") 

 這個玩意就是一個實例化的jQuery對象嘛。

那就是說,jQuery.fn.extend拓展的方法,你得用在jQuery對象上面才行啊!他得是張三李四王五痳六這些實例化的對象才能用啊。

說白了就是得這么用(假設xyz()是拓展的方法):

$('selector').xyz();

 你要是這么用$.xyz();是會出錯誤滴。

例子源碼如下:

<!doctype html>
<html lang="zh-cmn-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    ;(function($) {
        $.fn.extend({
            liu: function(){
             alert('liu');
         }
    });
    })(jQuery);
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('div').liu();
    });

    </script>
</head>
<body>
    <div></div>
</body>
</html>

 

 和上邊的區別區別一目了然吧?

其實吧,jQuery.extend()這個方法,主要是用來拓展個全局函數啦,例如$.ajax()這種,要不就是拓展個選擇器啦,例如$.fn.each(),當選擇器用。

大部分插件都是用jQuery.fn.extend()。

差不多就這樣吧,這是我的個人理解,若是各位看客有更佳的看法,歡迎提出來。

 

本文地址:http://www.cnblogs.com/liu-l/p/3928373.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM