ps做网站像素大小,凡科手机网站建设开发,响应式网站建站,柳州十一冶建设集团网站ES6 模块学习记录
ES6#xff08;ECMAScript 2015#xff09;模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码#xff0c;模块可以在不同的文件之间进行组织和重用。
基本特征
默认导出#xff08;Default Exports#xff09;#xff1a;每个…ES6 模块学习记录
ES6ECMAScript 2015模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码模块可以在不同的文件之间进行组织和重用。
基本特征
默认导出Default Exports每个模块可以有一个默认导出。 命名导出Named Exports除了默认导出模块还可以有多个命名导出。 导入Imports可以导入其他模块的导出内容。 静态结构ES6模块的结构是静态的这意味着导入和导出的绑定是在编译时确定的而不是在运行时。
export 与 import
模块导入导出各种类型的变量如字符串数值函数类。
导出的函数声明与类声明必须要有名称export default 命令另外考虑。 不仅能导出声明还能导出引用例如函数。 export 命令可以出现在模块的任何位置但必需处于模块顶层。 import 命令会提升到整个模块的头部首先执行。
export 导出 // 写法一// 导出变量
export const name ES6 Module;// 导出函数
export function sayHello() {console.log(Hello!);
}// 导出类
export class MyClass {constructor() {console.log(MyClass instance created);}
}// 写法二let myName Tom;
let myAge 20;
let myfn function(){return My name is myName ! Im myAge years old.
}
let myClass class myClass {static a yeah!;
}
export { myName, myAge, myfn, myClass }as 的用法重新定义导出的接口名称隐藏模块内部的变量
export 命令导出的接口名称须和模块内部的变量有一一对应关系。 导入的变量名须和导出的接口名称相同即顺序可以不一致。 用于不同模块导出接口名称命名重复 便可以使用 as 重新定义变量名
方法一
/*-----export [test.js]-----*/
let myName Tom;
export { myName as exportName }/*-----import [xxx.js]-----*/
import { exportName } from ./test.js;
console.log(exportName);// Tom方法二
/*-----export [test1.js]-----*/
let myName Tom;
export { myName }/*-----export [test2.js]-----*/
let myName Jerry;
export { myName }/*-----import [xxx.js]-----*/
import { myName as name1 } from ./test1.js;
import { myName as name2 } from ./test2.js;
console.log(name1);// Tom
console.log(name2);// Jerry**export 与 import 结合使用**/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from methods;
// 将 foo 转导成 default
export { foo as default } from methods;
// 将 default 转导成 foo
export { default as foo } from methods;/* ------- 特点 2 --------*/
export * from methods;import导入import 是静态执行所以不能使用表达式和变量 // 导入命名导出
import { name, sayHello } from ./myModule.js;// 导入所有并重命名
import * as myModule from ./myModule.js;export default 命令
在一个文件或模块中export、import 可以有多个export default 仅有一个。export default 中的default 是对应的导出接口变量。通过 export 方式导出在导入时要加{ } export default 则不需要。export default 向外暴露的成员可以使用任意变量来接收。
//导出默认函数
// myModule.js
export default function myFunction() {// ...
}import myFunction from ./myModule.js;//导出默认类
// MyClass.js
export default class MyClass {// ...
}
import MyClass from ./MyClass.js;//导出默认对象
// myObject.js
export default {key: value
};
import myObject from ./myObject.js;
结合使用 export 和 export default
import myFunction, { myValue, myOtherValue } from ./myModule.js;
