`
yangtao309
  • 浏览: 64864 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js学习的点小积累

阅读更多
对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的情形。赋值到即可

//-----------------------------------------------------------------
以上就是我的理解,其实看懂一段源码还真需要些时间, 虽然看懂之后觉得这是很简单的
但是认真读下来还是有收获的

分享到:
评论

相关推荐

    组成原理课程实验:MIPS 流水线CPU、实现36条指令、转发、冒险检测-内含源码和说明书.zip

    组成原理课程实验:MIPS 流水线CPU、实现36条指令、转发、冒险检测-内含源码和说明书.zip

    setuptools-50.0.2-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    setuptools-1.1.6.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    CEA二次开发脚本:用于ECSP配比设计

    CEA二次开发脚本:用于ECSP配比设计

    环形数组是一种特殊的数据结构

    环形数组

    什么是环形数组以及学习环形数组的意义是什么

    环形数组

    母亲节祝福 Python 代码(包含详细介绍)

    附件是母亲节祝福 Python 代码(包含详细介绍),文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!

    setuptools-0.7.4.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    max111111111

    max111111111

    攻防世界问题的概要介绍与分析

    "攻防世界"这一术语广泛应用于网络安全领域,它生动描绘了一个持续演进的技术战场,其中攻击者与防御者围绕着数据保护、系统安全及网络基础设施的完整性展开激烈的智斗。在这个虚拟而又现实交织的舞台上,知识、技能与创新成为了决定胜负的关键要素。以下是对这个复杂多维攻防世界的深度资源描述: 在一个由代码编织的宇宙里,"攻防世界"不仅是一场技术较量,更是对策略、耐心与适应能力的考验。想象一个庞大的数字迷宫,其中数据如同珍贵的宝藏,被各式各样的防火墙、加密协议和安全系统重重保护。而另一边,潜伏着一群技艺高超的黑客,他们利用漏洞、社会工程学以及先进的攻击手段,试图穿透这些防线,揭露系统的脆弱之处。 对于防御方而言,构建坚不可摧的安全体系是永恒的目标。这要求他们精通最新的安全技术,如入侵检测系统(IDS)、安全信息和事件管理(SIEM)平台、以及人工智能驱动的威胁狩猎工具。同时,定期进行渗透测试和红蓝对抗演练,模拟真实攻击场景,以发现并修补潜在漏洞。此外,培养安全意识,教育员工识别钓鱼邮件、恶意软件等,也是构建第一道防线的重要环节。 攻击者一方,则聚焦于不断探索未知漏洞(零日漏洞)、开发定制化恶意软

    关于java出租车计价器设计与实现.zip

    关于java出租车计价器设计与实现 总共4个模块 (1)出租车计价系统可以实现出租车信息的管理。 1.1出租车信息的查询:通过数据库查询出租车的车型,车号,以及是否可用 1.2出租车信息的增加:向数据库中添加出租车的车型,车号,以及是否可用 1.3出租车信息的修改:对数据库中已经存在的出租车的车型,车号,以及是否可用的信息进行修改 1.4出租车信息的删除:删除数据库中已经存储的出租车的信息 (2)出租车计价系统可以实现司机信息的管理。 2.1司机信息的查询:通过数据库查询出司机的年龄,性别,学历,名字等信息 2.2司机信息的增加:向数据库中添加司机的年龄,性别,学历,名字等信息 2.3司机信息的修改:对数据库中已经存在的司机的年龄,性别,学历,名字等信息进行修改 2.4司机信息的删除:删除数据库中已经存储的司机的信息 (3)出租车计价系统可以实现出租车计价功能。 3.1通过java多线程,模拟出租车在路上的情景 3.2通过距离计费的方式,将订单的时间,乘客的信息,订单的价格等插入数据库中 (4)出租车计价系统可以实

    华为OD机试D卷 - 拼接URL - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

    setuptools-8.2.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    C语言输出母亲节祝福(内含详细描述)

    附件是C语言输出母亲节祝福(内含详细描述),文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!

    setuptools-40.4.2.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    仰卧起坐YOLOV8-POSE,C++

    仰卧起坐YOLOV8-POSE,C++,只需要OPENCV

    行动学习指导手册glq.ppt

    行动学习指导手册glq.ppt

    setuptools-0.9.8.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    计算机网络资料复习pdf

    计算机网络资料复习pdf

    setuptools-1.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

Global site tag (gtag.js) - Google Analytics