天猫商务网站建设目的,公司网站推广是做什么,深圳建站公司开发费用,自己在家开网店怎么开1.Export
模块是独立的文件#xff0c;该文件内部的所有的变量外部都无法获取。如果希望获取某个变量#xff0c;必须通过export输出#xff0c;
// profile.js
export var firstName Michael;
export var lastName Jackson;
export var year 1958;或者用更好的方式该文件内部的所有的变量外部都无法获取。如果希望获取某个变量必须通过export输出
// profile.js
export var firstName Michael;
export var lastName Jackson;
export var year 1958;或者用更好的方式用大括号指定要输出的一组变量
// profile.js
var firstName Michael;
var lastName Jackson;
var year 1958;export {firstName, lastName, year};除了输出变量还可以输出函数或者类class
export function multiply(x, y) {return x * y;
};还可以批量输出同样是要包含在大括号里也可以用as重命名
function v1() { ... }
function v2() { ... }export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion
};JS ES6中export和import详解
1.Export
模块是独立的文件该文件内部的所有的变量外部都无法获取。如果希望获取某个变量必须通过export输出
// profile.js
export var firstName Michael;
export var lastName Jackson;
export var year 1958;或者用更好的方式用大括号指定要输出的一组变量
// profile.js
var firstName Michael;
var lastName Jackson;
var year 1958;export {firstName, lastName, year};除了输出变量还可以输出函数或者类class export function multiply(x, y) {return x * y;
};还可以批量输出同样是要包含在大括号里也可以用as重命名
function v1() { ... }
function v2() { ... }export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion
};
Attention:
export 命令规定的是对外接口必须与模块内部变量建立一一对应的关系
// 写法一
export var m 1;// 写法二
var m 1;
export {m};// 写法三
var n 1;
export {n as m};// 报错
export 1;// 报错
var m 1;
export m;报错的写法原因是没有提供对外的接口第一种直接输出1第二种虽然有变量m但还是直接输出1导致无法解构。
同样的function和class的输出也必须遵守这样的写法。
// 报错
function f() {}
export f;// 正确
export function f() {};// 正确
function f() {}
export {f};Andexport语句输出的接口都是和其对应的值是动态绑定的关系即通过该接口取到的都是模块内部实时的值。
位置export模块可以位于模块中的任何位置但是必须是在模块顶层如果在其他作用域内会报错。
function foo() {export default bar // SyntaxError
}
foo()2.Import命令
export定义了模块的对外接口后其他JS文件就可以通过import来加载这个模块
// main.js
import {firstName, lastName, year} from ./profile;function setName(element) {element.textContent firstName lastName;
}import命令接受一对大括号里面指定要从其他模块导入的变量名必须与被导入模块profile.js对外接口的名称相同。
如果想重新给导入的变量一个名字可以用as关键字
import { lastName as surname } from ./profile;import后的from 可以指定需要导入模块的路径名可以是绝对路径也可以是相对路径 .js路径可以省略如果只有模块名不带有路径需要有配置文件指定。
注意import命令具有提升效果会提升到整个模块的头部首先执行。是在编译阶段执行的
因为import是静态执行的不能使用表达式和变量即在运行时才能拿到结果的语法结构e.g. if…else…
3.module的整体加载
除了指定加载某个输出值还可以用*指定一个对象所有的变量都会加载在这个对象上。
// circle.js。输出两个函数export function area(radius) {return Math.PI * radius * radius;
}export function circumference(radius) {return 2 * Math.PI * radius;
}// main.js 加载在个模块import { area, circumference } from ./circle;console.log(圆面积 area(4));
console.log(圆周长 circumference(14));//上面写法是逐一指定要加载的方法整体加载的写法如下。
import * as circle from ./circle;console.log(圆面积 circle.area(4));
console.log(圆周长 circle.circumference(14));注意模块整体加载所在的那个对象上例是circle应该是可以静态分析的所以不允许运行时改变。
import * as circle from ./circle;// 下面两行都是不允许的
circle.foo hello;
circle.area function () {};4.export default
之前的例子中使用import导入时都需要知道模块中所要加载的变量名或函数名用户可能不想阅读源码只想直接使用接口就可以用export default命令为模块指定输出
// export-default.js
export default function () {console.log(foo);
}其他模块加载该模块时import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from ./export-default;
customName(); // fooexport default也可以用于非匿名函数前。
下面比较一下默认输出和正常输出。
// 第一组
export default function crc32() { // 输出// ...
}import crc32 from crc32; // 输入// 第二组
export function crc32() { // 输出// ...
};import {crc32} from crc32; // 输入可以看出使用export default时import语句不用使用大括号。
*******import和export命令只能在模块的顶层不能在代码块之中。否则会语法报错。
这样的设计可以提高编译器效率但是没有办法实现运行时加载。
因为require是运行时加载所以import命令没有办法代替require的动态加载功能。
所以引入了import()函数。完成动态加载。
import(specifier)specifier用来指定所要加载的模块的位置。import能接受什么参数import()可以接受同样的参数。
import()返回一个Promise对象。
const main document.querySelector(main);import(./section-modules/${someVariable}.js).then(module {module.loadPageInto(main);}).catch(err {main.textContent err.message;});5.import()函数适用场合
1按需加载
button.addEventListener(click, event {import(./dialogBox.js).then(dialogBox {dialogBox.open();}).catch(error {/* Error handling */})
});above import模块在事件监听函数中只有用户点击了按钮才会加载这个模块。
2条件加载
import()可以放在if…else语句中实现条件加载。
if (condition) {import(moduleA).then(...);
} else {import(moduleB).then(...);
}
