前端模块化标准“ES6 Modul总结“

- 日理万妓 2022-11-06 05:53 122阅读 0赞

**由于js文件中的全局变量可以相互调用，在多文件多变量中，容易将未知的已定义的变量重复值，因此模块化的 “分而治之” 的思想有了前景意义。**

#### 常用的模块化标准：Common.js、Es6 Modul、AMD、CMD’UMD。 ####

#### 模块化的出现，避免了变量的污染和命名冲突，使依赖更容易管理。 ####

## ES6 Moudl ##

*在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。*

1.  **export**

export * from 'module'; //重定向导出 不包括 module内的default
    export {  name1, name2, ..., nameN } from 'module'; // 重定向命名导出
    export {  import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出
    
    export {  name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出
    export {  variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出
    
    export let name1 = 'name1'; // 声明命名导出 或者 var, const，function， function*, class
    
    export default expression; // 默认导出
    export default function () {  ... } // 或者 function*, class
    export default function name1() {  ... } // 或者 function*, class
    export {  name1 as default, ... }; // 重命名为默认导出

1.  **import**

// 命名导出 module.js
    let a = 1,b = 2
    export {  a, b }
    export let c = 3
    
    // 命名导入 main.js
    import {  a, b, c } from 'module'; // a: 1 b: 2 c: 3
    import {  a as newA, b, c as newC } from 'module'; // newA: 1 b: 2 newC: 3
    
    
    // 默认导出 module.js
    export default 1
    
    // 默认导入 main.js
    import defaultExport from 'module'; // defaultExport: 1
    
    
    // 混合导出 module.js
    let a = 1
    export {  a }
    const b = 2
    export {  b }
    export let c = 3
    export default [1, 2, 3]

1.  ES6 Module在浏览器中使用。
    
    你需要起一个Web服务器来访问，并且对 script 标签的 type 属性加上 module先定义两个模块

// index.js
    import module from './module.js'
    console.log(module) // 123

// module.js
    export default 123
    // 在html中内联调用
    
    
    <script type="module">
      import module from './module.js'
      console.log(module) // 123
    </script>

// 在html中通过 script 的 src 引用
    
    
    <script type="module" src="index.js"></script>
    // 控制台 123