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 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM