jQuery源码框架组成
匿名函数自执行的优点
匿名函数对外接口设置
window下挂载$()与jQuery()
jQuery.prototype 原型、jQuery基于面向对象的程序
jQuery函数调用与jQuery对象调用方法
jQuery中继承方法:extend
jQuery扩展工具方法:$.trim()、$.proxy()……
静态方法和实例方法的关系和区别简要说明
jQuery中近2000多行:Sizzle选择器
jQuery中的Sizzle:复杂选择器的实现
jQuery中的Callbacks:JQ中的回调对象(函数统一管理)
jQuery中的Deferred:延迟对象(异步统一管理)
jQuery中的support:浏览器功能检测
jQuery中的data:数据缓存(避免大数据量的元素挂载、预防内存泄露)
jQuery中的queue、dequeue:队列管理(入队、出队管理)
jQuery中的attr、prop、val、addClass等:元素属性操作
jQuery中的on、trigger等:事件操作的相关方法
jQuery中的DOM操作:添加、删除、获取、包装、筛选……
jQuery中的CSS方法:样式的操作
jQuery中的数据提交与ajax:跨域、请求script、ajax……
jQuery中的animate:运动方法的实现
jQuery中的offset:位置与尺寸的方法
jQuery中的模块化:jQuery中支持模块化的模式
注释说明:v2.0.3版本、Sizzle选择器、MIT软件许可
注释中的#的信息索引、查询地址(英文版)
匿名函数自执行:window参数及undefined参数意义
"use strict" 严格模式:代码规范及其不推荐严格模式理由
rootjQuery根节点:document 获取及其声明意义
readyList DOM加载相关……
typeof undefined 字符串形式"undefined"的存放及其意义
常见对象存储:location、document、docElem
变量名防止冲突:$()、jQuery()
class2type 判断数据类型、预留检测方式
core_deletedIds 旧版本的ID删除、新版本只做为数组方法引用
core_version = "2.0.3" 版本号存储
一些新方法的存储……如:trim()
jQuery函数:$()、jQuery() 返回对象
原生JS面向对象的写法示例
jQuery面向对象方式:省却初始化元素和创建对象、直接使用内置方法
对象引用实现共享方法:jQuery.fn.init.prototype = jQuery.fn;
core_pnum:正则数字匹配
core_rnotwhite:正则单词匹配
rquickExpr:正则标签匹配(防止XSS木马注入)
rsingleTag:正则匹配空标签
rmsPrefix:正则匹配IE下转换ms
rdashAlpha:正则匹配转换大写、数字
fcamelCase:转驼峰回调函数
completed:DOM触发成功时回调函数
本集主要讲解 JQ 对coustructor的修正以及初始化构造函数的参数类型判断,主要包含以下几个知识点:
1,简述JQ的版本输出。
2,实例讲解原生js中coustructor的bug以及JQ中的coustructor指针修正。
3,JQ初始化构造函数init的参数类型分析:字符串,DOM对象,函数,其它。
4,init的不合法参数处理技巧:'',null,undefined,false。
本集主要讲解 $() 中的参数为字符串时,是要创建元素还是要获取元素的判断处理,主要包含以下几个知识点:
1,实例讲解JQ中对象存储的奥秘。
2,字符串参数的各种形式:简单形式标签获取、复杂形式标签获取、单标签创建、多标签创建。
3,创建标签时的异常情况处理:
4,正则exec在参数匹配中的作用: 返回正则子项。
5,创建标签与ID获取的判断。
本集主要分析JQ中创建标签时各种参数形式的判断与实现方式,主要包含几下几个知识点:
1,创建标签中的执行上下文: document 、iframe。
2,JQ API 查询方法介绍。
3, 原生js对象与JQ对象的判断: instanceof。
4,实例说明 jQurey.parseHTML()的使用及参数说明。
5,jQurey.merge()对内使用与对外使用的区别。
6, 创建标签的同时添加属性和方法的实现原理: 单标签判断rsingleTag、对象字面量判断jQuery.isPlainObject()、自有方法判断、属性添加。
本集主要包含几下几个知识点:
1,回顾第九集知识点。
2,selector 字符串参数 判断是否是通过id方式获取元素。
3,id方式获取元素时。黑莓系统下bug的处理。
4,selector 字符串参数 复杂选择方式的实现原理简介。
本集主要包含几下几个知识点:
1,selector dom节点处理。
2,selector 函数参数的处理
$(function(){})
$(document).ready(function(){})
3,selector 数组、json参数的处理,类数组转原生数组。 数组转jq特定的json格式。
4,selector 、length 属性设置。
5,各种方法的实现:
转数组 -- toArray()
转原生集合 -- get()
本集主要包含几下几个知识点:
1,JQ对象的入栈 pushStack 实现原理。
2,end() 方法的实现原理与作用。
3,JQ 方法 slice() 。
4,first(), last(), eq() 的实现原理。
5,map() 方法的实现原理。
6,JQ内部方法 push \ sort \ splice。
本集和第十四集都是讲解jq的extend方法的实现原理,本集主要介绍了以下知识点:
1,什么是扩展静态(工具)方法。
2,什么是扩展实例方法。
3,扩展工具方法与扩展实例方法的区别。
4,this的奥妙:工具方法与实例方法共用同一代码而实现不同功能的原理。
5,单个对象自变量与多个对象自变量的处理。
6,浅拷贝与深拷贝。
本集和第十三集都是讲解jq的extent方法的实现原理,本集主要知识有以下几点:
1,浅拷贝与深拷贝的判断与参数处理。
2,对象检测。
3,插件检测。
4,合并多个对象属性到一个对象。
5,循环引用的处理。
6,浅拷贝与深拷贝的判断与实现。
7,常见继承方式介绍:拷贝继承 、 类式继承 、原型继承。
本集还是分析的extend方法的内部结构与实现原理,本集主要知识有以下几点:
1,expando 实现及作用。
2,noConflict 方法的作用及实现原理。
3,$(document).ready() 与 window.onload 的关系与区别。
4,$().ready() 与 $.ready()。
5,readyList.resolveWith() 。
妙味课堂【一起学习jQuery源码--逐行分析jQuery源码的奥秘】进阶视频
logo.png(28.73 KB, 下载次数: 3)
下载附件 保存到相册
2013-12-3113:52 上传
一起学习jQuery源码系列视频从一推出就受到了各位同行及热心网友们的热烈关注,在此妙味课堂对大家的鼎立支持表示由衷的感谢!
到目前为止,本系列视频已经免费分享至15集,妙味课堂一向坚持以最低回报率为大家提供尽可能完善的最新前端技术!!
目前已经确定的下一期视频内容为分析 jQuery.extend 中各种工具方法的实现原理,其中具体的工具方法包含有:
jQuery.extend({
expando : 生成唯一JQ字符串(内部)
noConflict() : 防止冲突
isReady : DOM是否加载完(内部)
readyWait : 等待多少文件的计数器(内部)
holdReady() : 推迟DOM触发
ready() : 准备DOM触发
isFunction() : 是否为函数
isArray() : 是否为数组
isWindow() : 是否为window
isNumeric() : 是否为数字
type() : 判断数据类型
isPlainObject() : 是否为对象自变量
isEmptyObject() : 是否为空的对象
error() : 抛出异常
parseHTML() : 解析节点
parseJSON() : 解析JSON
parseXML() : 解析XML
noop() : 空函数
globalEval() : 全局解析JS
camelCase() : 转驼峰
nodeName() : 是否为指定节点名(内部)
each() : 遍历集合
trim() : 去前后空格
makeArray() : 类数组转真数组
inArray() : 数组版indexOf
merge() : 合并数组
grep() : 过滤新数组
map() : 映射新数组
guid : 唯一标识符(内部)
proxy() : 改this指向
access() : 多功能值操作(内部)
now() : 当前时间
swap() : CSS交换(内部)
});
jQuery.ready.promise= function(){}; 监测DOM的异步操作(内部)
functionisArraylike(){} 类似数组的判断(内部)
分析的extend方法的内部结构与实现原理:
1,document.readyState。
2, DOMContentloaded 与 load 。
3,completed 方法原理。
4,holdReady() 方法的作用与实现原理。
5,getScript() 作用及实现原理。
本集包含以下几个方法的实现原理:
1,isFunction() : 判断是否为function 和 原生 typeOf 判断函数的bug。
2,isArray() : 判断是否为数组。
3,isWindow() : 判断是否为 window 对象。
4,isNumberic() : 判断一个值是否为数字或者是否可以转换为数字。
typeOf详解: 原生的 typeOf 在判断数据类型的时候有很多不足之处,本集中指出了这些不足之处,并且详细分析了jq的 type() 方法的实现原理。
程序员口中经常流传着一句话,“一切皆对象”,这句话说明了对象的难以捉摸。本集视频主要介绍什么是对象自变量 以及 JQ中 isPlainObject 和 isEmptyObject() 方法是如何实现的。
观看本节视频需要大家对 jq 的 core_hasOwn 和原生的 constructor 及 prototype 、原型链等有一定的了解。
本集主要分析parseHTML() 方法的实现原理,同时也简单分析了 error() 方法的实用意义。parseHTML 是 jq 中解析节点的常用方法。
本集包含两个常用数据格式转换方法:
parseJSON : 将字符串解析成json格式数据(该方法只支持ie8及以上浏览器,视频中对parseJSON与原生eval方法进行了对比并提供了低版本浏览器的解决思路)。
parseXML : 将字符串解析成xml格式数据(该方法只支持ie9及以上浏览器,视频中详细讲解了方法的实现原理处ie8以下浏览器的兼容处理方式)
此外本集还包含了并不常用的noop 方法介绍及说明实现该方法的意义。
globalEval : 将一个字符串解析成全局变量。该方法在严格模式js和非严格模式下处理方式有所不同。视频中作了详细讲解并分析了原生js中eval() 与 window.eval() 的区别。
camelCase : 将有‘-’的字符串转换成驼峰形式字符串。 在转换css3的浏览器内核兼容字符串时ie与其它浏览器处理方式不一样,大家留心视频中处理方式的讲解。
nodeName : 判断是不是指定的节点元素。