ES6的模块化（import引入）

先做个前提，新建三个模块JS文件m1,m2,m3，其中m1.js 为分别暴露，m2.js 为统一暴露，m3.js 为默认暴露。接下来进行文件的import引入

1.通用的引入方式，这种方式适合任何暴露方式的引入

1         import * as m1 from './modulesJs/m1.js'

2         import * as m2 from './modulesJs/m2.js'

3         import * as m3 from './modulesJs/m3.js'

只不过调用的时候，默认暴露的m3.js对应引入的m3在调用属性方法的时候多一个default节点。假如调用m3中的say()方法，需要这样去调用 m3.default.say()

2.解构赋值的方式进行引入

 1         // 分别暴露和统一暴露的引入方式没有差异：

 2         import {team,play} from './modulesJs/m1.js'

 3         play() // this is a team of LPL

 4         import { name, dis as d } from './modulesJs/m2.js'

 5         d() // we are the champion

 6

 7         // 默认暴露的解构赋值引入有一定差异，如下

 8         import { default as m3 } from './modulesJs/m3.js' // 此处的default 不能够单独使用，需要取别名

 9         // 这样引入的方式在调用的时候就没有多default节点了，可以直接进行对象属性的调用

10         m3.say() // it is a good team

3.简便形式只针对默认暴露

1 import m3 from './modulesJs/m3.js'

2 m3.say() // 同样也可以直接进行调用输出结果：it is a good team

巴特西

ES6的模块化（import引入）

最新文章

热门文章