汕头网站开发服务,佛山logo设计公司,郑州网站设计 品牌 视觉,wordpress用户登录显示请求失败export命令
ES6 模块的设计思想是尽量的静态化#xff0c;使得编译时就能确定模块的依赖关系#xff0c;以及输入和输出的变量。
模块功能主要由两个命令构成#xff1a;export和import。export命令用于规定模块的对外接口#xff0c;import命令用于输入其他模块提供的功…export命令
ES6 模块的设计思想是尽量的静态化使得编译时就能确定模块的依赖关系以及输入和输出的变量。
模块功能主要由两个命令构成export和import。export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量外部无法获取。如果你希望外部能够读取模块内部的某个变量就必须使用export关键字输出该变量。下面是一个 JS 文件里面使用export命令输出变量。
//profile.js
//分别暴露
/* export let firstName li;
export let lastName siyu;
export function birthdy() {console.log(hello world);
} *///统一暴露(优先使用)
let firstName li;
let lastName siyu;
function birthdy() {console.log(hello world);
}
export { firstName, lastName, birthdy };
通常情况下export输出的变量就是本来的名字但是可以使用as关键字重命名。
function v1(a, b) {return a * b;
}
function v2(a, b) {return a - b;
}
export { v1 as streamV1, v2 as streamV2, v2 as streamVersion };
重命名后v2可以用不同的名字输出两次。
需要特别注意的是export命令规定的是对外的接口必须与模块内部的变量建立一一对应关系。
//写法一
export let m 1;
//写法二
let p 2;
export { p };
//写法三
let q 3;
export { q as n };
另外export语句输出的接口与其对应的值是动态绑定关系即通过该接口可以取到模块内部实时的值。
export var foo bar;
setTimeout(() {foo baz;
}, 500);
上面代码输出变量foo值为bar500 毫秒之后变成baz。
最后export命令可以出现在模块的任何位置只要处于模块顶层就可以。如果处于块级作用域内就会报错
function fool() {export default bar // SyntaxError}fool()
上面代码中export语句放在函数之中结果报错。
import命令
使用export命令定义了模块的对外接口以后其他 JS 文件就可以通过import命令加载这个模块。
script typemoduleimport { firstName, lastName } from ./profiles.js;function setName() {return firstName lastName;}console.log(setName());/script
上面代码的import命令用于加载profile.js文件并从中输入变量。import命令接受一对大括号里面指定要从其他模块导入的变量名。大括号里面的变量名必须与被导入模块profile.js对外接口的名称相同。
如果想为输入的变量重新取一个名字import命令要使用as关键字将输入的变量重命名。
script typemoduleimport { firstName as first, lastName } from ./profiles.js;function setName() {return first lastName;}console.log(setName());/script
除了指定加载某个输出值还可以使用整体加载即用星号*指定一个对象所有输出值都加载在这个对象上面。
import * as name from ./profiles.js;//可以使用./profiles.js中所有export出来的变量console.log(name.m);
export default命令
从前面的例子可以看出使用import命令的时候用户需要知道所要加载的变量名或函数名否则无法加载。但是用户肯定希望快速上手未必愿意阅读文档去了解模块有哪些属性和方法。
为了给用户提供方便让他们不用阅读文档就能加载模块就要用到export default命令为模块指定默认输出。
// export-default.js
export default function () {console.log(foo);
}
上面代码是一个模块文件export-default.js它的默认输出是一个函数。
其他模块加载该模块时import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from ./export-default;
customName(); // foo
