JavaScript 可以让我们去定义模块,就是可以根据应用的需求,把它们分割成不同的小的部分,这些就是我们说的模块。在每个模块里可以导出它需要让其它模块使用的东西,在其它模块里面可以导入这些模块导出的东西,然后就可以在这些模块使用导入的功能了。
现在你想使用 ES6 的模块功能, 暂时需要借助一些其它的工具,比如 jspm 或者 webpack ,这里我用的是 jspm 。
先打开 index.html ,这里我们已经链接了 babel 的一些东西,browser.js ,browser-polyfill.js ,还有 jspm 带的一些东西,system.js ,还有一个配置文件,config.js ..
现在这里还是用的 script 标签链接的 script.js ,我们可以改造一下 .. 注释掉这行代码 .. 输入一组 script 标签 ... 里面用一下 System 的 import .. 导入 script.js ,这里可以不需要指定文件的扩展名 ..
JavaScript 的模块可以单独放在不同的文件里 .. 先去添加一个模块文件 .. 可以把它们放在 modules 这个目录的下面 .. 比如添加一个叫 chef 的模块文件 ..
在这个文件里面,你可以像写正常的 JavaScript 一样 .. 最后只需要把需要导出的东西的前面用一个 export 就行了 .. 比如这里我们可以简单的定义两个变量 ..
let fruit = '柠檬';
let dessert = '蛋糕';
现在如果你想导出 fruit .. 可以在它的前面添加一个 export .. 或者,也可以在文件的底部用一个 export .. 再用一组大括号 .. 里面的东西就是要导出的东西 .. 一个是 fruit .. 逗号分隔一下 .. 再输入一个 dessert .. 可以导出的不只是变量 .. 可以是函数,类 等等 ..
再回到 script.js .. 现在如果想在这个文件里使用 chef.js 里导出的东西,在这里可以用一个 import 去导入 chef 导出的东西 ..
输入 import .. 一组大括号 .. 再指定一下要导入的东西 .. fruit .. 还有 dessert .. 大括号的右边再用一个 from .. 一组引号,引号里面是要导入的东西所在的模块 .. 这里就是 modules 目录下面的 chef.js .. 这里可以不需要指定文件的扩展名 .. 直接用一个 chef ..
下面,我们再控制台上输出这个 fruit 还有 dessert 的值 .. 这里会显示我们在 chef 里面导出的 fruit 还有 dessert 这两个变量的值 ..
使用 import 导入的时候,如果想导入全部的东西,可以这样 .. import * .. 后面加上一个 as .. 然后是一个名字 .. 比如 chef .. 后面仍然是 from modules/chef ..
这样 chef 就会是一个对象 .. 这个对象里会包含在 modules/chef 里面导出的所有的东西 .. 比如要输出 fruit ,可以在它前面加上一个 chef. .. 在 dessert 的前面也要添加一个 chef.
同样会在控制台上正常的输出在 modules/chef 里面导出的 fruit 还有 dessert 的值 ..