前端知识点

配色方案

本页目录

Module 模块 ​

模块实现的优势 ​

  • 代码抽象
  • 代码封装
  • 代码复用

历史三大规范 ​

  • CommonJs node.js，比如 webpack 中
JS
// a.js
module.exports={ foo , bar}

// b.js
const { foo,bar } = require('./a.js')
// a.js
module.exports={ foo , bar}

// b.js
const { foo,bar } = require('./a.js')
  • AMD require.js
  • CMD sea.js

ES6 Moudule ​

  • ES6 模块内部自动采用了严格模式；
  • ES6 设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量；
  • 由于编译加载，使得静态分析成为可能；

模块功能主要由两个命令构成：

  • export：用于规定模块的对外接口
  • import：用于输入其他模块提供的功能

动态加载 import() ​

动态加载 import() 返回一个 primise

JS
import('/modules/myModule.mjs').then((module) => {  })
import('/modules/myModule.mjs').then((module) => {  })

复合写法 ​

JS
export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };