[TOP]利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
来源:互联网 发布:网络漫画 编辑:程序博客网 时间:2024/05/16 13:53
利用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);//弹出的将会是100
(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。
- [TOP]利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
- jQuery扩展插件方法 $.extend()和$.fn.extend()
- jQuery插件( jquery.extend 与 jquery.fn.extend的区别)
- JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)
- JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)
- jquery.fn.extend与jquery.extend 区别
- jquery.fn.extend与jquery.extend区别
- Jquery $.fn.extend与 $.extend区别
- [Javascript] JQuery $.extend与$.fn.extend区别
- jQuery扩展插件方法----jQuery.extend() 与 jQuery.fn; 以及插件的连缀调用。
- 理解$.extend(),与$.fn.extend()方法区别
- 理解$.extend(),与$.fn.extend()方法区别
- 理解$.extend(),与$.fn.extend()方法区别
- jq插件的编写中(jquery.extend、jquery.fn与jquery.fn.extend的使用区别)
- jQuery扩展-jquery.fn.extend与jquery.extend
- JQuery $.extend 与$.fn.extend
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- JS以及CSS对页面的阻塞
- ES6中的export以及import的使用多样性
- Js中有关变量声明和函数声明提升的问题
- 阿里前端内推笔试题
- InvalidArgumentError (see above for traceback): logits and labels must be same size:
- [TOP]利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
- [TOP]原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- 牛客网几道编程题(一) 统计字符、反转句子、删除公共字符
- 宏基因组-扩增子分析流程:中文首发,史上最详系,零基础自学
- MyCat简介
- JDBC完全解析
- 改变?烈酒:鸡汤;
- JS常见的六类错误类型
- HDU-2795 Billboard(线段树)