webpack 流程解析 (5) module reslove

2021-10-24
阅读 5 分钟
2.9k
上文说道我们拿到了构建modlule的factory,和依赖等关键数据,通过addModuleTree经过factorizeQueue的控制走到了factory.create。这个时候就开始了reslove过程。本文主要分析,NormalModuleFactory 内部 beforeResolve,factorize,resolve, afterResolve 这几个钩子。

webpack 流程解析(4): 开始构建

2021-10-16
阅读 3 分钟
2.1k
这里触发了make钩子注册的回调,还记得我在初始化部分提到的EntryPlugin吗?在这里注册了一个钩子回调,触发了 compilation.addEntry

webpack 流程解析(3) 创建compilation对象

2021-10-11
阅读 4 分钟
2.5k
webpack初始化完成之后,则会通过传入的options.watch来判断是否要开启watch,如果开启watch则会执行watch的流程,如果是run,则会执行run的流程,本系列只关注主线,所以我们直接从run开始,watch感兴趣的同学可以自行研究研究

webpack 流程解析(2):参数初始化完成

2021-10-08
阅读 5 分钟
3.1k
上文说到 webpack 准备好了参数,要创建 compiler对象了。创建完之后,则会执行 compiler.run 来开始编译,本文将阐述 new Compiler 到 compiler.run()中间的过程。整体过程都发生在createCompiler这个函数体内。

webpack 流程解析(1):小弟先帮我看看对不对之 weback-cli

2021-10-07
阅读 1 分钟
2.2k
compiler对象是一个全局单例,它负责把控整个webpack打包的构建流程。本文将会介绍在 new compiler 之前,webpack做了什么

大拇指创新实验室月刊(第一期)

2021-06-03
阅读 4 分钟
2.4k
新闻速报Babel发布7.14.0Node.js发布16.0.0Bootstrap 5发布ES2021/ES12新特性Chrome 89 devtools增加新特性前端生态微信新能力1. 小程序直播新增【智能助理】功能智能助理是由小程序直播与微信对话开放平台联合推出商家运营工具,支持直播间「欢迎语,智能问答,热问追踪、销售线索统计分析」等能力,可有效解决主播面对...

美业微前端的落地

2021-06-02
阅读 8 分钟
6.6k
2020年4月,有赞美业的前端团队历经7个月时间,完成了美业PC架构从单体SPA到微前端架构的设计、迁移工作。PPT在去年6月份就有了,现在再整理一下形成文章分享给大家。

react hooks源码深入浅出(二)

2021-02-04
阅读 8 分钟
4.1k
react hooks源码深入浅出(一)react hooks源码深入浅出(二)在第一篇文章里我们了解了初次渲染过程react内部的处理流程和执行机制,接下里继续看看在状态更新阶段react是怎么处理的现在触发demo中onclick事件,也就是执行setCount方法同样从两个基础hook出发useStateuseEffect更新阶段核心流程useState在开始之前我们...

Vue 3 Virtual Dom Diff源码阅读

2020-12-25
阅读 19 分钟
7.4k
Vue3出来一段时间了,对diff算法进行了一波优化。在阅读之前,最好需要了解一些diff算法的基础:1、vNode是什么? 2、为什么需要使用diff算法?传送门:VNode - 源码版

深入理解 JS 中的类型转化

2020-12-10
阅读 2 分钟
1.5k
哪些操作能导致类型转换呢if 条件判断为 false 的值 -> false undefined null 0 '' NaN运算符操作常见的运算符 + - * /+ 比较特殊除了相加之外 还有字符串拼接的含义1)数字和非字符串相加 {代码...} 2)非数字相加 {代码...} valueOf / toString对象的原型链上有 valueOf 和 toString 两个方法 {代码...} symbol[toP...

从零实现一个 promise

2020-12-10
阅读 3 分钟
4.4k
构造函数入参 executor 自执行函数。会在在 new 的时候同步执行,传入 resolve 和 reject 状态扭转函数。自执行函数内部根据异步任务执行结果(成功或失败)调用状态扭转函数,把状态传递给后续的 then。

react hooks源码深入浅出(一)

2020-12-09
阅读 4 分钟
4.6k
react hooks在react 16.8版本推出后就广受好评,因为它很好的解决了旧版本react无法优雅的复用状态逻辑的问题,同时官方说明hooks会向后兼容不存在breaking changes,在项目中更好的无缝接入。

一道打印顺序引发的血案

2020-12-09
阅读 4 分钟
1.3k
对 promise1 来说:Promise.resolve() 会立即执行then(res => console.log(1)).then... 会放入本轮的微任务

有赞美业前端: 持续标准化 Code Review

2020-09-27
阅读 5 分钟
10.6k
关键字:代码质量 团队建设 流程优化一、背景1. 技术栈美业技术团队前端对外的业务项目的主要编程技术栈是:2. 团队架构在构建项目的前期,前端对业务项目按端来划分人员,各端各司其职,各自沉淀。中期随着产品的基本成型,前端团队人员按照业务领域划分成了多个子业务组前端,各组负责4端中对应模块的业务。于是,我们...

走进AST

2020-07-25
阅读 4 分钟
3.2k
在讲之前先简单介绍一下什么AST,抽象语法树(Abstract Syntax Tree)简称 AST,是源代码的抽象语法结构的树状表现形式。平时很多库都有他的影子:例如 babel, es-lint, node-sass, webpack 等等。

关于DNS解析

2020-06-26
阅读 5 分钟
3.8k
域名解析系统,听着还挺费解的,我们知道当我们浏览器输入网址的时候,输入的是一串域名,例如:www.google.com,但是我们在委托我们的操作系统发送消息时,却不是靠域名来找到对应的服务器,靠的的IP地址(这是TCP/IP协议的要求)。这个时候,所需要做的就是通过域名解析,来拿到我们的IP地址。

IP地址的构成、相同网段、网络掩码

2020-06-07
阅读 3 分钟
8.6k
员工A和B就属于相同网段,A与C、B与C就是不同网段。在图中我们可以看到有IP地址和网关两个玩意儿,他们究竟是什么呢?为什么又能来区分相同网段和不同网段?

export default 为何突然没用了?

2020-04-16
阅读 4 分钟
13.5k
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。

redux之redux-thunk和redux-saga

2020-02-22
阅读 3 分钟
2.8k
redux作为状态管理仓库,在我们前端应用中发挥着非常重要的作用,先放一张官方redux flow图片使用middleWare背景:我们知道redux中数据流是同步的,不支持异步action更新或获取数据,但是在实际项目中异步请求数据绝对是高频出现,并且可以说占据了9成以上的业务场景(初始数据列表、获取商品信息、添加购物车等等),因...

happy pack 原理解析

2019-11-18
阅读 14 分钟
11.2k
本质上, happypack 是用通过 js 的多进程来实现打包加速,需要注意的是,创建子进程和子进程和主进程之间通信也是有开销的,当你的 loader 很慢的时候,可以加上 happypack,否则,可能会编译的更慢!

typescript 改造二三事

2019-10-07
阅读 4 分钟
4.2k
最近项目中遇到了这样的问题,接手了一段代码,代码中定义了一个对象 item ,接下来的方法根据 item 内部的某些字段进行一顿 format 操作,问题的关键在于,我接手的时候没有人给我讲这个 item 对象内部都有什么字段,表达什么含义,当代码量足够大的时候,维护性就成了问题,所以就有了在项目中引入 typescript 的故事

nest.js、egg.js、midway,express、koa的区别

2019-09-27
阅读 2 分钟
12.7k
        随着nest.js框架逐渐火起来,对于没有接触过nest的小伙伴可能会疑惑nest是什么?在你了解了nest.js是什么的前提下,你可能会疑惑nest.js与传统的koa、express有什么区别?针对这两个问题,结合了网上的一些文章,做一个简单的总结。        

关于 OKR 的一些方法论

2019-07-08
阅读 4 分钟
12.7k
它是一套管理目标,让目标能落地的工具。 它在硅谷科技公司中广为人知,并被世界各地的许多组织采用。 它可以应用在组织中,也可以应用在个人的生活中,就像一种思考的模式。

BeautyWe.js 一套专注于微信小程序的开发范式

2019-06-10
阅读 10 分钟
6.7k
欢迎来我的博客阅读:BeautyWe.js 一套专注于微信小程序的开发范式 官网:beautywejs.com Repo: beautywe 一个简单的介绍 BeautyWe.js 是什么? 它是一套专注于微信小程序的企业级开发范式,它的愿景是: 让企业级的微信小程序项目中的代码,更加简单、漂亮。 为什么要这样命名呢? Write beautiful code for wechat min...

CSS Injection

2019-06-09
阅读 1 分钟
3.7k
什么是CSS注入 大家对XSS攻击都非常熟悉了,可能很少关注到CSS注入攻击,以下行为有可能受到CSS注入攻击: 从用户提供的URL中引入CSS文件 CSS代码中采用了用户的输入数据 可以看下以下两个例子[链接][链接] 原理 CSS属性选择器让开发者可以根据属性标签的值匹配子字符串来选择元素。 这些属性值选择器可以做以下操作:1....

函数式编程(二)

2019-06-09
阅读 3 分钟
1.7k
高阶函数 满足以下两点的函数: 函数可以作为参数被传递 函数可以作为返回值输出 叫高阶函数,很显然js中的函数满足高阶函数的条件。 函数作为参数: {代码...} 函数作为返回值: {代码...} 高阶函数与函数式编程有什么关系?通过上一篇我们知道函数式编程采用纯函数,那怎么把不纯的函数转化为一个纯函数呢?通过把不纯的...

React 高阶组件使用心得

2019-06-07
阅读 3 分钟
4.3k
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体而言,高阶组件是参数为组件,返回值为新组件的函数。还不了解高阶组件的点这里

区块链笔记(4)用JS写个简单的区块链原型

2019-05-28
阅读 5 分钟
3k
如前所述区块链模型的组成部分,包括区块,区块构成的区块链,以及保存区块链的数据持久层等。一个超简单的UML类图如下:由于我是前端的,业余看了这么久区块链的理论,还是手痒痒谢谢代码,把这个类用JavaScript实现一下。写完之后发现目前阶段,对于区块链原型来说还是太过简单,不过如果说用来做前端面试题,考察下面...

区块链笔记(3)比特币交易的数据和流程

2019-05-25
阅读 11 分钟
6.8k
区块链技术只能用来做关于金融交易的应用么?或许先去了解它有关交易的细节,才能看到是否有其它应用的可能。 1 交易的数据模型 1.1 起因 在此之前,我们关于Bitcoin Core介绍了许多,以及把它当作工具如何使用,现在我们将进一步来研究下区块链中的数据模型。 为什么说将区块和交易当作数据模型来理解非常重要? 我的答...

区块链笔记(2)直观感受比特币

2019-05-02
阅读 3 分钟
2.6k
书接上回区块链笔记(1)基础概念扫盲,我们讨论了关于比特币以及区块链的许多基础概念,可能通过我略带类比的描述,让你初步有了一些概念,但是对于一个比特币到底长什么样?以及如何使用比特币进行交易?可能还不是很清楚,说的直白点就是:听过猪叫,但没吃过猪肉。好吧,那就安排上!