建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

commander.js 7.0.0 版本的核心代码就一个文件 index.js，2200 多行代码，代码的注释比较丰富，代码可读性也是不错的，感兴趣的同学可以通读一下。

从前我总觉得脚手架是个很高大上的东西，好像得牛叉🐂一点的人才写的出来，可望而不可即。其实并不是因为困难使我们放弃，而是因为放弃才显得困难（这是个好词好句🙈）。只要你肯花个一天半天的时间✊，也能写出属于你自己的脚手架。 早前脚手架这个词是从 vue-cli 这里认识的，我们通…

当我们用 node 去运行 index.js 的时候，会得到这样的结果 hello, water! I'm 28 years old.。但是当我们直接在 html 中引入该 index.js 文件，控制台是会报错的，就像下面这样（相信大家都应该见过）： 那很显然了，浏览器已经很…

1. 背景 中台覆盖了多线业务，自然对应的不少后台系统，考虑日后到项目应用，满足业务的快速迭代，无论是技术版本升级、敏捷开发、可复用性和可维护性等。 我们需要针对当下的痛点，切合定一些强制规范和推荐规范。 主要分为两大模块：强制规范和推荐规范，大致如下图。 2. 如何落地？ 开…

每当有人问起：你们的公司的这款应用用户体验怎么样呀？访问量怎么样？此时，你该怎么回答呢？你会回答：UV、PV 巴拉巴拉，秒开率、FP、TTI 巴拉巴拉。 那么，这些数据是哪里来的呢？显而易见，这些数据都来自前端监控系统。 当今时代，是一个快节奏的时代，应用的性能极大影响着用户的…

BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。 在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button…

写过 Vue 的同学肯定体验过， .vue 这种单文件组件有多么方便。但是我们也知道，Vue 底层是通过虚拟 DOM 来进行渲染的，那么 .vue 文件的模板到底是怎么转换成虚拟 DOM 的呢？这一块对我来说一直是个黑盒，之前也没有深入研究过，今天打算一探究竟。 Vue 3 发…

一般情况下都是通过重写js原生事件然后拿到错误信息，比如ajax请求，通过重写xhr、fetch事件来截取接口信息，所以我们需要优先编写一个易于重写事件的函数来复用。 所有的请求第三方库都是基于xhr、fetch二次封装的，所以只需要重写这两个事件就可以拿到所有的接口请求的信息…