JS 擴展方法


jquery插件的開發包括兩種:一種是類級別的插件開發,即給jquery添加新的全局函數,相當於給jquery類本身添加方法。

jquery的全局函數就是屬於jquery命名空間的函數,另一種是對象級別的插件開發,即給jQuery對象添加方法。
也可以理解為另外兩種方式,一種是jQuery本身的擴展方法,另一種是jQuery所選對象的擴展方法。
1.jQuery.extend(Object);   // jQuery 本身的擴展方法 
2.jQuery.fn.extent(Object);    // jQuery 所選對象擴展方法
下面就兩種函數的開發做詳細的說明。
 
1、類級別的插件開發
類級別的插件開發最直接的理解就是給jQuery類添加類方法,
可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數,將函數定義於jQuery的命名空間中。
關於類級別的插件開發可以采用如下幾種形式進行擴展:
1.1 添加一個新的全局函數
[javascript] 
$.foo = function(){  
            alert("foo");  
        }  
        //調用方法   
        $.foo();  
1.2 使用jQuery.extend(object);
[javascript] 
$.extend({  
            foo:function(){  
                alert("foo");  
            },  
            bar:function(){  
                alert("bar");  
            }  
        })  
        //調用方法   
        $.foo();  
        $.bar();  
1.3 使用命名空間
[javascript] 
$.myPlugin = {  
            foo:function(){  
                alert("foo");  
            },  
            bar:function(){  
                alert("bar");  
            }  
        }  
        //調用方法  
        $.myPlugin.foo();  
        $.myPlugin.bar();   
 
2、對象級別的插件開發
[javascript] 
$.fn.foo = function(){  
            alert("hello jquery");  
        }  
        $('#myF').foo()  
[javascript] 
(function($){     
            $.fn.extend({     
                pluginName:function(opt,callback){     
                    alert("foo");     
                }     
            })     
        })(jQuery);    
        $("#myF").pluginName();  
[javascript]  
(function (jq) {   
            jq.fn.foo = function (obj) {   
                alert(obj);  
            };   
        })(jQuery)   
        $("#myF").foo("hello jquery");  
 
 

 擴展ajax

    

$(function () {
//備份jquery的ajax方法
var _ajax = $.ajax;
//重寫jquery的ajax方法
$.ajax = function (opt) {
//備份opt中error和success方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (data, textStatus) { }
}
if (opt.error) {
fn.error = opt.error;
}
if (opt.success) {
fn.success = opt.success;
}

//擴展增強處理
var _opt = $.extend(opt, { // 對opt 進行擴展 這樣 新的success 會覆蓋opt的success的方法
success: function (data, textStatus) {
//成功回調方法增強處理  所有的ajax 都會執行到這里,如果有需要過濾ajax 的在下面做操作。 操作之后再執行ajax 本身的sucess 方法

fn.success(data, textStatus);
}
catch (e) {
}
}
});
_ajax(_opt);
};
})


免責聲明!

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



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