主页

架构入门

面向服务架构富客户端、客户端-服务器模式、基于 ESB 企业服务总线的 SOA 服务导向架构、microservices architecture 微服务架构,微服务架构是循着这条演进路线发展而来的。客户端-服务器模式可用于解释现行的很多架设,如 hsf 服务即包含客户端和服务端,此外还有微服务架构中的配置中心;redis 消息服务;sql 服务器和应用服务器的关系也是客户端-服务器模式。基于 E

前端模块化机制

前端模块化规范有 AMD、CMD、CommonJS、ES2015 规范: AMD 模块化规范:requirejs 为其主要实现。 CMD 模块化规范:seajs 为其主要实现。 CommonJS 模块化规范:作为CommonJS 规范的一部分,nodejs是其较常见的实现。 ES 2015 模块化规范:作为es 官方规范的一部分。 对于 AMD、CMD,本文尝试解读 requirejs、sea

node 命令行工具

示例简单的命令行工具一般按照以下流程编写: package.json 文件中添加 bin 属性,指定命令的名称,如 “bin”: { “create-app”: “bin/create-app.js” }。 bin/create-app.js 文件中添加 #!/usr/bin/env node,指定这是一个使用 node 执行的命令行工具。 使用 commander.js 编写 bin/crea

电商后台建模

系统建模系统建模是对软件系统的抽象,滤除了对细节的关照,通常需要包含如下内容: 上下文模型:说明系统在上下文环境中有怎样的构成,边界如何。上下文模型并未说明各系统的交互关系。 业务过程模型:说明系统中某个业务人工或自动化的处理过程,并交代各系统在该业务过程中的交互行为。可使用 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 引擎就会为该过程创建执行上下文,并将该执行上下文压入执行栈中。执行上下文也称为执行环境,包含函数的私有作用域、父级作用域、参数、作用域中

react scheduler 再解析篇

顾名思义,scheduler 用于完成调度工作。 主流程任务队列scheduler 使用 Heap 堆存放任务队列。每个任务在进入 Heap 堆前,会根据 sortIndex、id 属性进行优先级排序。它首先比较 sortIndex 值,值越小,优先级越高;其次以相同的规则比较 id(即比较任务的创建顺序)。依循优先级的高低,scheduler 采用位运算取中位节点的方式交换任务在 Heap 堆中