1.调用页面

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<script src="js/jquery-1.1.0.js"></script>

	<script>

		// 通过$() 创建jquery对象   new jquery()

		// $.extend(); // 实现对象的扩展

		var obj1 = {

			name:"max",

			age:30

		};

		var obj2 = {

			money:3000

		}

		// 对象扩展

		// 2个参数

		// 将obj2的属性扩展到obj1中(obj1没有但obj2有,则obj1里添加obj2这个属性)

		$.extend(obj1,obj2); // 合并对象的属性  extend 所有对象扩展

		// 1个参数

		$.extend({ // 只有一个参数对象  给jquery对象本身扩展属性/方法

			getName:function() {

				console.log(1);

			}

		});

		// 把jquery作为构造函数,向jquery原型对象上扩展,实例对象将会拥有

		$.fn.extend({  // jquery构造函数  原型上扩展

			setname:function(){

				alert(2);

			}

		});

		/******************************************************************/

		var obj1 = { // 没有

			name:"max",

			age:30

		};

		var obj2 = { // 遍历  for in  不可枚举

			money:3000,

			height:175,

			weight:75

		}

		var obj3 = {

			work:function(){

				console.log(1);

			}

		}

		$.extend(obj1,obj2); // extend 所有对象扩展  复制

		$.extend(obj1,obj2,obj3);

		$.extend({

			getName:function(){

				alert("max is max");

			},

			setname:"1"

		});

		console.log($.setname); // 给jQuery本身扩展

		var result = $.extend({},obj1,obj2,obj3); // 自己写一个对象,将其他对象的属性和方法扩展到该对象上

		console.log(result);

	</script>

</body>

</html>

2.测试页面

test.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<script src="js/jquery-1.1.0.js"></script>

	<script>

		// 第一个参数一定是对象

		$.extend({

			name:"max"  // this的指向

		});

		console.log($.name); // 给jquery扩展属性

	</script>

</body>

</html>

3.重构jquery

jquery-1.1.0.js

// 1.创建自运行函数

(function(root) { // 3.在js中作用域是通过function来创建的

	// 4.定义类(构造函数),暴露接口,便于调用(创建实例new)

	var jQuery = function(){

		// return new jQuery.prototype.init(); // 桥接模式

		return new jQuery.fn.init(); // 8.让fn指向jQuery的原型对象

	}

	// 7.将jQuery当作对象,给对象扩展fn属性,让fn指向jQuery的原型对象

	jQuery.fn = jQuery.prototype = { // prototype指向原型对象

		init:function(){

			// 初始化方法

		},

		// css:function(){ // 6.在原型对象中添加css()方法

		// 	//

		// }

		/**

		 * 10.架构

		 * 工具函数

		 * 异步队列

		 * 浏览器测试

		 * 数据缓存

		 * 属性操作

		 * 事件处理

		 * 选择器 sizzle

		 * DOM遍历

		 * DOM操作

		 * css操作

		 * 异步请求 ajax

		 * 动画

		 */

	}

	// jQuery.prototype.init.prototype = Query.prototype; // 5.桥接模式

	jQuery.fn.init.prototype = Query.fn; // 9

	jQuery.extend = jQuery.fn.extend = function(){ // 11.指向的命名空间相同

		var length = arguments.length; // 12.获取传参的个数

		var target = arguments[0]||{}; // 13.第一个参数

		var i=1;

		var options; // 17.存放参数(>=2)

		if(typeof target!=="object"){

			// 14.改变参数的引用

			target = {};

		}

		// 15.1个参数

		if(length==i){ // 当只有一个参数时,改变this的指向

			target=this; // 此处this指向jQuery对象本身

			// console.log(target);

			i--;

		}

		// 16.2参数

		for(;i<length;i++){ // 从1开始 2<

			if(arguments[i]!==null){ // 遍历将要扩展到本身对象的对象

				for(name in options){

					// console.log(options);

					// console.log(options[name]);

					// target // 指向第一对象(需要扩展的对象)

					target[name] = options[name];

				}

			}

		}

		return target;// 17.设置返回值

	}

	// 18.jQuery静态工具函数扩展

	jQuery.extend({

		// 19.jQuery本身调用extend()方法

		isArray:function() {

			// body...

		}

	});

	// 5.将jQuery挂载在window上,作为window的属性

	root.$ = root.jQuery = jQuery;

})(this); // 2.this指向window对象 作用域(命名空间)  局部作用域/全局作用域  变量通过作用链查找(向上遍历)

// 定义在全局作用域中的变量 转换为window的属性

// 定义在全局作用域中的方法 转换为window的function

// console.log($==jQuery);

.

jquery技术揭秘静态工具函数源码重构的更多相关文章

  1. PHP 源码 —— is_array 函数源码分析

    is_array 函数源码分析 本文首发于 https://github.com/suhanyujie/learn-computer/blob/master/src/function/array/is ...

  2. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  3. PHP 源码 — intval 函数源码分析

    PHP 源码 - intval 函数源码分析 文章来源: https://github.com/suhanyujie/learn-computer/ 作者:suhanyujie 基于PHP 7.3.3 ...

  4. jQuery 技术揭秘

    1.平时jquery调用页: index.html : <!DOCTYPE html> <html lang="en"> <head> < ...

  5. 【C++】【源码解读】std::is_same函数源码解读

    std::is_same使用很简单 重点在于对源码的解读 参考下面一句静态断言: static_assert(!std::is_same<bool, T>::value, "ve ...

  6. mongodb操作：利用javaScript封装db.collection.find()后可调用函数源码解读

    { "_mongo" : connection to YOURIP:27017{ SSL: { sslSupport: false, sslPEMKeyFile: "&q ...

  7. lodash框架中的chunk与drop函数源码逐行分析

    lodash是一个工具库,跟underscore差不多 chunk函数的作用: 把一维数组,按照固定的长度分段成二维数组 如: chunk( [ 10, 20, 30, 40 ], 2 )     结 ...

  8. python 内置函数源码查看

    如果是用python 实现的模块可以直接在IDE里面追踪到源码 也可以使用help内置函数,例如: help(os) 如果是c 语言实现的模块,则不能直接在IDE里面查看,如果直接在IDE里面查看,会 ...

  9. Go语言fmt库的print函数源码解析

    // Copyright 2009 The Go Authors. All rights reserved. // Use of this source code is governed by a B ...

随机推荐

  1. 一种机制，与js类似

    我们知道,当两个条件进行逻辑与操作的时候,其中任何一个条件为假,则表达式的结果为假.所以,遇到(A 且 B)这种表达式,如果A为假的话,B是不是真假都无所谓了,当遇到一个假条件的时候,程序也就没有必要 ...

  2. touchSlider插件案例

    <!doctype html> <html lang="en"> <head> <title>jQuery手机图片触屏滑动轮播效果代 ...

  3. penGL入门学习（六）

    http://blog.csdn.net/sun6255028/article/details/5090067 今天要讲的是动画制作——可能是各位都很喜欢的.除了讲授知识外,我们还会让昨天那个“太阳. ...

  4. xCode中去除“Implicit declaration of function 'sysctl' is invalid in C99” 警告

    http://blog.csdn.net/dreambegin/article/details/8609121 一般出现该问题是因为通过C调用了unix/linux 底层接口,所以需要调整c语言的编译 ...

  5. Scala学习随笔——Scala起步

    实验楼学习Scala语言的笔记,课程网址为https://www.shiyanlou.com/courses/490 一.Scala简介 Scala 是一门多范式的编程语言,类似于 Java .设计初 ...

  6. VS2017源代码版本管理

    VS2017源代码版本管理有两种方式:Git(代码提交到服务器)和Team Foundation Server(代码提交到局域网) 一.Git版本管理(上传到码云服务器https://gitee.co ...

  7. Ubuntu 14.04LTS+Git

    Git是我们常用的代码托管工具,作为程序员,Git是必备的. 安装Git的方法很简单,官网就有写:http://git-scm.com/download/linux 根据官网的说明,用: sudo a ...

  8. 模板—字符串—AC自动机（多模式串，单文本串）

    模板—字符串—AC自动机(多模式串,单文本串) Code: #include <queue> #include <cstdio> #include <cstring> ...

  9. 2-SAT浅谈

    2-SAT浅谈 一.2-SAT问题 首先,什么是$2-SAT$问题.现在给出这样一类问题:给出$n$个点和关于这$n$个点的$m$条限制条件,并且这$n$个点中,每一个点只有两种状态.对于上述问题,我 ...

  10. 【状态压缩DP】【BZOJ1087】【SCOI2005】互不侵犯king

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3135  Solved: 1825[Submit][ ...