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. 【查看linux配置】查看linux系统常用的命令,Linux查看系统配置常用命令

    一.linux CPU大小  cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep &qu ...

  2. JS或jsp获取Session中保存的值

    JS是不能读取Session中的值的 . session是服务器对象, javascript是客户端脚本,你能做的操作就是把这个值用 <%=%>输出到页面的javascript中参与运算, ...

  3. sql多对多探讨

    --用sql语句探讨一对多 多对多关系 /**** 你有3个表  学生表(学生id 学生姓名) 课程表(课程id 课程名) 成绩表 (学生id 课程id 分数) 班级表(班级id 学生id) 这里的班 ...

  4. 删除 Myeclipse 遗留的 workspace

    有时因需要而创建多个 workspace 并在它们之间切换,但是如果某些 workspace 内容被物理删除(不再需要)后,当你点击 File --> Switch Workspace 时,旧的 ...

  5. 解决Windows下网络原因Composer安装失败问题的方法

    由于Composer镜像都在国外,所以直接在官网下载Windows Installer后安装很多情况下是无法成功安装的. 解决办法: 1,将php添加到系统环境变量,并开启openssl扩展. 2,点 ...

  6. 腾讯云通信WebIM事件回调的坑~

    最近在开过工作中用到了腾讯IM的功能,由于业务的需要主要使用到了: 1.loginInfo 用户登录,用户信息 2.getRecentContactList 获得最近联系人 3.getLastGrou ...

  7. HDU 1847 【巴什博弈】

    Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Ja ...

  8. Struts2 学习笔记——struts.xml文件之Bean的配置

    Struts2的大部分核心组件不是以硬编码的形式写在代码中,而是通过自身的IoC容器来管理的. Struts2以可配置的形式来管理核心组件,所以开发者可以很容易的扩展框架的核心组件.当开发者需要扩展或 ...

  9. Python的扩展接口[2] -> 动态链接库DLL[0] -> 动态链接库及辅助工具

    动态链接库 / Dynamic Link Library 目录 动态链接库简介 函数封装DLL 组件对象模型COM 如何判断.dll文件是COM还是DLL 辅助工具 1 动态链接库简介 / DLL I ...

  10. jenkins新手入门教程

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 虽然jenkins提供了Window.Lin ...