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