• Works
    • 笔记
    • 资源
  • 关于我

拉风的博客

javascript

如何学习Vue2源码

Posted by raphealguo on 7 九月, 2017 9 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

背景

近期我们把微信公众平台管理端的前端框架切成 MVVM 架构,框架层面最终我们选择了 Vue,为了更了解 Vue,阅读Vue源码是必要的。

我参考的 Vue 版本是 2.2.0,整个项目的代码1万2千行,如果不搞清楚原理,直接每一行看下来肯定会漏掉不少细节,或者对作者为什么这样写代码感到莫名其妙。

如此庞大的项目要啃下来并非易事,里边涉及到非常多的概念:Virtual Dom; 条件/列表渲染; 自定义组件; 双向绑定; 指令等等。

按照经验,编写这么庞大的系统,我们总是从第1行代码开始写起,慢慢写到第1万行,逐步构造出整个系统/框架。

所以我也会按照这个思路,从零开始构造出一个完整的Vue框架。

[Read more...]

Posted in: javascript | Tagged: MVVM, Vue, Vue2.x, 源码

解读uglifyJS(四)——Javascript代码压缩

Posted by raphealguo on 22 五月, 2014 7 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小,前边混淆压缩变量名字是方法之一,但是还有诸多可以把代码体积压小的规则,我在本篇文章会对UglifyJS所有压缩代码体积的细节整理成一条条的规则,为了方便理解,还会给出一些压缩前代码以及压缩后代码的对比。由于UglifyJS里边对IF的压缩规则最多,也是最为丰富精彩的部分,放在最后边解释。
还是那样,有兴趣了解UglifyJS实现细节,看文章最后的我对它源码做的注释。
留意:

  1. 下边代码样例中左侧为压缩前源码,右侧为压缩后代码,为了对比方便,下边多数的代码压缩后的变量名字没有混淆处理,同时一个压缩规则的例子尽量不混其他压缩策略进去。
  2. 我下文多处写到的表达式语句是指UglifyJS语法分析得到的simple_statement,你可以认为只要能放到逗号表达式里边的都算是simple_statement。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(三)——Javascript的变量名混淆

Posted by raphealguo on 17 五月, 2014 2 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

UglifyJS会对JS文件的变量名进行混淆处理,要理解Javascript变量混淆的细节,我们需要回答以下几个问题:
1.遇到一个变量myName,我们怎么知道这个myName变量要不要混淆
2.混淆名字怎么生成才合适,新的名字替换旧的名字时有什么要注意的地方?
3.哪些关键字会产生一个作用域?
4.作用域链跟符号表在UglifyJS里边是怎么体现?
5.UglifyJS混淆的过程是什么样?

我们先梳理一下这5个问题,最后贴出我阅读UglifyJS在这部分的实现时做的代码注释。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(二)——AST生成

Posted by raphealguo on 15 五月, 2014 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

为了理解源码结构,必须要进行语法分析,uglify在语法分析阶段得到一棵AST树(它的结构是数组嵌套数组,parse-js移植于一个Lisp的项目,获得的AST树类似Lisp里边的表,数组套数组:["toplevel", ["stat", [xxxx]]])

对于JS来说,一个文件就是处于一个全局域的语句块,uglify里边把这个命名为toplevel的语句块,里边涉及各种状态,太具体的状态就不画图了,上一个语句块的状态转移的图片,其他还是要阅读源码比较爽快。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, Zend源码

解读uglifyJS(一)——token扫描

Posted by raphealguo on 14 五月, 2014 3 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

uglifyjs是用来压缩混淆JS文件,同时会对代码尽可能的优化,使得最后产出的js代码非常小,uglifyjs通过nodejs写的,底层用了一个parse-js的进行AST分析。
这两天在工作空隙的时间阅读了uglifyjs的源码,发现了很多js语法细节的东西,略有收获,顺便把看的过程注释在它代码里边。

词法分析的文章写过好几篇了,不想重复了,直接贴代码注释了。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

jQuery源码剖析(十)——Sizzle选择器引擎之位置伪类

Posted by raphealguo on 13 二月, 2013 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

本篇文章是剖析Sizzle的最后一篇,上一篇文章把大概的匹配器解析过程剖析了,但是还有一个特殊的选择器规则没说到:位置伪类。(姑且称为位置伪类吧,因为它与节点在父节点的位置信息有关)
上一篇文章已经把详细的匹配器工作过程叙述了一遍,本篇文章不再叙述相关过程,只是把其中有关于位置伪类特殊处理的部分剖析一下,了解详细匹配过程移步到《jQuery源码剖析(九)——Sizzle选择器引擎之匹配器》
[Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(九)——Sizzle选择器引擎之匹配器

Posted by raphealguo on 8 二月, 2013 1 Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

上篇文章《jQuery源码剖析(八)——Sizzle选择器引擎之解析原理》谈到一个终极匹配器superMatcher,它把候选元素集合seed筛选出最后符合规则的节点集合。如下图:

从这个图中我们知道,superMatcher的输入是DOM节点结合,输出也是DOM节点集合。这个终极匹配器里边需要一堆小的匹配器来判断当前输入的节点是否符合规则。
因此容易想到这样的匹配器的形式如:function(elem){return true;}
也即是说,输入一个DOM节点,判断一下输入节点是否符合某个匹配规则,如果符合了,那它就应该在最后的结果集里边。 [Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(八)——Sizzle选择器引擎之解析原理

Posted by raphealguo on 7 二月, 2013 6 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

这篇文章的主题是解释Sizzle选择器引擎中的解析原理,以及部分源码注释。注意,这篇文章会做一下两点限制:

  • 暂时忽略位置选择器的伪类,例如,:even, :eq等
  • 暂时忽略XML格式,应该说之后的剖析都不会关心jQuery如何解析XML,文中贴出的源码会把XML那部分相关的去除掉

我接下去的几篇文章会用以下例子来逐步剖析Sizzle的解析原理以及匹配器构成原理:

javascript
1
2
3
4
5
6
7
8
9
10
11
<div>
  <p>
    <span class="clr">
      <input type="text" />
    </span>
  </p>
  <div class="clr">
    <input type="checkbox" name="readme" />
    <p>Hello World</p>
  </div>
</div>

使用以下选择器S来选取节点:$(‘div .clr > input[name="readme"] + p’)。
在开始前,我们必须了解一个真相:CSS选择器的解析顺序是从右到左的。 [Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(七)——Sizzle选择器引擎之词法分析

Posted by raphealguo on 5 二月, 2013 6 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

上篇文章《jQuery源码剖析(六)——类数组》最后聊到了jQuery所用到的选择器引擎Sizzle。
接下来的几篇文章会剖析一下关于Sizzle这个引擎。首先当然是选择器的概念以及Sizzle是如何分析这个选择器的。

CSS选择器

我们知道浏览器最终会将HTML文档(或者说页面)解析成一棵DOM树,如下代码将会翻译成以下的DOM树。

javascript
1
2
3
4
5
6
7
8
9
<div>
  <p>
    <input type="text" />
  </p>
  <div class="clr">
    <input type="checkbox" name="readme" />
    <p>Hello World</p>
  </div>
</div>


为了操作到当中那个checkbox,我们需要有一种表述方式,使得通过这个表达式让浏览器知道我们是想要操作哪个DOM节点。
这个表述方式就是CSS选择器,它是这样表示的:div > p + .clr input[type="checkbox"]
表达的意思是,div底下的p的兄弟节点,该节点的class为clr,并且其属性type为checkbox。 [Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(六)——类数组

Posted by raphealguo on 4 二月, 2013 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/js/

前言

页面上如果有多个属性为class=”clr”的节点,通过jQuery操作可以拿到这些DOM节点,并包装为jQ对象:var doms = $(‘.clr’);
很容易就联想到doms应该返回的是一个数组。
这个问题很好解决,我们可以理解成jQuery继承了Array这个类。
于是doms可以像数组那样操作子元素。例如:
doms.length可以获取jQuery获取到的DOM节点的数目,经常会用 doms.length==0 来判断获取到的DOM是否为空或者不存在
doms[0]可以拿到第一个DOM节点对象(注意这里不是jQ对象!)
在实际的操作中,需要经常用到的这两个有关类数组的操作就够了。 [Read more...]

Posted in: javascript, jQuery源码, 源码 | Tagged: jQuery, 源码
1 2 下一页 »

标签

BFS CA CSS dfs ExtCSS HTTP HTTPS jQuery MVVM PHP源码 Sizzle ssl uglifyjs Vue Vue2.x webview模拟器 Web开发 Zend源码 上线 云南游 入门 前端工程 加密 协议 工具 提测 效率 数字签名 数学 旅游 游戏 源码 灰度 监控 硬件 算法 网络模型 计算机 认证

近期评论

  • 捕获页面中全局Javascript异常 - 算法网 发表在《前端代码异常监控》
  • Augustmyv 发表在《如何学习Vue2源码》
  • Holographicuqj 发表在《如何学习Vue2源码》
  • Foamcub 发表在《如何学习Vue2源码》
  • liusir 发表在《关于我》

链接表

  • bang
  • DIV.IO
  • 小木舟

Copyright © 2023 拉风的博客.

Theme by ThemeHall.