不同于 jQuery 代码各个模块细节实现的晦涩难懂,jQuery 整体框架的结构十分清晰,按代码行文大致分为如上图所示的模块。

初看 jQuery 源码可能很容易一头雾水,因为 9000 行的代码感觉没有尽头,所以了解作者的行文思路十分重要。

整体而言,我觉得 jQuery 采用的是总--分的结构,虽然JavaScript有着作用域的提升机制,但是 9000 多行的代码为了相互的关联性,并不代表所有的变量都要定义在最顶部。在 jQuery 中,只有全局都会用到的变量、正则表达式定义在了代码最开头,而每个模块一开始,又会定义一些只在本模块会使用到的变量、正则、方法等。所以在一开始的阅读的过程中会有很多看不懂其作用的变量,正则,方法。

所以,我觉得阅读源码很重要的一点是,摒弃面向过程的思维方式,不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了,很想知道这个方法或变量的作用,然而可能它要到几千行处才被调用到。如果去追求这种逐字逐句弄清楚的方式,很有可能在碰壁几次之后阅读的积极性大受打击。

jQuery 整体架构的更多相关文章

  1. jQuery整体架构源码解析(转载)

    jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...

  2. jQuery整体架构源码解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  3. jQuery整体架构

    (function(global, factory) { factory(global); }(typeof window !== "undefined" ? window : t ...

  4. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  5. 【深入浅出jQuery】源码浅析--整体架构(转)

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  6. jQuery 2.0.3 源码分析core - 整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery ...

  7. jQuery源码学习(1):整体架构

    整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...

  8. jQuery源码分析系列 : 整体架构

    query这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! ...

  9. jQuery 源码解析一:jQuery 类库整体架构设计解析

    如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...

随机推荐

  1. WebService 常用的设置

    1.修改WebService接收长度 <binding name="IAuthServiceSoap11Binding" maxBufferSize="214748 ...

  2. Mayor's posters 线段树区间覆盖

    题目链接 http://poj.org/problem?id=2528 Description The citizens of Bytetown, AB, could not stand that t ...

  3. pandas set_index() reset_index()

    set_index() 官方定义: 使用一个或多个现有列设置索引,   默认情况下生成一个新对象 DataFrame.set_index(keys, drop=True, append=False,  ...

  4. sonar严重性与颜色对应关系

  5. UML图基础

    UML(Unified Model Language)统一建模语言,是对象管理组织(OMG)制定的一个通用的.可视化的建模标准语言,可以用来可视化.描述.构造和文档化软件密集型系统的各种工作.在学习设 ...

  6. The input file was not found

    错误位置: File file= new File("/report/_test/test.xls");Workbook wb1 = jxl.Workbook.getWorkboo ...

  7. Java编码转换

    于Java当中,编码格式的转换一般较为麻烦,就我目前的经验来说,需要用到转码的环境主要是IO(无论是网络IO还是文件IO).转换方式主要有以下几种   方式一:String层面  String mes ...

  8. es6 简单封装一个 省市县三级下拉框

    废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...

  9. git 换行符替换

    https://help.github.com/en/articles/dealing-with-line-endings rm .git/index git reset https://github ...

  10. lxml.html 中几种解析器的区别(转)

    原文地址:https://blog.csdn.net/chroming/article/details/77104874