手写框架核心原理

写作背景 最近在做微前端的事情，因为不太熟悉微前端机制，导致出了一些问题一开始是不知所措的，虽然最后解决了，但是还是一知半解，遂研究其原理。 single-spa的简单使用 知道怎么使用的可以直接跳过

压缩的核心原理其实主要是三个 移除注释 缩短标识符 压缩空白符 一、移除注释 代码解释 这段代码是用来移除 JavaScript 代码中的注释的，使用了两个正则表达式替换： 第一个 .replace(

前言 async await 语法是 ES7出现的，是基于ES6的 promise和generator实现的 generator函数 在之前我专门讲个generator的使用与原理实现，大家没了解过的

简单的一句概括就是： **flexible.js帮我们计算出1rem 等于多少px**。 怎么计算的？ **很简单，就是1rem = 屏幕宽度的1/10**

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 实际上，axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环…

一、首先安装express 安装express是为了示范。 二、创建example.js文件 如代码所示，执行node example.js就运行起了一个服务器。 如下图所示，现在我们决定创建一个属于

第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理redux的时候引入了它。 发现也确实 使得 在对redux的处理上方便了许多，而我为了更好地使用一个组件或者插件，都会去去尝试阅读源码并写成文章 ，这个也不例外。 综上所示，我们难免会觉得 increment 和 re…

遇到这个方法主要是最近在阅读redux，koa 原理 等多次遇到这个方法，为了更好地理解框架原理，于是深入学习了一下compose的实现。 然后也发现这属于函数式编程的东西，发现函数式编程是进击前端进阶的必经之路，因为像其中的纯函数的概念在redux的reducer中也展示得淋…

1. 项目基本准备工作 以这样的方式使用ReactDOM，说明他有render这个方法。 好了，现在我们给每一个 元素打上 一个标记 ，这样的话 就可以通过这个标记 辨别出与其他 元素的关系，也可以直接通过这标记找到该元素了。 4. 重构render方法 默认传入的elemen…

useState可以在函数组件中，添加state Hook。 调用useState会返回一个state变量，以及更新state变量的方法。useState的参数是state变量的初始值，初始值仅在初次渲染时有效。 更新state变量的方法，并不会像this.setState一样…

当一个react项目组件层级越来越深，页面越来越多的时候，数据在各个组件层级和页面之间传递的需求就会比较多，很多变量也需要做成可全局管理的。在这个时候，redux和react-redux的使用就很有必要了。它们能帮助我们很方便的进行项目全局性的数据管理。 下面，就写一下我自己对…

二是，函数体内部使用yield语句，定义不同的内部状态（yield在英语里的意思就是“产出”）。 g函数呢，有四个阶段，分别是'a','b','c','ending'。 g()并不会执行g函数，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是迭代器对象（Iter…

1. 定义整体结构 2. 实现Promise构造函数 3. 实现then方法 4. 实现Promise.resolve 1. 定义整体结构 通过上面的注释可以知道。不管是Promise原型对象上的方法还是Promise函数对象上的方法 ，它们的执行结果都将返回一个Promise…

install方法的作用是将store这个实例挂载到所有的组件上，注意是同一个store实例。 Store这个类拥有commit，dispatch这些方法，Store类里将用户传入的state包装成data，作为new Vue的参数，从而实现了state 值的响应式。 现在我们…

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 下面分别使用 hash 和 history 两种实现方式回答上面的两个核心…

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

并初始化用户传入的参数options，我们先假设用户传入的options是只有data属性和el属性的。 到这里我们实现的是new MyVue的时候，通过_init方法来初始化options， 然后通过initData方法将data挂到vm实例的_data上去了，接下来，我们要…

2. 实现Promise构造函数 家喻户晓的是，每个promise都有一个状态可能为pending或resolved，rejected。因此需要添加个status，此外，当我们这样使用Promise的时候， 会把promise对象的status改为resovle，并且把valu…