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