【ES6.0】-详细模块化、export与Import详解

Myth丶恋晨 2024-02-17 09:34 56阅读 0赞

## 【ES6.0】-详细模块化、export与Import详解 ##

#### 文章目录 ####

*  【ES6.0】-详细模块化、export与Import详解
 *   *  一、模块化概述
     *  二、ES6模块化的语法规范
     *  三、export导出模块
     *   *  3.1 单变量导出
         *  3.2 导出多个变量
         *  3.3 导出函数
         *  3.4 导出对象
         *   *  第一种
             *  第二种：
         *  3.5 类的导出
         *   *  第一种
             *  第二种
     *  四、import导入模块
     *   *  4.1 导入整个模块
         *  4.2 导入单个接口
         *  4.3 导入单个接口
         *  4.4 动态导入
         *  4.5 仅为副本作用导入一个模块
         *  五、参考

### 一、模块化概述 ###

JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境。

近年来，考虑提供一种将Javascript程序拆分为可按需导入的单独模块的机制。在ES6.0之前有很多Javascript库和框架已经开始了模块的使用如：CommonJS和基于AMD的其他模块系统如RquireJS以及最新的Webpack和Babel。最新的浏览器也支持原始模块功能。

### 二、ES6模块化的语法规范 ###

在ES6模块中自动采用严格模式。规定如下：

*  变量必须先声明
 *  函数参数不能有同名属性
 *  不能使用with
 *  对只读属性赋值、delete不可删除属性直接报错
 *  不可删除变量delete prop、只能删除属性delete global\[prop\]
 *  evel不会再外层作用域有进入变量
 *  evel和arguments不可重新赋值
 *  arguments不会自动反应函数参数变化
 *  禁止this指向全局
 *  增加保留字：static、interface、protected等

### 三、export导出模块 ###

export语法声明用于导出函数，对象，指定文件的原始值。

export有两种模块导出方式：命名导出与默认导出，命名式导出每个模块可以多个，而默认导出每个模块仅一个。

#### 3.1 单变量导出 ####

export var a=123
    export const b='abc'
    export let c='export demo'

#### 3.2 导出多个变量 ####

var a=123
    const b = 'goyeer'
    let c='goyeer export demo'
    export {
        a,b,c}

#### 3.3 导出函数 ####

函数的导出与变量导出类似也需要添加export\{函数名\}

var add=function(a,b){
        
        return a+b
    }
    export {
        add}

#### 3.4 导出对象 ####

面向对象语言中一切皆对象，所以对象是一种数据类型，export也可以完成对象导出。对象的导出一般有两种写法，下面演示对象的导出：

##### 第一种 #####

export default{
        
        trueName:'李磊',
        engName:'tom',
        age:19
    }
    //导入obj.js类
    //import obj from './obj.js'
    //console.log(obj)

##### 第二种： #####

var person = {
        
        firstName:"Bill",
        lastName:"Gates",
        age:62,
        eyeColor:"blue"
    }
    export default person

#### 3.5 类的导出 ####

类的导出与对象的导出类似，都是利用export default关键字，同样有两种写法：

##### 第一种 #####

// person.js
    export default class Person{
        
        firstName = 'Bill'
        lastName  = 'Gates'
        age       = 62
        eyeColor  = 'blue'
        show(){
        
            console.log(this.firstName)
        }
    }

**类的导入**

import Person from './person.js'
    let person = new Person()
    person.show()

##### 第二种 #####

class Person{
        
        firstName = 'Bill'
        lastName  = 'Gates'
        age       = 62
        eyeColor  = 'blue'
        show(){
        
            console.log(this.firstName)
        }
    }
    //导出类
    export default Person

**导入类**

import person from './person.js'
    let person=new Person()
    person.show()

### 四、import导入模块 ###

import语法用于从已导出的模块，脚本中导入函数、对象、指定文件（或模块）的原始值。

import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入或默认式导入。

import的语法更require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他高级语言风格一致。

#### 4.1 导入整个模块 ####

//导入module01的所有接口、类并制定模块名称为module01
    import * as module01 from './modules/module01.js'
    //使用时，需要通过新的模块module01,来访问导入文件中的成员
    module01.show()

#### 4.2 导入单个接口 ####

// 导入单个接口
    import {
        myExport} from '/modules/my-module.js';
    
    // 导入多个接口
    import {
        foo, bar} from '/modules/my-module.js';
    
    // 导入接口，并制定别名，编码时更容易使用
    import {
        fun01 as funName} from '/modules/my-module.js';

#### 4.3 导入单个接口 ####

// 导入默认接口
    import myDefault from '/modules/my-module.js';
    
    // 导入默认接口，也可以和其他导入方式一起使用
    import myDefault, * as myModule from '/modules/my-module.js';
    import myDefault, {
        foo, bar} from '/modules/my-module.js';

#### 4.4 动态导入 ####

静态导入在页面加载时就会被导入，有时模块太大且不会在页面加载时使用，可以使用动态导入，在需要用的时候在导入模块。

// 方法一：
    import('/modules/my-module.js')
      .then((module) => {
        
        // Do something with the module.
    	});
    
    // 方法二：
    let module = await import('/modules/my-module.js');
    
    // 方法三：动态导入默认接口
    (async () => {
        
      if (somethingIsTrue) {
        
        const {
         default: myDefault, foo, bar } = await import('/modules/my-module.js');
      }
    })();

import标准用法是静态模块的导入，会使用所有被导入的模块，在加载时被编译（做不到按需编译，降低页面首次加载的速度）。在一些场景中，可以根据条件导入模块或者按需导入模块，此时可以使用import的动态导入功能替代静态导入。动态导入应用场景有如下场景：

1.  当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它。
2.  当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。
3.  当被导入的模块，在加载时并不存在，需要异步获取。
4.  当导入模块的说明符，需要动态构建。
5.  当被导入的模块有副作用（这里说的副作用，可以理解为模块中会直接运行的代码），这些副作用只有在触发了某些条件才被需要时。（原则上来说，模块不能有副作用，但是很多时候，你无法控制你所依赖的模块的内容）

> 请不要滥用动态导入（只有在必要情况下采用），静态框架能更好的初始化依赖，而且更有利于静态分析工具发挥作用。

#### 4.5 仅为副本作用导入一个模块 ####

整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。这将运行模块中的全局代码，但实际上不导入任何值。

import "/modules/my-module.js";

#### 五、参考 ####

https://blog.csdn.net/u014724048/article/details/128938477

[import - JavaScript | MDN (mozilla.org)][import - JavaScript _ MDN _mozilla.org]

[import - JavaScript _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import