我们来填上次$.extend基础用法挖的坑,来逐行分析一下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;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
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 ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
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 : {};
}
// Never move original objects, clone them
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 = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法。
一:初始化变量过程:
var //每一个变量具体代表什么,我们往下分析就会得到结果。
options,
name,
src,
copy,
copyIsArray,
clone,
target = arguments[0] {}, // Return the modified object 返回的最后修改的对象
//这里初始化为第一个参数,如果没有就是空对象 (但这都是在多于一个参数且第一个参数不是boolean类型的情况,后面马上会说明)
i = 1, //这里是表示传入参数访问的下标
length = arguments.length, //参数的长度
deep = false; //是否深度复制
---------------------------------------------华丽的分割线---------------------------------------
二:初步判断参数过程:
这里是分三个简单的小判断:
(1)判断target是否是boolean,也就是判断第一个参数传入的是否布尔类型。
// Handle a deep copy situation 操作深度复制的情况
if ( typeof target === "boolean" ) { //如果这里的target类型是boolean
deep = target; //这里就让深度复制的flag等于target
target = arguments[1] {}; //这里让target接收第二个传入的参数。
// skip the boolean and the target
i = 2; //跳过布尔值和目标 (通过调整下标)
}
测试结果:
console.log( $.extend(true,{name:1}) ); //jQuery对象
/*
function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}
*/
console.log( $.extend(true,{name:1},{name:2,age:18}) ); //Object {name: 2, age: 18}
问:这里为什么在传两个参数的时候,target返回的是jQuery对象呢?
答:因为这里满足了下面要说的第三个小判断,别着急,继续看下去。
(2)控制当target不是object或者function的情况。
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {}; //不是object或function类型的时候,让target为空{}。
}
(3)当参数列表长度等于i的时候,扩展jQuery对象自身。
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i; //这里--i是控制下标溢出的,因为i初始化是1,如果穿一个参数下标就会超出长度,如果第一个参数是boolean类型,这样传两个参数,同样也会溢出,具体原因可以去看第(1)个小判断。
}
测试结果:
$.extend({
b:1,
a:function(){
alert(1);
}
});
console.log($.b); //1 (注释掉--i) undefined
$.a(); //alert(1); (注释掉--i) Uncaught TypeError: $.a is not a function
-------------------------------------晕晕的分割线-----------------------------------------------
三:遍历参数列表给target赋值的阶段。
for ( ; i < length; i++ ) {
//这里是循环的执行体
}
在研究内部逻辑之前,首先我们先看一下for循环下i的问题:
这个i在这次的分析中,是一个还没有解决的问题,看下图:
这里会多了一次循环,目前在源码里我没有找到是什么原因出现的,而且后面多遍历出了jQuery中的offsetSupport和support对象,感兴趣的同学可以深入研究一下,也欢迎大神们留评论指导(^__^)。
内部逻辑:
(1)浅层复制:
下边这段代码是深层复制的条件判定,我们先跳过,过一会再讨论,我们现在需要关注的是else if中的内容:
if ( deep && copy && ( jQuery.isPlainObject(copy) (copyIsArray = jQuery.isArray(copy)) ) ) {
// deep必须指定为真,copy在循环中不为undefined的情况,copy必须是new出的Object或者{}格式,或者copy是一个数组,用变量copyIsArray 来接收copy是不是数组 存储的是boolean
来看else if部分的代码(很简单的一句):
else if ( copy !== undefined ) {
target[ name ] = copy;
//这里用到了name和copy两个我们还没有赋值的变量,而看这个形式obj[name] = value 你想到了什么?
}
接下来我们来向上找,name和copy所对应的key和value在哪里:
if ( (options = arguments[ i ]) != null ) {
//循环中arguments[i]赋值给options变量 而且要求这个值不能为null
// Extend the base object
for ( name in options ) { //这里for in循环遍历每一个options
src = target[ name ]; //src存改变之前target对象上每一个key对应的value
copy = options[ name ]; //copy存传入对象上每一个key对应的value
这里不是很好理解,单独写一个例子便于理解:
比如我们这样调用:$.extend({},{name:1},{name:2,age:18});
参数列表中的每一项,分别是{} 、{name:1} 、{name:2,age:18}
这个时候由于i初始化是1 所以options是访问不到{},而同时的状态下target指向的是{}。
下标0的元素不会访问到的demo:
function rep(){
var name,
options,
copy,
len = arguments.length,
i = 1;
for(; i<len; i++){
if( (options = arguments[i]) != null ){
alert(1);
}
}
}
rep({}); //这个时候不会alert
rep({},{}); //这时才会
一个简单抽离出来的浅层复制代码实现:
function rep(){
var name,
options,
copy,
len = arguments.length,
i = 1,
target = arguments[0],
src,
copy;
for(; i<len; i++){
if( (options = arguments[i]) != null ){
for(name in options){
src = target[name];
copy = options[name];
console.log(src); //undefined undefined 18 undefined
console.log(copy);//1 18 '16' Object {eat: "eat", run: "run"}
//这个结果就很明显的说明了 name、src、copy都指的是什么了。
//最后扩展的过程就是把copy上获取到的不为undefined的值,复制到 target的同一个key上。(同key会覆盖)
if(copy !== undefined){
target[name] = copy;
}
}
}
}
return target;
}
var res = rep({},{name:1,age:18},{age:'16',params:{eat:'eat',run:'run'}});
console.log(res); //Object {name: 1, age: "16", params: Object} 也就意味着把第二个之后的参数对象内容都扩展到第一个空{}上了。
(2)深层复制:
第一句判断,前边注释过,就不多说了,直接看内部的逻辑:
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) { //这里是copy是数组的情况
copyIsArray = false; //先从新指定为false,要不然下次循环判定就会出问题
clone = src && jQuery.isArray(src) ? src : [];
//如果src存在且是数组的话就让clone副本等于src否则等于空数组。
} else { //copy是对象的情况
clone = src && jQuery.isPlainObject(src) ? src : {};
//同数组的操作
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
//这里用递归的形式在走一次entend方法,来判断经过一次复制之后,是否还存在数组或对象形式的copy,如果有则再次走这个if分支,没有则走上面浅层复制的分支。
}
测试代码:
//这里在fon in 循环中加了两条console用来帮助我们查看结果。
console.log('src:'+JSON.stringify(src));
console.log('copy:'+JSON.stringify(copy));
//这里是调用的测试代码部分:
var res = $.extend(
true,
{
params:{
add:'no'
}
},
{
name:1,
params:{
add:'add',
remove:'remove'
}
}
);
console.log(res);
测试结果截图:
数组的格式同理,这里就不再进行测试了,到这里$.extend源码的解析基本就结束了。
最后来总结一下我们刚开始抛出的每一个变量含义的问题:
下次会更新$.extend的最终章,偏向于应用,会简单的实现一个$.extend扩展组件,敬请期待,( ^_^ )/~~拜拜喽!
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123