对Jquery也有了个初步的了解
对其源码的学习是源于$.extend方法的运用上
先看Jquery.extend的方法
jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, a = 1, al = arguments.length, deep = false;
// Handle a deep copy situation
if ( target.constructor == Boolean ) {
deep = target;
target = arguments[1] || {};
}
// extend jQuery itself if only one argument is passed
if ( al == 1 ) {
target = this;
a = 0;
}
var prop;
for ( ; a < al; a++ )
// Only deal with non-null/undefined values
if ( (prop = arguments[a]) != null )
// Extend the base object
for ( var i in prop ) {
// Prevent never-ending loop
if ( target == prop[i] )
continue;
// Recurse if we're merging object values
if ( deep && typeof prop[i] == 'object' && target[i] )
jQuery.extend( target[i], prop[i] );
// Don't bring in undefined values
else if ( prop[i] != undefined )
target[i] = prop[i];
}
// Return the modified object
return target;
};
下面说说怎么样运用该方法
1.方式一, 最基本的方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.extend() Example</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript"
src="../scripts/support.labs.js"></script>
<script type="text/javascript">
var target = { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
$(function(){
$('#targetBeforeDisplay').html($.toSource(target));
$('#source1Display').html($.toSource(source1));
$('#source2Display').html($.toSource(source2));
$.extend(target,source1);
$('#targetAfterDisplay').html($.toSource(target));
});
</script>
<style>
label { float: left; width: 108px; text-align: right; }
p { clear: both; }
label + span { margin-left: 6px; }
fieldset { width: 360px }
</style>
</head>
<body>
<h1>$.extend() Example</h1>
<fieldset>
<legend>$.extend() Example</legend>
<p>
<label>target (before) =</label>
<span id="targetBeforeDisplay"></span>
</p>
<p>
<label>source1 =</label>
<span id="source1Display"></span>
</p>
<p>
<label>source2 =</label>
<span id="source2Display"></span>
</p>
<p>
<label>target (after) =</label>
<span id="targetAfterDisplay"></span>
</p>
</fieldset>
</body>
</html>
输出
引用
target (before) = {a:1,b:2,c:3}
source1 = {c:4,d:5,e:6}
source2 = {e:7,f:8,g:9}
target (after) = {a:1,b:2,c:4,d:5,e:6}
第二种方式
只改了核心执行部分
<script type="text/javascript">
var target = { a: 1, b: 2, c: 3, location: { city: 'Boston'} };
var source1 = { c: 4, location: { state: 'MA'}, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$(function(){
$('#targetBeforeDisplay').html($.toSource(target));
$('#source1Display').html($.toSource(source1));
$('#source2Display').html($.toSource(source2));
//$.extend(target,source1);
$.extend(true, target, source1);
$('#targetAfterDisplay').html($.toSource(target));
});
</script>
输出
引用
target (before) = {a:1,b:2,c:3,location:{city:'Boston'}}
source1 = {c:4,location:{state:'MA'},d:5,e:6}
source2 = {e:7,f:8,g:9}
target (after) = {a:1,b:2,c:4,location:{city:'Boston',state:'MA'},d:5,e:6}
我们开始分析源代码
首先
引用
// copy reference to target object
var target = arguments[0] || {}, a = 1, al = arguments.length, deep = false;
设置target的值,如果一个参数有值,就为第一个参数值,否则设置一个空的对象
设置变量a,a1值,deep定义为false默认不是深度copy
引用
// Handle a deep copy situation
if ( target.constructor == Boolean ) {
deep = target;
target = arguments[1] || {};
}
处理深度copy情形,如果第一个参数值的构造子为Boolean对象,即设置deep值和改变target值为第二个参数
引用
// extend jQuery itself if only one argument is passed
if ( al == 1 ) {
target = this;
a = 0;
}
如果仅为一个参数的情形,target设置为自己,设置a=0;
引用
var prop;
for ( ; a < al; a++ )
// Only deal with non-null/undefined values
if ( (prop = arguments[a]) != null )
// Extend the base object
for ( var i in prop ) {
// Prevent never-ending loop
if ( target == prop[i] )
continue;
// Recurse if we're merging object values
if ( deep && typeof prop[i] == 'object' && target[i] )
jQuery.extend( target[i], prop[i] );
// Don't bring in undefined values
else if ( prop[i] != undefined )
target[i] = prop[i];
}
如果参数只有一个,那么从第一个参数开始,否则默认从第二个参数开始
先将参数的值付给prop对象
在迭代每个临时prop
对应参试为{a:1,b:3}形式的 for in 操作
i取值为key-value的key值
如果target的值(原始值)和参试中迭代的值有相等的时,继续执行循环跳出本次循环
// Recurse if we're merging object values
if ( deep && typeof prop[i] == 'object' && target[i] )
jQuery.extend( target[i], prop[i] );
如果为深度copy 并且第I个对象的值为“object”类型 并且 target对象的第I个值为真
那么就继续深度COPY,让其prop[i]的值继续copy到target[i]中(这里只支持两层)
else if ( prop[i] != undefined )
target[i] = prop[i];
继续看就是,非深度COPY的情形。赋值到即可
//-----------------------------------------------------------------
以上就是我的理解,其实看懂一段源码还真需要些时间, 虽然看懂之后觉得这是很简单的
但是认真读下来还是有收获的
分享到:
- 2009-11-06 15:28
- 浏览 930
- 评论(0)
- 论坛回复 / 浏览 (0 / 1846)
- 查看更多
相关推荐
C# ASP.NET JS 学习工作代码积累 工作和学习中的积累 很有用 很方便
「JavaScript学习资料整理」系列,构建JavaScript前端知识体系,积累JavaScript前端开发经验.zip
JavaScript逆向是指通过分析和理解经过混淆的JavaScript代码,以及对代码执行过程的回溯和逆向学习,来揭示代码的...总之,JavaScript逆向学习是一项需要耐心和技术积累的工作,通过不断的实践和学习,可以提升对Jav
对Node.js中 stream模块的学习积累和理解
NULL 博文链接:https://wui.iteye.com/blog/579325
本文档,是本人看了大量的JavaScript书籍和文档后,将自己所积累到的关于JavaScript方面的知识总结起来,而写成的一个关于JavaScript的学习总结文档
在过去的一段时间里,我投入了大量的时间和精力进行学习,积累了丰富的个人学习资源。这些资源不仅包括各类书籍、课程和在线教程,还包括我在学习过程中的笔记、心得和反思。 首先,我发现阅读是一种非常有效的学习...
JS知识积累和新闻管理系统代码齐全JS讲解清楚学习起来相当方便
多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 15jQueryDemo.rar 3DGallery.zip bootstrap-3.3.2-dist.zip bootstrap-3.3.2.zip easyUI 1.4.4 Demo easyzoom....
学习心得(C#,SQL,javascript...) 工作中积累的 一些问题 和经验 希望对大家有所帮助
在过去的一段时间里,我投入了大量的时间和精力进行学习,积累了丰富的个人学习资源。这些资源不仅包括各类书籍、课程和在线教程,还包括我在学习过程中的笔记、心得和反思。 首先,我发现阅读是一种非常有效的学习...
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
以下资源都是我在工作学习过程中所积累的javascript常用知识,希望与大家分享.
学习中积累的功能代码段 里面包含:Asp.Net中使用水晶报表,GridView导出excel,javascript提示类,分页,数据绑定,文件操作,购物车代码.txt,获取鼠标位置.txt...等等.,自己下载看.
在过去的一段时间里,我投入了大量的时间和精力进行学习,积累了丰富的个人学习资源。这些资源不仅包括各类书籍、课程和在线教程,还包括我在学习过程中的笔记、心得和反思。 首先,我发现阅读是一种非常有效的学习...
javascript提示类 分页 类 数据绑定 数据库方面 文件操作 验证码 ASP.NET 2.0高级控件之FileUpload控件.txt ASP.NET 程序中常用的三十三种代码.txt asp.net使用客户端验证.txt Asp.net中基于Forms验证的角色验证授权...
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...
在这个英语学习激励系统中,用户可以通过完成每日英语任务(如阅读、听力、口语练习等)来积累积分,并利用积分兑换各种奖励,从而激发用户的学习兴趣和动力。此外,系统还提供了丰富的学习资源和社交功能,帮助用户...
用思维导图的方式重新学习前端,还有我积累的知识点总结及复盘干货哦! 思维导图 javascript对象 正则表达式 功能 ES6 Vue 巴别塔 CI / CD 格式化和短绒 Git分支管理和版本控制 算法和数据结构 知识积累 下面是...
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,...