jQuery中extend函数详解

作者: 计算机网络技术  发布:2019-09-06

在jQuery的API手册中,我们看看,extend实际上是挂载在jQuery和jQuery.fn上的多少个区别方法,纵然在jQuery内部jQuery.extend()和jQuery.fn.extend()是用一样的代码实现的,不过它们的成效却不太一样。来看一下 官方API对extend 的演讲:

jQuery中extend函数详解,jquery函数详解

在jQuery的API手册中,大家看看,extend实际上是挂载在jQuery和jQuery.fn上的三个区别方法,就算在jQuery内部jQuery.extend()和jQuery.fn.extend()是用一样的代码完结的,不过它们的法力却不太同样。来看一下 官方API对extend 的表达:

代码如下:

复制代码 代码如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把七个也许越来越多的靶子合併到第二个中等)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把指标挂载到jQuery的prototype属性,来扩展学一年级个新的jQuery实例方法)

咱俩明白,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的首先个区别便是五个用来扩张静态方法,二个用来扩大实例方法。用法如下:

复制代码 代码如下:

jQuery.extend({
sayhello: function (){
console.log( "Hello,This is jQuery Library" );
}
})
$.sayhello(); //Hello, This is jQuery Library
jQuery.fn.extend({
check: function () {
return this .each( function () {
this .checked = true ;
});
},
uncheck: function () {
return this .each( function () {
this .checked = false ;
});
}
})
$( "input[type='checkbox']" ).check(); //全部的checkbox都会被选拔

瞩目二种调用插件的措施,一种是直接用$调用,另外一种是用$()调用,别的jQuery.extend()接收多少个目的作为参数,假使唯有一个参数,则把这么些目的的天性方法附加到jQuery上,假使带有五个参数,则把前边的靶子的质量和措施附加到第一个指标上。jQuery extend的完毕源码:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function () {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false ;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this ;
--i;
}
for ( ; i < length; i++ ) {
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue ;
}
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false ;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};

非常大学一年级堆代码,乍看起来麻烦精晓,其实代码的绝大多数都以用来促成jQuery.extend()中有三个参数时的目的合併,深度拷贝难点,若是去掉那一个职能,让extend唯有扩充静态和实例方法的机能,那么代码如下:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function (obj){
//obj是传递过来扩大到this上的指标
var target= this ;
for ( var name in obj){
//name为对象属性
//copy为属性值
copy=obj[name];
//防止循环调用
if (target === copy) continue ;
//幸免附加未定义值
if ( typeof copy === 'undefined' ) continue ;
//赋值
target[name]=copy;
}
return target;
}

上面再来对extend方法开展注明解释:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function () {
// 定义私下认可参数和变量
// 对象分为扩张对象和被扩张的靶子
//options 代表扩展的指标中的方法
//name 代表扩大对象的不二秘技名
//i 为扩展对象参数起首值
//deep 默以为浅复制
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false ;
//对接下来的参数进行管理
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this ;
--i;
}
//对从i起初的多少个参数举办遍历
for ( ; i < length; i++ ) {
// 只管理有定义的值
if ( (options = arguments[ i ]) != null ) {
// 举办增加对象
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// 幸免循环引用
if ( target === copy ) {
continue ;
}
// 递归管理深拷贝
if ( deep && copy &&; ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false ;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// 不管理未定义值
} else if ( copy !== undefined ) {
//给target扩大属性或方法
target[ name ] = copy;
}
}
}
}
//返回
return target;
};

弄懂了jQuery扩张的法则,相信之后再也不用为编写jQuery插件而干扰了。

在jQuery的API手册中,大家见到,extend实际上是挂载在jQuery和jQuery.fn上的多少个不等措施,纵然在jQuery内部...

代码如下:

复制代码 代码如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把八个恐怕更多的对象合并到第贰当中等)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把目的挂载到jQuery的prototype属性,来扩大三个新的jQuery实例方法)

笔者们明白,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的率先个界别正是二个用来扩白一骢态方法,七个用来扩大实例方法。用法如下:

复制代码 代码如下:

jQuery.extend({
sayhello: function (){
console.log( "Hello,This is jQuery Library" );
}
})
$.sayhello(); //Hello, This is jQuery Library
jQuery.fn.extend({
check: function () {
return this .each( function () {
this .checked = true ;
});
},
uncheck: function () {
return this .each( function () {
this .checked = false ;
});
}
})
$( "input[type='checkbox']" ).check(); //全部的checkbox都会被增选

只顾二种调用插件的主意,一种是直接用$调用,别的一种是用$()调用,其他jQuery.extend()接收七个对象作为参数,假诺独有二个参数,则把那个目的的属性方法附加到jQuery上,借使带有三个参数,则把前面包车型客车指标的性质和办法附加到第三个对象上。jQuery extend的贯彻源码:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function () {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false ;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this ;
--i;
}
for ( ; i < length; i++ ) {
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue ;
}
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false ;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};

非常大学一年级堆代码,乍看起来麻烦精晓,其实代码的非常多都以用来达成jQuery.extend()中有几个参数时的对象合并,深度拷贝难点,假诺去掉那几个效能,让extend独有增加静态和实例方法的效用,那么代码如下:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function (obj){
//obj是传递过来扩大到this上的靶子
var target= this ;
for ( var name in obj){
//name为对象属性
//copy为属性值
copy=obj[name];
//幸免循环调用
if (target === copy) continue ;
//幸免附加未定义值
if ( typeof copy === 'undefined' ) continue ;
//赋值
target[name]=copy;
}
return target;
}

上边再来对extend方法开展批注解释:

复制代码 代码如下:

jQuery.extend = jQuery.fn.extend = function () {
// 定义默许参数和变量
// 对象分为扩展对象和被扩展的对象
//options 代表增加的对象中的方法
//name 代表增添对象的法门名
//i 为扩张对象参数最早值
//deep 默以为浅复制
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false ;
//对接下来的参数实行拍卖
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this ;
--i;
}
//对从i开端的多个参数进行遍历
for ( ; i < length; i++ ) {
// 只管理有定义的值
if ( (options = arguments[ i ]) != null ) {
// 举办扩大对象
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// 幸免循环援引
if ( target === copy ) {
continue ;
}
// 递归管理深拷贝
if ( deep && copy &&; ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false ;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[ name ] = jQuery.extend( deep, clone, copy );
// 不管理未定义值
} else if ( copy !== undefined ) {
//给target扩充质量或格局
target[ name ] = copy;
}
}
}
}
//返回
return target;
};

弄懂了jQuery扩大的原理,相信以后再也不用为编写jQuery插件而相当的慢了。

您或许感兴趣的作品:

  • 一成不变JQuery.extend函数扩展自个儿指标的js代码
  • jQuery中extend函数的贯彻原理详解
  • Jquery实现$.fn.extend和$.extend函数
  • jQuery中extend函数详解
  • 原生js达成复制对象、扩张对象 类似jquery中的extend()方法
  • jQuery.extend()、jQuery.fn.extend()扩张方法亲自去做详解
  • Jquery中扩大方法extend使用手艺
  • jQuery插件增加extend的轻松达成原理
  • 浅谈jQuery中的$.extend方法来扩展JSON对象
  • jQuery中extend函数简单用法示例

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:jQuery中extend函数详解

关键词:

上一篇:JS数组的宽泛用法实例,js数组实例
下一篇:没有了