import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。
import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。
注意:此功能目前无法在任何浏览器中实现。它在许多转换器中实现,例如 Traceur Compiler , Babel , Rollup 或 Webpack。
.png)
语法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";
导入模块的多个成员。以下代码会将foo和bar都添加到当前作用域。
import {foo, bar} from "my-module";
导入整个模块的内容,其中一些被显式命名。
以下代码将myModule,foo,bar插入到当前作用域。注意,foo和myModule.foo是完全相同的,bar和myModule.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
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本支持 | 未实现[2] | 未实现[1] | 未实现 | 未实现 | 未实现 |
| 特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本支持 | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
[1] 查看 bug 568953.
[2] 查看 Chromium bug 1569
[3] "启用实验性JavaScript功能" 标记的背后
[4] See Safari Technical Preview 21 版本注释
import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语。的更多相关文章
- 模块的四种形式、 import和from...import、 循环导入问题、模块的搜索路径、 python文件的两种用途
目录 模块的四种形式 模块 模块的四种形式 import和from...import 循环导入问题 模拟问题的发生: 解决方案 模块的搜索路径 Python文件的两种用途 模块的四种形式 Nike推荐 ...
- Python3 第五周大纲(模块,导入方法、import本质,导入优化,模块的分类)
1.定义: 模块:逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能,本质是.py结尾的文件) 2.导入方法 import module_name,module_name2,...... ...
- Python中的import语句
Python中的import语句是导入一个文件,这条语句主要做三件事: 1 通过一定的方式,搜寻要导入的文件: 2 如果需要,就编译这个文件: 3 运行这个文件 但是,需要注意的是,所有这三个步骤,都 ...
- Python中from … import …语句
from - import -语句可以让你从模块中导入一个指定的部分到当前模块
- Python-学习-import语句导入模块
简单的学习一下调用外部的模块文件. 在Python中,模块是一种组织形式,它将彼此有关系的Pyrhon 代码组织到一个个独立的文件当中,模块可以包含可执行代码,函数,和类或者是这些东西的组合. 当我们 ...
- Python import语句导入模块语法[转]
Python import语句导入模块语法 社区推荐:掘金是国内最活跃的技术社区,我们每日有优质Python开发实例分享,海量python开源库推送.来掘金,和更多懂技术的小伙伴交流. pytho ...
- 模块(import语句,from...import语句,_name_属性)
1, 什么是模块? 模块就是一系列功能的集合体 模块分为四个通用的类别: 1), 使用python编写的.py文件(*****) 2), 已被编译为共享库或DLL的C或C++扩展 3), 把一系列模块 ...
- python import 导入两个模块同时有同一名称的方法如何调用 ?
from moudule import *(这种方法不推荐) 一般不推荐使用"from 模块 import"这种语法导入指定模块内的所有成员,因为它存在潜在的风险. 比如同时导入 ...
- 模块之字节编译的.pyc文件---from.import语句
字节编译的.pyc文件输入一个模块相对来说是一个比较费时的事情,所以Python做了一些技巧,以便使输入模块更加快一些.一种方法是创建 字节编译的文件 ,这些文件以.pyc作为扩展名.字节编译的文件与 ...
随机推荐
- maven 知识点2
maven 命令: table th:first-of-type { width: 500px; } table th:nth-of-type(2) { } 命令 含义 mvn help:effect ...
- Vuejs项目的Webpack2构建优化
最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...
- requestAnimationFrame 提高动画性能的原因
与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...
- 【android】adb常用命令
ADB常用命令: [adb help]获取帮助 [adb get-serialno]获取设备串号 [adb -s <serialNumber> <command>]给特定设备发 ...
- msp430学习笔记-时钟及延时函数
引用:http://blog.chinaunix.net/uid-24343357-id-3271380.html MCLK默认时钟源是DCOCLK,SMCLK默认时钟源也是DCOCLK,DCOCLK ...
- php 目录操作
1.打开文件: opendir("文件名称"); 2.读取文件:readdir("文件名称"); <?php $dirname="phpMyAd ...
- php的zend引擎执行过程 一
1. Zend引擎主要包含两个核心部分:编译.执行: 执行阶段主要用到的数据结构: opcode: php代码编译产生的zend虚拟机可识别的指令,php7有173个opcode,定义在 zend_v ...
- Android自动化测试中AccessibilityService获取控件信息(1)
Android自动化测试中AccessibilityService获取控件信息(1) 分类: android自动化测试2014-03-24 15:31 3455人阅读 评论(16) 收藏 举报 and ...
- ELK高可用搭建---Elasticsearch配置(1)
########################ElasticSearch#######################环境:192.168.125.200 elasticsearch+logst ...
- appium+python自动化43-微信公众号webview操作
前言 上一篇已经解决切换到微信公众号的webview上了,但是定位webview上元素的时候一直提示找不到,打印page_source也找不到页面上的元素,这个问题困扰了一整天,还好最后找到了原因, ...