jQuery自訂函數應用程式以及解析

這次帶給大家jQuery自訂函數應用程式以及解析，使用jQuery自訂函數的注意事項有哪些，下面就是實戰案例，一起來看一下。

jQuery自訂函數
1.  如何擴充jQuery函數？
jQuery有兩種自訂函數擴充：一種是類別層級的函數開發，相當於將jQuery看做一個類，給類別本身擴充函數，也叫作全域函數，。 jQuery的全域函數是屬於jQuery命名空間的函數，另一種是物件層級的函數開發，也就是為jQuery選擇器產生的物件新增方法。下面就兩種函數的開發做詳細的說明。

1).全域函數開發：
類別層級的外掛程式開發最直接的理解就是為jQuery類別加入類別方法，可以理解為新增靜態方法。典型的例子就是jQuery.AJAX()這個函數，將函數定義在jQuery的命名空間中。關於類別層級的外掛程式開發可以採用以下幾種形式進行擴充：
a. 新增一個新的全域函數
新增一個全域函數，我們只需如下定義：

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

      然後透過調用$.test();即可運作。
b. 增加多個全域函數
新增多個全域函數，可採用如下定義：

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

呼叫方式跟上面一樣。

c. 使用jQuery.extend(object)　

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2).物件層級函數開發：
物件層級的函數開發可以有以下兩種方式
a.  

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

說明：該方式也可以直接用jQuery.fn.extend定義，這樣寫是為了將美元符號限制在一個命名空間內，定義過程中可以繼續使用該符號，防止與其他庫的$符號衝突，沒有其他作用。

b. 接受options參數以控制插件的行為
當自訂函數需要傳遞很多參數的時候，參數過多，可讀性較差，我們可以考慮傳遞一個對象，比方說，我們要定義一個為p設定背景色和文字顏色的函數，可以這樣寫：

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

呼叫函數測試程式碼：

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

我們會看到table背景紅色，字體都是藍色。

2.  分析總結
jQuery的API手冊中，我們看到，extend其實是掛載在jQuery和jQuery.fn上的兩個不同方法，儘管在jQuery內部jQuery .extend()和jQuery.fn.extend()是用相同的程式碼實現的，但是它們的功能卻不太一樣。官方的解釋:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的

jQuery實例方法)
可以看出，jQuery有靜態方法和實例方法之分, 那麼jQuery.extend()和jQuery.fn.extend()的差別就是一個用來擴充靜態方法，一個用來擴充實例方法。
jQuery自訂部分原始碼如下：

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是传递过来扩展到this上的对象 
             var target=this; 
             for (var name in obj){ 
             //name为对象属性 
             //copy为属性值 
             copy=obj[name]; 
             //防止循环调用 
             if(target === copy) continue; 
             //防止附加未定义值 
             if(typeof copy === ‘undefined’) continue; 
             //赋值 
             target[name]=copy; 
             } 
             return target; 
            }

JavaScript方法也是對象，所以所謂的擴充函數，也即是給jQuery.extend, jQuery.fn.extend這兩個物件擴充新的屬性，形參就是我們自訂的函數，最後會被拷貝成為target物件返回，並合併到jQuery.extend對象，或者jQuery.fn.extend物件中，本質上就是相當於給jQuery類別本身增加方法或者給jQuery物件的prototype物件增加方法。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用jquery的分頁外掛

怎麼做出京東商品詳情的放大鏡效果

javascript如何實現小球跳動效果

#

以上是jQuery自訂函數應用程式以及解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！