zoukankan      html  css  js  c++  java
  • Export与import命令

    模块功能主要由两个命令构成:exportimport

    • export命令用于用户自定义模块,规定对外接口;
    • import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。

    1export

    ES6允许将独立的JS文件作为模块,允许一个JavaScript脚本文件调用另一个脚本文件。

    现有profile.js文件,保存了用户信息。ES6将其视为一个模块,里面用export命令对外部输出了三个变量。

    // profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export {firstName, lastName, year};

    2、import

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

    // main.js
    import {firstName, lastName, year} from './profile';
    function sfirsetHeader(element) {
    element.textContent = firstName + ' ' + lastName;
    }

    上面代码属于另一个文件main.jsimport命令就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

    如果想为输入的变量重新取一个名字,import语句中要使用as关键字,将输入的变量重命名。

           import { lastName as surname } from './profile';

           ES6支持多重加载,即所加载的模块中又加载其他模块。

    3、export default

    为加载模块指定默认输出,使用export default命令。

    // export-default.js
    export default function () {
    document.write('foo');
    }

    上面代码是一个模块文件export-default.js,它的默认输出是一个函数。

    其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'

    上面代码的import命令,可以用任意名称指向export-default.js输出的方法。需要注意的是,这时import命令后面,不使用大括号。

  • 相关阅读:
    OSPF
    【今日CS 视觉论文速览】 24 Jan 2019
    【今日CS 视觉论文速览】Wed, 23 Jan 2019
    【今日CS 视觉论文速览】 21 Jan 2019
    【Processing学习笔记】安装与入门
    【今日CS 视觉论文速览】Part2, 18 Jan 2019
    【今日CS 视觉论文速览】Fri, 18 Jan 2019
    【今日CS 视觉论文速览】Thu, 17 Jan 2019
    【今日CS 视觉论文速览】Part2, 16 Jan 2019
    【今日CS 视觉论文速览】Wed, 16 Jan 2019
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/7838005.html
Copyright © 2011-2022 走看看