es6模块化(module)导入(import)和导出(export)

• ​module概念

  • ​基本思想

    1. ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
    2. 需要什么import什么，区别于commonJS需要在运行时才能加载，有区别于require的整体引入。
    3. 需要babel转码！！！

  • ​严格模式

    1. ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
    2. ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

  • ​浏览器加载

    浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

    <script type="mudule" scr="./index.js"></script>

    设置该type相当于给script设置defer属性

    
    

    src路径.js后缀不可省略，需要提供绝对 URL 或相对 URL

• ​export 命令

  • ​export变量

    export var testStr = 'testStr'

    export var testObj = {

    name: 'testObj'

    }

    var testStr2 = 'testStr2'

    var testStr3 = 'testStr3'

    export {

    testStr2,

    testStr3 as testStr3As

    }

    // as改名 导出名为testStr3As

  • ​export函数和类

    export function testFun1 () {

    return 666

    }

    function testFun2 () {

    return 666

    }

    function testFun3 () {

    return 666

    }

    export {

    testFun2,

    testFun3 as testFun3As

    }

  • ​export default 命令

    export default function testFun1 () {

    return 666

    }

    // 也可以使用匿名函数

    export default function () {

    return 666

    }

• ​import 命令

  • ​import单个/多个

    import { testStr1 } from './test1.js'

    import { testStr2, testStr3 } from './test1.js'

    // 引用同一个文件多次，但是只加载一次（优秀）

    import { testStr4 as testStr4As } from './test1.js'

    // as 改名 输入名为testStr4As

  • ​import整个模块

    import './test1.js'

    // 执行test1.js文件程序，但不导入

    import * as test2 from './test2.js'

    // 将test2.js整个用对象的形式导入

  • ​import() 方法

    import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行

    import()：动态加载，返回一个promise对象。

    const importUrl = './test.js'

    import (importUrl).then(test => {

    console.log(test.testFun(1))

    })

    // 这里的参数 test 就是将test.js整个模块的对象

• export import 混合使用

  • ​export从其他地方import的变量

    export { fun1 } from './test.js'

    
    

    // 等效于

    import { fun1 } from './test.js'

    export { fun1 }

    
    

    // 这里的导入和导出相当于转发作用，本文件并不能使用导入的变量

  • ​import定义时的变量无法更改

    import { testStr, testObj } from './test.js'

    //直接改变是不允许的，但是改变对象的属性是允许的，这个写法是及其不推荐的。

    // 最好的处理方法是将输入的变量当成只读变量

  • ​module继承

    // 便是export import共用

  • ​export动态绑定

    // test1.js

    export var testStr1 = 'testStr1'

    setTimeout(() => {

    testStr1 = 'testStr111'

    }, 500)

    
    

    // index.js

    import { testStr1 } from './test1.js'

    setTimeout(() => {

    console.log(testStr1)

    }, 1000)

• ​总结

  • ​使用场景

    1. 按需加载
    2. 条件加载（if）
    3. 动态的模块路径 (promise)

    • ​vue

      1. 组件的导入（常用）
      2. 封装的公共模块（axios、filter）
      3. 第三方插件
      4. css文件导入?
      5. 路由

  • ​注意点

    import() 会加载一个对象模块，作为then的参数。

    import() 可以加载多个，也可以用于async函数中

  • ​demo