使用 import 和 export 实现模块化

John Doe
2019-09-09

在es6 之前，前端是使用RequireJS或者seaJS实现模块化，RequireJS是基于AMD规范的模块化库，而像seaJS是基于CMD规范的模块化库，两者都是推进前端模块化的工具。

现在es6自带了模块化，也是js第一次支持module。

现代浏览器对模块支持程度不同，目前都是使用babelJS、或者Traceur转化为兼容es5版本的js代码。

es6 模块化的基本规则或特点

  1. 每个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；
  2. 每一给模块内部声明的变量都是局部变量，不会污染全局作用域；
  3. 模块内部的变量或者函数可以通过export导出；
  4. 一个模块可以导入别的模块；

下面列出几种常用的import和import的基本语法

  • 第一种导出方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // lib.js file
    let bar = 'StringBar';
    let foo = 'StringFoo';
    let fn0 = function () {
        console.log('fn0');
    }
    let fn1 = function () {
        console.log('fn1');
    }
    export {bar, foo, fn0, fn1}

    // main.js
    import {bar, foo, fn0, fn1} from './lib' // 经过结构赋值了
    console.log(bar+ '_' + foo)  // StringBar_StringFoo
    fn0();  // fn0
    fn1();  // fn1

  • 第二种导出方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // lib.js file
    let obj0 = {};
    let fn0 = function () {
        console.log('fn0');
    }
    export { fn0 as foo, obj0 as bar};

    // main.js file
    import {foo, bar} from './lib.js'
    foo(); // fn0
    console.log(bar); // {}

  • 第三种导出的方式

    1
    2
    3
    4
    5
    6
    7
    8
    // lib.js file
    export let foo = () => {console.log('fnFoo')
    ;return 'foo';}, bar = 'stringbar';

    // main.js
    import {foo, bar} from 'lib.js'
    console.log(foo()) // fnFoo
    console.log(bar) // stringbar

  • 第四种导出的方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // lib.js file
    export function fn0() {
        console.log('fn0')
    }
    export defult {}

    // main.js
    import o, {fn0} from 'lib.js'
    console.log(o) // {}
    console.log(fn0()) // fn0
 上一页

git