新浦京81707con > 软件下载 > 【奥门新浦京8867】jQuery中extend函数详解,的简单

原标题:【奥门新浦京8867】jQuery中extend函数详解,的简单

浏览次数:128 时间:2019-09-13

复制代码 代码如下:

在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 = 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;
    }

复制代码 代码如下:

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

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实例方法)

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

大家领略,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的率先个分别就是贰个用来扩展静态方法,叁个用来扩展实例方法。用法如下:

    for ( ; i < length; i ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

复制代码 代码如下:

本文由新浦京81707con发布于软件下载,转载请注明出处:【奥门新浦京8867】jQuery中extend函数详解,的简单

关键词: 新浦京81707con

上一篇:【澳门新莆京】Jquery下判断Id是否存在的代码,

下一篇:没有了