利用jQuery对插件进行扩展时,方法$.extend、$.fn.extend区别与联系


利用JQ开发插件的方法:

1、jQuery.extend();

2、jQuery.fn.extend();

3、通过$.widget()应用jQuery UI的部件工厂方式创建。

由于第三种方式通常用于开发比较高级的jQuery的部件,开发难度较大,所以第一种和第二种方式用的更为广泛,下面主要对前两种方式的区别和联系以及使用的方法做一些介绍。

简要的说明一下:jQuery是一个封装的非常好的类,$(“#btn”)就相当于创建了一个jQuery的实例。

1、方法jQuery.fn .extend()= jQuery.prototype.extend(),也就是说利用方法二扩展插件相当于对jQuery的原型进行扩展,每个实例化的对象都可以直接调用扩展的方法。如:

$.fn.extend({

Init:function(){

自己写的代码

}

})

通过$(“#btn”)实例化后就可以直接调用init方法,$(“#btn”).init().

2、通过方法1j传入一个参数时,进行插件的开发相当于对jQuery的静态方法进行了扩展,扩展的方法需要通过类来调用,如:$.extend({

Init:function(){};

} )

Init方法只能通过$.init()调用,因为它是静态的方法不能通过实例调用。

3、当方法一中传入了多个的参数时,可以通过$.extend()方法对对象进行扩展即用一个或多个其他对象来扩展一个对象,返回被扩展的对象Objectj Query.extend( target, object1,[objectN])

如:var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);

结果:settings == { validate: true, limit: 5, name: "bar" }通过结果可以知道,当后面对象与前面对象中具有同名的参数时前面的参数会被后面的参数给覆盖,没有的就合并。

但是这其中会有深度拷贝和浅拷贝的问题:

当方法中传入的第一个参数不为true时表示当前的拷贝为浅拷贝:

var a={};

var b={name:{age:19}};

$.extend(a,b)

a.name.age=100;

alert(b.name.age);//弹出的将会是100

1)浅拷贝时如果对象b中具有对象,然后将b拷贝给a,且后面a对其作了修改则b对象中的对象也会改变,但是引用类型的将不会被修改。如:

var a={};

var b={age:19,name:{height:100}};

$.extend(a,b)

a.age=100;

alert(b.age);//弹出的将会是19

(2)如果进行深拷贝则直接给方法1传入参数true就好,不管a 作何修改b对象的值都不会发生变化。

var a={};

var b={name:{age:19}};

$.extend(true,a,b)

a.name.age=100;

alert(b.name.age);//弹出的将会是19

4、为了避免和其他的js包发生冲突,同时避免$符号被重写,通常在扩展插件时会定义一个匿名的带有$为参数的函数来进行插件扩展。(function( $ ){

$.fn.tooltip = function( options ) {

};

})( jQuery );

//等价于

(function( $ ){

var tooltip = {

function(options){

}

};

$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip

})( jQuery );

直接定义一个匿名的函数并且调用同时传递参数jQuery,因而在后面的使用时$就代表的是jQuery。

优质内容筛选与推荐>>
1、HPUX 大文件系统扩容
2、jx9脚本引擎BUG修复
3、math对象和date对象
4、排序算法_选择排序
5、苹果浏览器样式重置submit


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号