• import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。


    import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。

    注意:此功能目前无法在任何浏览器中实现。它在许多转换器中实现,例如 Traceur Compiler , Babel , Rollup 或 Webpack

    http://caniuse.com/#search=export

    语法EDIT

    import defaultMember from "module-name"; 
    import * as name from "module-name"; 
    import { member } from "module-name"; 
    import { member as alias } from "module-name"; 
    import { member1 , member2 } from "module-name"; 
    import { member1 , member2 as alias2 , [...] } from "module-name"; 
    import defaultMember, { member [ , [...] ] } from "module-name"; 
    import defaultMember, * as name from "module-name"; 
    import "module-name";
    name
    导入将会引用的对象的名称。。
    member, memberN
    将要导入的导出成员的名称。
    defaultMember
    将引用从模块默认导出的名称。
    alias, aliasN
    将引用命名导入的名称。
    module-name
    要导入的模块的名称。

    描述EDIT

    name 参数是将引用导出成员的名称。member参数指定独立成员,而name参数导入所有成员。如果模块导出单个默认参数,而不是一系列成员,name也可以是函数。
    下面提供一些示例说明语法。

    导入整个模块的内容。以下代码将myModule添加到当前作用域,其中包括所有导出绑定。

    import  * as myModule from "my-module";

    导入模块的单个成员。以下代码将myMember添加到当前作用域。

    import {myMember} from "my-module";

    导入模块的多个成员。以下代码会将foobar都添加到当前作用域

    import {foo, bar} from "my-module";

    导入整个模块的内容,其中一些被显式命名。
    以下代码将myModulefoo,bar插入到当前作用域。注意,foomyModule.foo是完全相同的,barmyModule.bar也是如此。

    import MyModule, {foo, bar} from "my-module";

    导入成员并指定一个方便的别名。以下代码将shortName添加到当前作用域。

    import {reallyReallyLongModuleMemberName as shortName} from "my-module";

    导入整个模块 使用模块副作用,不导入任何绑定。

    import "my-module";

    使用别名导入模块的多个成员。

    import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";
    

    导入默认值

    可以导出默认选项,无论是一个对象,一个函数或一个 class。相对地, 也可以使用 import 导入默认成员。

    最简单版本,直接导入默认。

    import myDefault from "my-module";

    也可以使用上面提到的方式导入命名空间。

    import myDefault, * as myModule from "my-module";
    // myModule used as a namespace

    或者导入已有命名的默认项。这两种情况下,默认导入项必须最先声明。

    import myDefault, {foo, bar} from "my-module";
    // specific, named imports

     EDIT

    范例EDIT

    导入一个辅助文件以协助处理 AJAX JSON 请求。

    // --file.js--
    function getJSON(url, callback) {
      let xhr = new XMLHttpRequest();
      xhr.onload = function () { 
        callback(this.responseText) 
      };
      xhr.open("GET", url, true);
      xhr.send();
    }
    
    export function getUsefulContents(url, callback) {
      getJSON(url, data => callback(JSON.parse(data)));
    }
    
    // --main.js--
    import { getUsefulContents } from "file";
    getUsefulContents("http://www.example.com", data => {
      doSomethingUseful(data);
    });

    规范EDIT

    规范状态注解
    ECMAScript 2015 (6th Edition, ECMA-262)
    Imports
    Standard Initial definition.
    ECMAScript 2017 Draft (ECMA-262)
    Imports
    Draft  

    浏览器兼容性EDIT

    特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
    基本支持 未实现[2] 未实现[1] 未实现 未实现 未实现
    特性AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
    基本支持 未实现 未实现 未实现 未实现 未实现 未实现

    [1] 查看 bug 568953.

    [2] 查看 Chromium bug 1569

    [3]  "启用实验性JavaScript功能" 标记的背后

    [4] See Safari Technical Preview 21 版本注释

    https://www.tongbiao.xyz/
  • 相关阅读:
    函数指针的调用方式
    C++构造函数和析构函数顺序
    往android主项目中添加辅助项目
    Qt每次运行都是重新编译问题
    函数参数检验的研究
    动态链接库和静态链接库的区别(未完待续)
    MySQL 查看最大连接数, 当期连接数.
    Linux 命令
    Ext treelist 动态切换TreeStore
    Java 日期加减计算.
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6537922.html
Copyright © 2020-2023  润新知