JQ深度手记、源码分析
1、$.extend() 对象继承操作、浅拷贝操作、深拷贝操作(第一个参数:true)
- var a = {
- name:'lisan'
- };
- var b = {};
- $.extend(b, a); //b浅拷贝a的行为、属性 ,拷贝是另外创建一个空间,这个空间存放拷贝到的行为、属性
- b.name = 'lili';
- console.log(a.name); //'lisan' 不会被影响
- a = {
- name:{age: 30}
- };
- var b = {};
- $.extend(true, b, a); //b深拷贝a
$.extend() 拷贝
2、$.proxy
3、异步调试 主页面js头尾部加 @ sourceURL=你要调试的异步js
4、jq复制、剪切、粘贴事件(cut、copy、paste)
5、源码分析
- 1. 总体架构
- 1.1 自调用匿名函数 【self-invoking anonymous function】
- 打开jQuery源码,首先你会看到这样的代码结构:
- (function( window, undefined ) {
- // jquery code
- })(window);
- 1.这是一个自调用匿名函数。什么东东呢?在第一个括号内,创建一个匿名函数;第二个括号,立即执行
- 2.为什么要创建这样一个“自调用匿名函数”呢?
- 通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。
- 3.匿名函数从语法上叫函数直接量,JavaScript语法需要包围匿名函数的括号,事实上自调用匿名函数有很多种写法(注意中文的右括号,这里列出2种常见的写法):
- (function() {
- console.info( this );
- console.info( arguments );
- }( window )) ;
- (function() {
- console.info( this );
- console.info( arguments );
- })( window );
- 4.为什么要传入window呢?
- 通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.6.1.min.js:
- (function(a,b){})(window); // window 被优化为 a
- 5.为什么要在在参数列表中增加undefined呢?
- 在自调用匿名函数的作用域内,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。
- undefined = "now it's defined";
- alert( undefined );
- 浏览器测试结果:
- 结论
- ie ==> now it's defined 可以改变
- firefox => undefined 不能改变
- chrome => now it's defined 可以改变
- opera => now it's defined 可以改变
- 6.注意到源码最后的分号了吗?
- 分号是可选的,但省略分号并不是一个好的编程习惯;为了更好的兼容性和健壮性,请在每行代码后加上分号并养成习惯。
- 1.2总体架构
- 接下来看看在 自调用匿名函数 中都实现了什么功能,按照代码顺序排列:
- (function( window, undefined ) {
- // 构造jQuery对象,JQuery采用js单例模式模式创建唯一的对象。
- var jQuery = function( selector, context ) {
- return new jQuery.fn.init( selector, context, rootjQuery );
- }
- // 工具函数 Utilities
- // 异步队列 Deferred
- // 浏览器检测 Support
- // 数据缓存 Data
- // 队列 queue
- // 属性操作 Attribute
- // 事件处理 Event
- // 选择器 Sizzle
- // DOM遍历
- // DOM操作
- // CSS操作
- // 异步请求 Ajax
- // 动画 FX
- // 坐标和大小
- window.jQuery = window.$ = jQuery; 【注册$/jquery到window,即全局作用域】
- })(window);
- 从上边的注释看,jQuery的源码结构相当清晰、条理,不像代码那般晦涩和让人纠结。
- 后边的手记基本将以这个顺序展开。
JQ源码分析感受——总体架构
JQ深度手记、源码分析的更多相关文章
- 转:[gevent源码分析] 深度分析gevent运行流程
[gevent源码分析] 深度分析gevent运行流程 http://blog.csdn.net/yueguanghaidao/article/details/24281751 一直对gevent运行 ...
- [阿里DIN] 深度兴趣网络源码分析 之 如何建模用户序列
[阿里DIN] 深度兴趣网络源码分析 之 如何建模用户序列 目录 [阿里DIN] 深度兴趣网络源码分析 之 如何建模用户序列 0x00 摘要 0x01 DIN 需要什么数据 0x02 如何产生数据 2 ...
- [阿里DIN] 深度兴趣网络源码分析 之 整体代码结构
[阿里DIN] 深度兴趣网络源码分析 之 整体代码结构 目录 [阿里DIN] 深度兴趣网络源码分析 之 整体代码结构 0x00 摘要 0x01 文件简介 0x02 总体架构 0x03 总体代码 0x0 ...
- [阿里DIEN] 深度兴趣进化网络源码分析 之 Keras版本
[阿里DIEN] 深度兴趣进化网络源码分析 之 Keras版本 目录 [阿里DIEN] 深度兴趣进化网络源码分析 之 Keras版本 0x00 摘要 0x01 背景 1.1 代码进化 1.2 Deep ...
- 深度 Mybatis 3 源码分析(一)SqlSessionFactoryBuilder源码分析
MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java ...
- Spring5深度源码分析(三)之AnnotationConfigApplicationContext启动原理分析
代码地址:https://github.com/showkawa/spring-annotation/tree/master/src/main/java/com/brian AnnotationCon ...
- 【TencentOS tiny】深度源码分析(4)——消息队列
消息队列 在前一篇文章中[TencentOS tiny学习]源码分析(3)--队列 我们描述了TencentOS tiny的队列实现,同时也点出了TencentOS tiny的队列是依赖于消息队列的, ...
- MyBatis源码分析-SQL语句执行的完整流程
MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以对配置和原生Map使用简 ...
- jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)
Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...
随机推荐
- Bootstrap fileinput v3.0(ssm版)
说明在上一个版本即Bootstrap fileinput v2.0(ssm版)的基础上,增加了多处都需要上传的需求 核心代码ArticleController.java package com.isd ...
- 2016-ccf-data-mining-competition 搜狗用户画像构建
想法1: 分成147(3*7*7)类, 后来觉得这样效果不好,后来看了看竞赛要求的也是分别预测,分别评分,而不是一次就把3类的标签都给出 所有后来我们改进了当时的想法,决定对年龄,性别,学历进 ...
- cocos2dx 3.x 区域画图
.h文件 bool onTouchBegan(cocos2d::Touch *pTouch, cocos2d::Event *pEvent); void onTouchMoved(cocos2d::T ...
- asp.net 获取mp3 播放时长
1 Shell32 //添加引用:COM组件的Microsoft Shell Controls And Automation //然后引用 using Shell32; //如果出现“无法嵌入互操作类 ...
- [one day one question] express 不缓存如何实现
问题描述: express 默认缓存,这怎么破? 解决方案: apiRoutes.use(function (req, res, next) { res.setHeader('Cache-Contro ...
- table中checkbox选择多行
页面代码 <table id="addressTable" class="ui-jqgrid-htable ui-common-table table table- ...
- LINUX实践--ELF分析
一.ELF文件头(定义在/usr/include/elf.h)中 二.实践部分 第一行 对应e_ident[EI_NIDENT]:实际表示内容为7f45 4c46 0101 0100 0000 000 ...
- 20145319 《网络渗透》MS12_020安全漏洞
20145319 <网络渗透>MS12_020安全漏洞 一 实验内容 初步掌握平台matesploit辅助模块aux的使用 辅助模块包括扫描等众多辅助功能 本次展示DOS攻击的实现 有了初 ...
- POJ 2115 C Looooops(模线性方程)
http://poj.org/problem?id=2115 题意: 给你一个变量,变量初始值a,终止值b,每循环一遍加c,问一共循环几遍终止,结果mod2^k.如果无法终止则输出FOREVER. 思 ...
- python 将一个列表乱序
import random nums = [, , , , , , ] random.shuffle(nums) print(nums)