javascipt如疯似魔,对于我这个自学菜鸟来说呢一直也是一知半解。
js的模块化一直也是糊里糊涂,一直照猫画虎,幸亏现在es6出了正规的模块加载,有必要认真学习。
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
// ES6模块 import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。
ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。
var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export { firstName, lastName, year };
上面代码是profile.js文件,保存了用户信息。ES6 将其视为一个模块,里面用export命令对外部输出了三个变量。
export命令除了输出变量,还可以输出函数或类(class)
通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
另外,export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
最后,export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下一节的import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了 ES6 模块的设计初衷。
import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。虽然能改写但以后查错特难,尽量不要。
模块的整体加载,用*代替,如上面的改为
浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性。
如
ES6 模块也允许内嵌在网页中,语法行为与加载外部脚本完全一致。
jq举例