jQuery扩展功能的详细解决方案

在jQuery的API手册,我们看到扩展实际上是安装在jQuery和jquery.fn两种不同的方式,但jquery.extend()和jquery.fn.extend(jQuery)采用相同的代码在jQuery,但它们的功能是完全不同的。看看官方的解释扩展API:

代码如下:

复制代码代码如下所示:

JQuery.extend():合并两个或两个以上的对象的内容纳入(两个或两个以上的物体合并为第一)

JQuery.fn.extend():合并对象的内容到jQuery原型,jQuery对象,并在属性拓展的一个新实例的方法。



我们知道jQuery有静态和实例方法。jquery.extend和jquery.fn.extend之间的第一个区别是将静态方法和扩展实例,使用方法如下:

复制代码代码如下所示:

JQuery.extend({

Sayhello:函数(){

console.log(你好,这是jQuery库);

}

})

美元。sayHello(); / /你好,这是jQuery库

JQuery.fn.extend({

检查:函数(){

返回这个。每个(函数()){

这个,检查=真的;

});

},

取消:函数(){

返回这个。每个(函数()){

这个,检查= false;

});

}

})

$(输入{类型= 'checkbox})(检查); / /所有的复选框被选中



注意两个电话插头,一个是叫美元直接使用,另一个是$()()调用,也jquery.extend接收多个对象作为参数,如果只有一个参数,附加到jQuery对象的属性和方法,如果有一个以上的参数、属性和后面附在第一object.jquery扩展实现源代码的对象:

复制代码代码如下所示:

jquery.extend = jquery.fn.extend =函数(){()

VaR的选项,名字,SRC,复制,copyisarray,克隆,

Target = arguments{0} || {},

我= 1,

长度= arguments.length,

深=假;

深拷贝情况

如果(typeof目标=布尔){

深=目标;

目标=论点{ 1 } | | { };

布尔值和目标跳过

我= 2;

}

如果(typeof = =对象的目标!jquery.isfunction!(目标){

目标{ };

}

如果(长度= i){

目标=此;

——我;

}

为(;;i;<长度;i + +){

如果((选项=参数{ })!= NULL){

基本对象扩展

对于(选项中的名称){

目标= { };

复制=选项{名称};

永不终止循环

如果(目标=复制){

继续;

}

如果(深拷贝(jquery.isplainobject(复印件)| |(copyisarray = jquery.isarray(副本)))){

如果(copyisarray){

copyisarray = false;

钢骨混凝土(SRC)克隆= jquery.isarray SRC:{ };

{人}

钢骨混凝土(SRC)克隆= jquery.isplainobject SRC:{ };

}

{姓名} =目标jquery.extend(深、克隆、复制);

输入未定义的值

否则如果}(副本)!=未定义的){

目标{ } =复制;

}

}

}

}

修改后的对象返回

将目标;

};



一大堆代码,乍一看,很难理解,事实上,大部分的代码是用来实现jquery.extend()与多参数对象,复制的深度,如果去掉这些功能,让延伸扩展的静态方法和实例方法,则代码如下:

复制代码代码如下所示:

jquery.extend = jquery.fn.extend =功能(obj){

/ / obj是一个对象,通过延伸到这

var目标=;

对于(在obj变量名){

名称是一个对象属性。

复制是一个属性值。

obj {姓名}复制=;

防止/调用循环

如果(目标=复制)继续;

防止其他未定义的值

如果(typeof复制= 'undefined'continue);

分配

目标{ } =复制;

}

将目标;

}



下面将对扩展方法进行注释:

复制代码代码如下所示:

jquery.extend = jquery.fn.extend =函数(){()

定义默认参数和变量

对象被划分为扩展对象,对象被扩展。

选项表示扩展对象中的方法。

名称表示扩展对象的方法名。

i是扩展对象参数的开始值。

对浅复制品的深度默认值

VaR的选项,名字,SRC,复制,copyisarray,克隆,

目标=论点{ 0 } | | { },

我= 1,

长度= arguments.length,

深=假;

对接工艺参数

如果(typeof目标=布尔){

深=目标;

目标=论点{ 1 } | | { };

我= 2;

}

如果(typeof = =对象的目标!jquery.isfunction!(目标){

目标{ };

}

如果(长度= i){

目标=此;

——我;

}

从i开始遍历多个参数

为(;;i;<长度;i + +){

仅具有定义的值

如果((选项=参数{ })!= NULL){

启动/扩展对象

对于(选项中的名称){

目标= { };

复制=选项{名称};

防止循环引用

如果(目标=复制){

继续;

}

深度复制/递归处理

如果(深拷贝;(jquery.isplainobject(复印件)| |(copyisarray = jquery.isarray(副本)))){

如果(copyisarray){

copyisarray = false;

钢骨混凝土(SRC)克隆= jquery.isarray SRC:{ };

{人}

钢骨混凝土(SRC)克隆= jquery.isplainobject SRC:{ };

}

{姓名} =目标jquery.extend(深、克隆、复制);

未定义的值未处理

否则如果}(副本)!=未定义的){

将属性或方法添加到目标

目标{ } =复制;

}

}

}

}

返回

将目标;

};



理解jQuery扩展的原理,我相信不再需要担心jQuery插件的编写了。