- 博客(93)
- 收藏
- 关注
RSS订阅原创 babel 原理与演进
什么是 babel官网上的定义是 babel 是一个 JavaScript 编译器，具体来说，babel 是一个工具用于将 ECMAScript 2015+ 语法编写的代码转化成向后兼容的 JavaScript 语法，以便于能够运行在当前或者旧版本浏览器或其他环境中。如图所示先来回顾下 v8 执行 js 代码的整体流程，有一段 js 代码经过词法分析将代码解析成几个 token，然后经过语法分析生成一棵 AST 数，再经过语义分析解析出作用域、领域等上下文环境。最终生成中间代码的形态(中间代码可能是..
2021-08-19 23:10:02
3643
原创 webpack 源码分析系列 ——loader
为什么需要 loaderwebpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。内部通过构建依赖图管理模块之间的依赖关系，生成一个或多个 bundle 静态资源。但是 webpack 只能处理 JavaScript 、Json 模块。应用程序除了JavaScript 、Json 模块以外还有图片、音频、字体等媒体资源、less、sass 等样式文件等非 js 代码的模块。所以需要一种能力，将非 js 资源模块解析成能够被 webpack 管理的模块。这也就是 loader 的作.
2021-05-06 16:29:24
4924
原创 4. render
文章目录4. renderrender 整体流程DFS 框架遍历关键处理方法源码分析前置知识点isWorkingnextRoot & nextRenderExpirationTimenextUnitOfWorkrenderRootbeginWorkbeginWorkbailoutOnAlreadyFinishedWorkHostRootFunctionComponentMemoComponentClassComponent创建更新processUpdateQueuefinishClassCompon
2020-10-26 16:48:24
330
原创 V8中的快属性与内联缓存
V8中的快属性与内联缓存本篇博客从 v8 引擎角度透析 JavaScript 中对象的本质，以及 v8 引擎是怎么借鉴编译型语言的某些特性（比如 结构体、地址偏移、预解析、内联缓存 等）来优化对象属性的访问性能的, 这也从另一个角度说明了项目使用 typescript 必要性的原因。在 javascript 语言中，任何的对象都是由属性名称和属性值两部分组成，对于属性名称有字符串类型和数字类型，对于属性值来说可以是任意的类型。或者你会听说 JavaScript 中的对象又称为字典，以键值对的方式存储和
2020-09-20 18:46:40
735
原创 react源码系列(1) — 创建元素组件
文章目录Babel 处理 JSXcreateElement类元素方法元素内置元素Suspense 与 lazymemo其他的 symbol 元素Children 处理react 源码版本为 v16.13.1，可以下载下来结合者一起看，本节涉及到 packages/react 中的代码。文章的源在：https://www.yuque.com/wmaoshu/blog/gcg1ixreact 一个很重要的设计原则是根据业务维度的关注点分离，将每个关注点或者说变化的轴线作为一个个组件划分，每个组件是单一
2020-07-24 00:22:10
263
原创 深入理解js面向对象——创建对象
本博客原文在这 由于js这门语言是解析型语言的特性,导致js中的对象更加灵活,更像是一些 属性的集合,或者说类似于散列表或者字典这些数据结构.所以我们可以在使用的时候随着需求对对象中的属性进行增删改查,这完全是动态的不是编译好的.那么 js中的对象是怎么表示的? js对象的内部表示原理是什么? js创建对象有几种方式? 他们的内部执行过程是什么? 通过这篇文章,可以一探究竟.思维导图如下: #
2017-07-04 15:50:11
4794
原创 单例模式(singleton)
单例模式(singleton) 单例模式singleton单例模式定义如何实现单例模式方式一方式二方式三js中的单例模式惰性单例单例模式定义 保证类只有一个实例，并且全局可以访问到它在前端项目中，还是有很多地方要求一个类只能由一个实例的。比如在一个页面中有登录部分，每次用户点击登录可以弹出对话框，再一次点击还是这个对话框，当然除了会有很多方法处理这个需求，比如加遮罩层、或
2017-06-22 19:22:03
786
原创 适配器(adapter)模式在JS中实践
适配器(adapter)模式 定义 将一个类（对象）的接口（方法或者属性）转化成另外一个接口以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。 换句话说，就是我用我的接口，但是还是用你的服务。举个例子： 有一天你从香港买来一个iphone8，但是香港的插头要比大陆地区的插头大一些，你回到家之后发现在现有的屋子环境下找不到合适的插口能够插入这个插头
2017-06-02 10:18:15
7852
4
原创 创建对象的几种方式
在javascript中，所有对象的创建都是基于原型的。在js中任意的对象都有一个内部属性[[Prototype]]。这个属性的值只能是object或者是null。对象有这个内部属性的目的就是为了实现继承，或者更明确的说实现属性（方法）的复用。所以说创建一个对象的关键就是确定[[prototype]]的值。一般情况下，如果创建了一个对象什么属性也没有那么这个对象的原型就是Object.protot
2017-04-11 18:25:20
4939
原创 里氏替换原则（LSP）
一、为什么需要LSP先看一个例子，有一个下载类，需要将要下载的file 保存在硬盘中。 <script>//硬盘类function HardDisk () { this.save = function (file) { console.log('硬盘正字保存 '+file); }}//下载类function Download ...
2017-04-09 19:33:21
621
原创 [] == false,和!![] == false结果为什么不一样？探究 == 本质
console.log([] == false, !![] == false);// true falseconsole.log([] === false, !![] === false);// false falseconsole.log([] == []);// falsevar a = [];console.log(a == !!a);//fasle先解析[] == f
2017-04-08 16:38:29
10227
原创 webkit资源加载
在浏览器整个渲染过程中，资源获取这一过程无疑是最消耗时间的，同时浏览器内核也通过了各种方式去减少事件，比如资源加载多线程、并发下载资源、DNS预处理、缓存资源、缓存网络请求等。下面介绍从用户输入URL到得到资源发生了什么，但是这个过程也是粗略的解读，对于详细的过程以及高性能的部分要去，相信《http 权威指南》可能会给你满意的答案。 在浏览器中对于每一种资源比如HTML、js、CSS、...
2017-04-07 18:16:03
943
原创 webkit内核渲染过程概述
由于资源加载过程和网络模块都可以多并发多线程的执行，所以可以请多个URL没有必要等到上一次url执行完毕之后在处理下一个URL，但即便如此也是需要一个url缓存的以便于应对多并发的情况。经过资源加载和网络模块之后，由于在整个渲染过程中，这个模块是非常慢的，只至于能把这一部分的优化做好可能对整个网络提升至关重要。当得到用户输入的url之后，就会请求资源加载模块进行资源加载，同时这个模块依
2017-04-07 16:04:38
1119
原创 我是这么理解设计和模式的
以下完全是我个人的理解，毕竟我项目经验不是很丰富，未免对一些概念理解有偏差，请多多斧正。 现代一个软件开发无论是遵循敏捷开发也好都是不断迭代的，之所以迭代是因为在开发过程中出现了很多问题，但是最重要的一个因素就是需求的不断变化，这个需求可能是增加的新功能或者是原来需求行为的改变。 在软件开发过程中如何保证在面向对象设计中更好的去迎合这种需求不断变化因素呢？也就是在...
2017-04-07 12:32:25
356
原创 使用var、let、const声明变量
一、使用var声明变量1、使用方法通过var关键字可以一次声明一个变量或者多个变量，同时可以为声明的变量赋初始值。但是变量的声明和初始值并不是在同一时间执行的,在执行初始值之前这些声明的变量的值为undefined。'use strict';var x = 12, y = x;2、声明变量与非声明变量区别变量声明定义的时候无论出现在代码的什么位置，都会在执行代码之前，将声明的变量添加到当前
2017-04-05 21:56:44
1873
原创 面向对象的javascript系列文章（3）继承——代码重用
javascript中如何实现继承 1.1类式继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>类式继承</title></head>
2017-03-27 15:07:01
353
原创 面向对象的javascript系列文章（2）封装——信息隐藏
封装是为了实现在分析层面分离关注点的行为，目的是为了达到信息隐藏。 一、封装是分离关注点的一种实现方式 对于一个复杂的系统来说，经过抽象之后，可以清楚的看到一个层次结构。对于每一层的抽象，都是由多个模块组成的，这些模块之间互相通信以便于为了上一层的抽象提供服务。一般来说，我们对于研究的每一层抽象，都是先在这个问题空间中找到与某个模块相关的所有特性...
2017-03-26 22:00:12
652
原创 面向对象的javascript系列文章（1）接口——是一个标准委员会
在面向对象开发中，接口确实是一个特别抽象的名词，加上一些语法的赘述,“醉了~”有木有。一般在java中对于接口的定义会是这样的：Java接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为（功能）。（来源于百度百科别打我，但是人家说的有错？）这个定义完全就是在说怎么去创建使用一个接口，接...
2017-03-25 20:30:38
1117
原创 Sublime Text常用命令
选择类Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。Ctrl+Shift+
2017-03-22 11:17:39
1130
1
原创 git 常用命令笔记
初始化git init git config git clone [url]设置贡献者 name email git config –global user.name git config –global user.email 查看所有配置项 git config –list查看当前状态 git status 查看提交历史 git log git reflog添加gi
2017-03-22 11:15:38
472
原创 javascript中关于浮点数不精确问题解决方案
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>精确度</title></head><body><script>var FloatOper = (function(){ // 表达式处理函数 var FloatOper = function(s){
2017-03-22 11:01:47
511
原创 深入理解函数内部原理（6）——函数的内部方法call、apply、bind
call和apply这两个方法都是打破了解析器在函数调用时创建执行环境时赋值this绑定的时候的内部规则，直接通过Function内置标准类型的prototype属性中的两个方法call和apply进行明确的声明this的值。 但是这里的call是自定义的用户可以使用的可以编程的，还有任何一个函数都有内置属性[[Call]]，这两者不同。后者内部原理性的调用，创建执行环境的。 具体表述下call
2017-03-08 21:22:31
3150
原创 深入理解函数内部原理（5）——闭包
什么是闭包其实通过前面几篇博客系统的介绍了函数的定义调用执行过程之后，带现在应该可以隐隐约约的感觉的闭包的存在了。 什么是闭包呢？我的理解就是 函数定义的时候的作用域链在函数调用的时候依然有效，这就是闭包。 那么js内部是怎么实现的呢？还记得函数对象有一个内部属性是[Scope]吗？挡在函数创建的时候，这个内部属性背赋一个值，这个值就是函数所在的执行环境的此法环境也就是说外部的作用域，对于具名的
2017-03-08 15:02:49
751
原创 深入理解函数内部原理（4）——通过new操作符调用构造函数
以new Experssion(args) 过程一:先确定是否是一个构造函数 先解析Experssion比姑且通过getValue方式取得该值F，通过判断这个值F是否是一个对象，并且这个对象F是否具有Construct内部方法，如果是的话证明是一个函数，否则抛出一个TypeError异常。过程二:调用函数内部方法[Construct] 这个方法中分为如下几个过程： （1）创建一个空的对象ob
2017-03-08 11:05:22
1032
原创 深入理解函数内部原理（2）——对一个函数实例进行深入的分析
在阅读本博客之前先阅读： 深入理解函数之函数定义、调用、解析、执行 解剖http://blog.csdn.net/wmaoshu/article/details/60469571 本博客是使用一个例子来对这个博客的进行说明例子如下：<script>"use strict";var scope = "global scope";var o = {"checkscope":(functio
2017-03-07 15:40:00
1626
原创 深入理解函数内部原理（3）——动态的this
在阅读本博客之前先阅读： 深入理解函数之函数定义、调用、解析、执行 解剖http://blog.csdn.net/wmaoshu/article/details/60469571 深入理解函数之对一个函数实例进行深入的分析本博客主要是深入讨论下js中this相关的东西。JS中this是什么正如在前面博客 执行环境 http://blog.csdn.net/wmaoshu/article/detai
2017-03-07 11:48:12
568
1
原创 深入理解函数内部原理（1）——函数定义、调用、解析、执行
在阅读本博客之前先阅读： 执行环境： http://blog.csdn.net/wmaoshu/article/details/60466990 引用规范类型：http://yanhaijing.com/es5/#80 本系列博客主要说一下一个函数从定义到调用到解析到执行的过程，以便于更好的理解后续介绍的闭包、this等概念。先介绍内部原理，然后通过一个实例说明一下这个原理。然后是一些对这个原
2017-03-05 17:38:37
3680
1
原创 执行环境
执行环境：执行环境是一个内置规范类型的对象（这种对象不能被程序所使用，仅仅是为了维护执行程序所产生的），这个对象与源代码文本中每一个可执行代码区域相关联（比如全局代码、函数代码、eval代码）。程序每当解析器开始进入一个可执行代码区域执行的时候，解析器就会创建一个和这个可执行代码区域相关的执行环境，并且将这个执行环境push到一个逻辑栈中。当把这个可执行代码区域的程序执行完毕之后，这个执行环境会从逻
2017-03-05 14:29:50
1034
原创 javascript代码为什么运行这么慢？
Js之所以比起c++慢，是因为js是一个解析型无类型的语言，而c++等是编译型的静态类型的语言。编译型的语言是在编译的时候就确定了每一个变量的位置、类型、偏移量。但是js语言是一边执行一边确定变量的位置和类型的，大家也都知道，程序的执行本质上就是对一些数据的操作，这会带来严重的性能损失。下面像是所以下这两种语言在处理代码的时候的过程，从中可以发现不同之处。 c++代码执行class class1
2017-02-21 19:14:10
2137
原创 为什么javascript会有两个表示“没有”的类型呢？
Js中有两个表示“没有”这一概念的基本类型分别是null和undefined，那么他们有什么区别呢？一、历史原因：null是对象，自动转化成0. undefined是原始值，自动转化成NaN。在js语言初期阶段，js是效仿的java语言，在java中null也是一个对象，只不过这个对象表示的是空对象，换句话说，如果一个变量赋值为null，那么这个变量的指针不指向任何对象。这也说明为什么在js中用t
2017-02-21 14:25:03
851
原创 绝对定位实现左右上下自适应布局
绝对定位实现单栏左右自适应上下自适应布局。这里的左右上下自适应布局是依赖于绝对定位的绝对定位的可视化格式模型的。下面就要介绍绝对定位在水平方向和垂直方向上各个参数之间的关系。绝对定位元素的包含块？ 在介绍正式内容之前，先介绍绝对定位即position为absolute元素的包含块。绝对定位元素的包含块是离他最近的position不为static元素的padding框区域，这个元素可以是行内元素或者
2016-12-27 16:57:09
7641
原创 框模型
框模型 盒的content，padding和border区域的背景样式通过生成元素的’background’属性来指定。Margin背景总是透明的存在兼容性问题是： IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。 margin 说明 值
2016-12-26 12:19:53
510
原创 浏览器资源加载过程以及优化
当收到一个资源请求的时候将根据URL创建一个对应于要获得资源的加载器，然后开始对缓存资源进行响应。如果客户端对cached进行了禁用的话，那么将先清空这个资源在缓存中对应的数据，然后进行资源请求（resourceRequest），否则的话就要去缓存池中查找是否存在这个资源。这个缓存池实际是一个html页面，可以在地址栏中输入chrome://view-http-cache/就能得到，从这个页面中可以
2016-12-23 20:16:25
2008
原创 webkit网页渲染过程
资源加载单元： 当用户从地址栏输入URL地址的时候，发起了一个资源请求，这个请求就会通知各种资源加载器，在资源加载过程中用到了浏览器提供的网络功能（比如：建立连接等）和存储功能（cached等）。最终从网络中或者从本地缓存中得到要获得的资源。其实这一部分牵扯到http知识网络知识等，《http权威指南》《计算机网络》可能会对这一部分理解有帮助。（好吧这个寒假哏了他们）解析HTML单元： 在资源加
2016-12-23 18:59:18
784
原创 你真的了解行盒模型吗？
这一篇博客主要讨论的是行盒模型原理性的东西，如果想学习技巧的话可能这篇博客不适合。组成这个行盒模型的成分有不可替换的行内元素、可替换的行内元素、匿名行框、等。所以为了能够讨论明白行盒模型之前先明白行内元素在盒子模型中的表现。进而讨论行盒模型，并且详细的说明了控制行盒模型的几个属性Line-height和vertical-align。详细介绍之前先引入一个问题，请看这个代码。
2016-12-15 10:57:13
2985
原创 BFC
一、BFC是什么？BFC是定义了在正常流中块元素的布局方式。怎么理解，看下面叙述。当一个元素的position声明为static或者是默认状态下，这个元素就会被布局在正常流中。我们知道在根元素也就是html或者body元素中嵌套一个块元素的话，这个块元素就会尽可能的向左和向上的位置进行布局。那么为什么会这样？这是因为这个根元素为这个块元素生成了一个BFC的环境，这个环境决定了这个块元素的布
2016-12-13 17:44:26
527
原创 css属性值得确定（继承，层叠）
当html加载完之后开始进行解析最终生成DOM树，然后与此同时相关的CSS解析器开始对文档中的样式表进行解析以便于生成CSSOM树。然后最终将DOM树和CSSOM树合并成render树在经过布局和绘制等过程最终绘制到浏览器窗口或者其他设备的显示屏上。那么在CSS解析器在解析样式表的过程中属性最终值是怎么确定的？ 确定某个属性的值大致要经过这么几个过程：首先通过从多条匹配规则中根据规则指
2016-12-10 16:38:12
555
原创 TCP任何保证可靠的数据传输？
什么是可靠，所谓的可靠就是说发送方发送的数据到达接收方的时候不会发生错误，不会丢失，不会乱序。在网络层表现看来是这样的，当从运输层传下报文段之后，封装成ip数据报，然后经过复杂的网络传输到目的主机，在传输过程中可能在这个复杂的大网络中发生数据报的分片，丢失的情况。当到达目的主机后，在目的主机的网络层进行对收到的数据报进行拼装，发现这个报文段缺少了一些部分不完整，所以在目的主机的网络层就是吧这个
2016-12-06 21:13:20
3781
原创 TCP建立连接（三次握手）和释放（四次挥手）的详细解释
TCP建立连接（三次握手）和释放（四次挥手）的状态图，接下去所有的文字将描述这个图：在客户端和服务器端还没有建立连接，分别处于closed状态，当要开始建立连接的时候：①到⑥是两个主机建立连接三次握手的过程。⑦到 ⑩是释放连接的过程。① 服务器端会创建一个应用程序，一般情况下运行着welcome socket 程序。该应用进程对应的套接字的标示符为*.443
2016-12-06 16:17:22
1022
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人