import 命令用于输入其他模块提供的功能

使用 export 命令定义了模块的对外接口以后，其他JS文件就可以通过 import 命令加载这个模块了。

//main.js
    import {firstName, lastName, year} from './profile';//加载 profile.js 文件，并从中输入变量

    function setName(element) {
        element.textContent = firstName + '' + lastName;
    }
    //使用 as 关键字,将输入的变量重命名
    import { lastName as surname } from './profile';
    //from 指定模块文件的位置,可以是相对路径也可以是绝对路径 .js 后缀可以省略,如果只是模块名,必须又配置文件告诉 JS 引擎该模块的位置
    import {myMethod} from 'util';
    //import 命令具有提升效果,会提升到整个模块的头部并首先执行
    foo();
    import { foo } from 'my_module';
    //import 是静态执行,所以不能使用表达式和变量,只有在运行时才能得到结果的语法结构.
    //报错
    import { 'f' + 'oo' } from 'my_module';
    //报错
    let module = 'my_module';
    import { foo } from module;
    //报错
    if (x === 1) {
        import { foo } from 'module1';
    } else {
        import { foo } from 'module2';
    }
    //仅仅执行 lodash 模块，但不会输入任何值
    import 'lodash';
    //多次重复执行同一 import 语句，只会执行一次 
    import 'lodash';
    import 'lodash';
    //import 语句是 Singleton 模式       
    import { foo } from 'my_module';
    import { bar } from 'my_module';
    //上面两行相当于下面这一行
    import { foo, bar } from 'my_module';

模块的整体加载

除了指定加载某个输出值,还可以使用整体加载(星号*)来指定一个对象,所有输出值都加载在这个对象上.

import * as circle from './circle';

本作品采用《CC 协议》，转载必须注明作者和本文链接