jQuery插件开发及jQuery.extend函数详解和jQuery.fn与

页面导航:首页 > 网络编程 > JavaScript > jQuery插件开发及jQuery.extend函数详解和jQuery.fn与

jQuery插件开发及jQuery.extend函数详解和jQuery.fn与

来源: 作者: 时间:2016-01-23 10:23 【

一、jQuery插件开发分为两种: 1 类级别:类级别你可以理解为拓展jquery类,最明显的例子是$ ajax( ),相当于静态方法。 开发扩展其方法时使用$ extend方法,即jQuery extend(object); $ extend({
一、jQuery插件开发分为两种:

1.类级别:
类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。

开发扩展其方法时使用$.extend方法,即jQuery.extend(object);

$.extend({
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;}
});

var i = $.add(3,2);
var j = $.minus(3,2);

 

2.对象级别:
对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);

$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});

$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();

 

3.扩展

$.xy = {
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;},
voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(3,2);
var m = $.xy.minus(3,2);
$.xy.voidMethod();

 

二、jQuery.extend 函数详解:

1.jQuery的扩展原型是:
jQuery.extend(target, object1,object2,.. objectN);
它的含义是将object1,object2,...objectN合并到target中,返回值为合并后的target,由此可以看出该方法合并后,
是修改了target的结构的。如果想要得到合并的结果却又不想修改target的结构,可以如下使用:
var newObj= $.extend({},obj1,obj2,obj3...);//也就是将"{}"作为target参数。
如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
那么合并后的结果:
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
2.jQuery的另一个扩展原型是,省略target参数:
$.extend(object);
上述的extend方法原型中的target参数是可以省略的,如果省略了,则该方法就只能有一个object参数,而且是将该object合并到调用extend方法的对象中去,如:
2.1 $.extend(object),该方法就将object合并到jQuery的全局对象中去,举例如下:
$.extend({
hello:function(){alert('hello');}
});
使用方式:$.hello();
这里就将hello()方法合并到jQuery的全局对象中去,相当于jQuery的静态方法;
2.2 $.fn.extend(object),该方法将object合并到jQuery的实例对象中去,举例如下:
$.fn.extend({
hello:function(){alert('hello');}
});
使用方式:$("#test").hello();
2.3常用扩展实例:
$.extend({
home:{}
});
这是在jQuery全局对象中扩展一个home命名空间。
$.extend($.home,{
getAddress:function(){alert('广东省广州市海珠区');}
});
这是将hello方法扩展到之前扩展的jQuery的home命名空间中去。
3.jQuery的extend方法还有一个重载原型:
$.extend(boolean,target,obj1,obj2,obj3,...);
第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:
var result = $.extend(true,{},
{name:"John",location:{city:"Boston",country:"USA"}},
{sex:"male",location:{province"GuangDong",country:"China"}}
);
则合并后的结果为:
result = {name:"John",sex:"male",location:{city:"Boston",province:"GuangDong",country:"China"}};
也就是说它会将object中的嵌套子对象也会进行合并,而如果第一个参数boolean为false,则合并后的结果为:
result = {name:"John",sex:"male",location:{province"GuangDong",country:"China"}};


三、jQuery.fn和jQuery.prototype详解:
来看下jQuery的(jquery-1.7.js)是怎么样定义的:
(function( window, undefined ) {
   
    var jQuery = (function() {
       // 构建jQuery对象
       var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }
   
       // jQuery对象原型
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {
              // something to do
           }
       };
   
       // Give the init function the jQuery prototype for later instantiation
       jQuery.fn.init.prototype = jQuery.fn;
   
       // 合并内容到第一个参数中,后续大部分功能都通过该函数扩展
       // 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数
       jQuery.extend = jQuery.fn.extend = function() {};
      
       // 在jQuery上扩展静态方法
       jQuery.extend({
           // something to do
       });
 
        // 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展
       return jQuery;
   
    })();
   
    window.jQuery = window.$ = jQuery;
})(window);
这里我们可以看到:
var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }

那么jQuery.fn.init()返回的又是什么呢?
jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function( selector, context, rootjQuery ) {
              // something to do
           }
       };

就是从这里来的,返回的是一个javascript对象。

这里有个问题。

 

jQuery.fn = jQuery.prototype

 


那么就是 将jQuery 的原型对象赋值给了 jQuery.fn。

再看下面:

 

jQuery.fn.init.prototype = jQuery.fn;

 


看到这里可知将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype.原型是{},为了可以去调用init外面的方法,就做了这个处理,将jQuery.fn 赋值给jQuery.fn.init.prototype.这样的话,jQuery.fn.init.prototype的原型也就是jQuery的原型对象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

那么就有这样的一个关系:

 

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype

 

 

赋值了以后,在调用的时候,当init中没有方法的时候,就会去原型函数中调用,那么应该明白它们的区别了吧

jQuery.extend(); jQuery.fn.extend();

 

jQuery.extend()是直接扩展jQuery.而jQuery.fn.extend()很明显是扩展原型。这就是为什么jQuery.fn.extend()中的大部分方法来自己于jQuery.extend()。

 

 

补充知识:

js函数前面的加号,叹号,如:+function(){}();

这里的加号,也可以替换成!,~等其他一元操作符,其效果相当于:

(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());

如果没有这个加号的话,解析器会认为function是一个函数声明的开始,函数声明前置处理后,后面则剩一个()将会导致语法错误。在function前面加上+号时,就变成了一个函数表达式,函数表达式不会进行前置处理,则其后面又添加了一个()就变成了一个立即执行的函数了。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<