从基本使用 -> 部署 -> 框架源码分析 -> 手写框架，带你全方位刨析 single-spa 框架

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

若需要用于商业用途，请经本人同意。 尊重每一位认真写文章的前端大佬，文末给出了本人思路的参考文章。 能够访问到这篇文章的同学，初衷是想知道如何编写JavaScript的模板引擎。为了照顾一些没有使用过模板引擎的同学，先来稍微介绍一下什么叫模板引擎。 上面代码中，我使用了ES6的…

本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。

解析：通过window.customElements方法可以创建自定义元素，里面的define方法就是用来指定自定义元素的名称，以及自定义元素对应的类。 这里有一个细节，自定义元素中间一定要用中划线隔开，不然是无效的。 这时候在这个类里面就可以定义元素里的所有内容了，这和Vue…

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

Vue、React、Angular这一类前端框架的出现使得我们不再需要去手动操作Dom了，回想曾经的JQuery时代，与DOM打交道是最为频繁也最为头疼的，比如我前端入门时期收获最多的书之一就是JavaScript DOM编程艺术。 现在我们和DOM直接打交道的机会少的多了，但…

我们在Webpack基础篇介绍了多种loader和plugin以及每种的用途；那么他们两者在webpack内部是如何进行工作的呢？让我们手写一个loader和plugin来看看它内部的原理，以便加深对webpack的理解。 因此我们就来尝试写一个less-loader和styl…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…