标签：

1.如何搭建ES6的webpack开发环境？

安装Node环境
node -v // 10.14.1

安装NPM环境
npm -v // 6.4.1

安装babel
npm install @babel/core babel-preset-es2015 babel-preset-latest

创建.babelrc文件
npm install babel-cli -g
babel --version
babel ./src/index.js // 测试babel的编译结构

Webpack---模块化工具安装
npm install webpack babel-loader --save-dev // 安装webpack，babel-loader

配置webpack.config.js

配置package.json中的scripts

运行n npm start

1.1 常见错误

0x01产生原因 babel-loader和babel-core版本不对应所产生的， babel-loader 8.x对应babel-core 7.x babel-loader 7.x对应babel-core 6.x 1.2 安装环境注意事项

这里的安装的版本必须是@babel/core,否则会出现版本不兼容的错误

建议先安装webpack，然后安装loader

2.谈一下JS的模块化？

最开始的时候JS是没有模块化的

AMD（Async module define）成为标准，require.js（CMD--common-module-define）

前端打包工具，使得nodejs模块化可以被使用 (Grunt, Gulp, Webpack……)

ES6的出现，想统一现在所有的模块化标准

nodejs（服务器端）积极支持，浏览器（需要打包为ES5/4）尚未统一

可以自造库lib，但是不要自造标准

2.1 rollup的使用

功能单一，可集成，可扩展

rollup + gulp的结合

安装
npm install rollup rollup-plugin-node-resolve roll-up-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev

配置 .babelrc

配置 rollup.config.js

修改 package.json scripts

运行命令：npm start

2.2 rollup特点

rollup功能单一，webpack功能强大

参考设计原则和《Linux/Unix设计思想》

工具要尽量功能单一，可以继集成，可扩展

可以使用gulp + rollup（主流框架VUE和React使用的就是rollup进行模块化的）

3.class和JS普通构造函数的区别？ console.log(typeof MathHandle, typeof MathHandle.prototype.constructor); // function function // 1. 构造函数的原型里面默认会有一个constructor属性，这个属性的值等于这个构造函数本身 console.log(MathHandle === MathHandle.prototype.constructor) // true console.log(MathHandle.prototype); // 2. 所有实例的隐式原型__proto__和这个构造函数的显示原型prototype是相同的 console.log(m.__proto__ === MathHandle.prototype); // true console.log('-------------------------------------------------------------') console.log(typeof MathHandler, typeof MathHandler.prototype.constructor) // 'function' console.log(MathHandler === MathHandler.prototype.constructor) // true console.log(MathHandler.prototype); console.log(mm.__proto__=== MathHandler.prototype);

[!NOTE]

class 在语法上更加贴合面向对象的写法

class 实现继承更加易读，易理解

更加易于些java等后端语言的使用

class【本质】还是语法糖，实际上还是使用的是prototype

4. 写实现一个Promise?

先看看Promise是怎么用的

new MyPromise((resolve, reject) => { setTimeout(() => { resolve(1) }, 0) }).then(value => { console.log(value) })

在Promise的构造器中传入一个函数，这个函数有两个参数 resolve和reject，这两个参数都是Promise的回调函数，不需要自己写，在需要的时候调用就可以了，他们分别是成功的回调resolve和失败的回调reject。

4.1 简易版 Promise

第一步，先来搭建构建函数的大体框架

const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn){ const that = this that.state = PENDING that.value = null that.resolvedCallbacks = [] that.rejectedCallbacks = [] // 待完善 resolve 和 reject 函数 // 待完善执行 fn 函数 }

首先创建三个常量用于表示状态，对于经常使用的一些值应该通过常量来管理，便于开发及后期维护

在函数体内部首先创建常量that，因为代码可能会异步执行，用于获取正确的this对象

一开始Promise的状态是 pending

value 变量用于保存resolve或者reject中传入的值

resolvedCallbacks和rejectedCallback用于保存then中的回调，因为当执行完Promise时状态可能还是等待中，这时候应该把then中的回调保存起来用于状态改变时使用

第二步，完善resolve和reject函数，添加在 MyPromise 函数体内部

function resolve(value) { if(that.state === PENDING) { that.state = RESOLVED that.value = value that.resolvedCallbacks.map(cb => cb(that.value)) } } function reject(value) { if(that.state === PENDING){ that.state = REJECTED that.value = value; that.rejectedCallbacks.map(cb => cb(that.value)); } }

首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态

将当前状态更改为对应状态，并且将传入的值赋值给 value

遍历回调数组并执行

第四步，实现如何执行 Promise 中传入的函数了

try { fn(resolve, reject) } catch (e) { reject(e) }

实现很简单，执行传入的参数并且将之前两个函数当做参数传进去

要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 reject 函数

第五步，实现较为复杂的 then 函数。

then函数是在Promise构造器中成功状态下调用的resolve方法的回调。