使用 ES6 模块

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

前面我们安装了一个 jquery 的包 .. 下面去用一下它 .. 在项目里再去添加一个 js 文件 .. 名字可以是 fruit .. 在这个 js 文件里,我想用一个 jquery 提供的功能, 这里可以使用 es6 提供的模块的写法 .. 去导入 jquery  ... import $ .. 这个 $ 是我给 jquery 这个包起的一个名字 .. 加上一个 from .. 指定一下包的名字 .. 我们可以使用 jquery .. 因为 jspm 在 config.js 里已经配置好了 jquery 这个包的真正的路径 ..

下面再去定义一个函数 .. 名字是 booth ,表示水果摊 .. 在这个函数里,用一个 jquery ... 这里就是 $ .. 找到页面上的 body 标签 .. 设置一下里面的内容 .. text .. 内容就是一些水果 ..

然后我们可以导出这个函数 .. 这样在其它的地方可以导入这个模块,使用它里面提供的功能。 在这个函数的前面,可以添加一个 export .. 意思就是导出 ..

再打开 main.js .. 在这个文件里,我想用一下 fruit.js 里面导出的功能 .. 所以可以在文件的上头导入一下 .. import .. 一组大括号 .. 里面是要导入的东西,这里就是 booth ,如果导入的是默认的东西,这里就不需要使用这组大括号了 .. from .. 当前目录下的 fruit 这个模块 ... 这里不用指定文件的扩展名 ..

下面再使用一下这个来自 fruit 的 booth 函数 ..

import { booth } from './fruit';
booth();

在 index.html 上面,已经使用了 System.import 导入了这个 main.js ... 在页面上会显示一些水果 .. 打开 Network 选项卡 .. 在这里你会看到页面加载了 fruit.js .. 因为在 index.html 导入的 main.js 里面导入了 fruit.js .. 在 fruit.js 里又用到了 jquery .. 所以在这里你也会看到 jquery.js ..

使用 ES6 模块《 前端工具箱 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点