一些你可能不熟悉的JS知识点总结(3)

// AMD define(['./a', './b'],function(a, b){ // 模块加载完毕可以使用 a.do(); b.do(); }); // CMD define(function(require, exports, module){ // 加载模块 var a = require('./a'); });

CommonJS

CommonJS最早是Node在使用，目前可以在Webpack中见到它。

// a.js module.exports = { a: 1 } // or exports.a = 1; // 在b.js中可以引入 var module = require('./a'); module.a // log 1

难点解析：

// module 基本实现 var module = { id: 'xxx', exports: {} } var exports = module.exports; // 所以，通过对exports重新赋值，不能导出变量

ES Module

ES Module 是原生实现模块化方案。

// 导入模块 import xxx form './a.js'; import { xxx } from './b.js'; // 导出模块 export function a(){} // 默认导出 export default {}; export default function(){}

ES Module和CommonJS区别

CommonJS支持动态导入，也就是require(${path}/xx.js),ES Module不支持

CommonJS是同步导入，因为用于服务器端，文件都在本地，同步导入即使卡住主线程影响也不大。而ES Module是异步导入，因为用于浏览器，需要下载文件，采用同步导入会对渲染有很大影响

CommonJS在导出时都是值拷贝，就算导出值变了，导入的值也不会改变。如果想更新值，必须重新导入一次。但是ES Module采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟导出值变化

ES Module 会编译成 require/exports 来执行的

手写简单版本的Promise

const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function MyPromise(fn) { const _this = this; _this.state = PENDING; _this.value = null; _this.resolvedCallbacks = []; _this.rejectedCallbacks = []; // resolve函数 function resolve(value) { if (_this.state === PENDING) { _this.state = RESOLVED; _this.value = value; _this.resolvedCallbacks.map(cb => cb(_this.value)); } } // rejected函数 function reject(value) { if (_this.state === PENDING) { _this.state = REJECTED; _this.value = value; _this.rejectedCallbacks.map(cb => cb(_this.value)); } } // 当创建对象的时候，执行传进来的执行器函数 // 并且传递resolve和reject函数 try { fn(resolve, reject); } catch (e) { reject(e); } } // 为Promise原型链上添加then函数 MyPromise.prototype.then = function (onFulfilled, onRejected) { const _this = this; onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v; onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r; } if (_this.state === PENDING) { _this.resolvedCallbacks.push(onFulfilled); _this.rejectedCallbacks.push(onRejected); } if (_this.state === RESOLVED) { onFulfilled(_this.value); } if (_this.state === REJECTED) { onRejected(_this.value); } return _this; } // 测试 new MyPromise(function (resolve, reject) { setTimeout(() => { resolve('hello'); }, 2000); }).then(v => { console.log(v); }).then(v => { console.log(v + "1"); })

这篇文章就介绍到这了，需要的朋友可以参考一下。