归档: 2020

前端工程体系

我常常执着于部分(比如昏天暗地地解读一个源码),不能跳出来看看整体。这篇文章旨在于整理我所理解的前端工程体系,方便逐步演进顶层观念并指导后续发展。因为见识的有限和理解的不足,这篇文章本难免缺陷和差缪,还望有识予以理解。 我所理解的前端工程体系大致如上图。左半部分以 antd + umi、fusion + 飞冰为参照加以说明,组件库用于提供基础的通用组件。模板工程通常提供了应用层面的最佳实践,因此

前端技术汇总贴

下载立即收藏!这应该是你见过的最全前端下载总结 校验身份证号根据〖中华人民共和国国家标准 GB 11643-1999〗中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。 地址码表示编码对象常住户口所在县(市、旗、区)的行政区划代码。 出生日期码表示编码对象出生的年

react fiber 代码梳理篇

scheduleWork正如 react fiber 搜罗整理篇 已点明的,fiber reconciler 对首次渲染和再次渲染会采用不同的机制。 首次渲染 —— 比如用户侧在浏览器环境调用 ReactDOM.render(rootReactElement, rootDomElement) —— 时,fiber reconciler 首先会通过 createContainer 将根节点 roo

node 命令行工具

命令行工具commander.js、yargs 首先注册命令行参数处理规则,随后通过甄别用户输入(node 环境中的 progress.argv),再从已注册处理规则选取其一应用之。 命令行参数通常被抽象称为子命令、选项。选项部分功能包含设置短标识、默认值、描述,特殊选项为版本号信息。子命令是一类处理操作 action handler 的抽象,其功能包含设置必选参数、可选参数、选项、描述等。选项、

电商后台建模

系统建模系统建模是对软件系统的抽象,滤除了对细节的关照,通常需要包含如下内容: 上下文模型:说明系统在上下文环境中有怎样的构成,边界如何。上下文模型并未说明各系统的交互关系。 业务过程模型:说明系统中某个业务人工或自动化的处理过程,并交代各系统在该业务过程中的交互行为。可使用 UML 活动图绘制。 交互模型:说明系统与外部参与者(用户或其他系统)之间的交互关系,其中传递的数据可通过文本或结构化表

webpack 踩坑录

懒加载Q: 使用 webpack4, @babel/plugin-syntax-dynamic-import 插件后,react-router3 中基于 require.ensure 将不再生效,需要使用如 react-loadable 等加载方式。可参考 react-router的3种按需加载介绍。A: 猜想:webpack 中使用 require.ensure, import() 采用同一套机

图片校验码

纯前端实现纯前端实现图片校验码指的是通过 canvas 绘制随机串的方式。这种方式有极大的弊端:如果随机串在前端生成,那么通过拦截伪造请求仍然能正常调用后台接口;如果随机串由后台发送给前端,那么中间可以被拦截并伪造(当然,可尝试用加密技术进行保护)。因此,这种方式大体适用于学习研究的目的。以下代码段基于 react 验证码组件 整理,其实现也可以参考 在React中随机生成图形验证码。您可以在 c

react fiber hooks钩子篇

前言本文浅述了 react hooks 的执行机制,但在 expirationTime 优先级处理、suspenseConfig 配置、side-effects 执行机制、useContext、useTransition、useResponder 等方面显得力有不逮,并且未采用图文描述的形式。个中错谬,仍需勘正。 react hooks 的使用可参考 React Hooks的体系设计之一 - 分层

react fiber 类组件状态更新篇

前言本文仅在局部层面上解释类组件的状态更新机制,并没有对函数组件的 hooks、fiber 优先级等作说明。 Update 及 UpdateQueueUpdatefiber reconciler 将 fiber 的状态更新抽象为 Update 单向链表: tag:更新类型,UpdateState、ReplaceState、ForceUpdate、CaptureUpdate payload:状态变

js 事件循环

事件循环基本js 是一门单线程非阻塞脚本语言。即便浏览器推出的 web worker 也只允许子线程承担计算任务,而不能操纵 dom 节点(因为主、子线程同时操纵 dom 会造成不一致)。 执行栈可用于解释 js 引擎对同步脚本的处理。即当函数首次被调用时,js 引擎就会为该过程创建执行上下文,并将该执行上下文压入执行栈中。执行上下文也称为执行环境,包含函数的私有作用域、父级作用域、参数、作用域中