ES6中的模块化
模块化:将大的项目文件,拆成多个小的,然后再组合起来
好处:
1、不同模块里,相同命名不冲突
2、代码复用
3、高维护性
模块化的规范
es6中的命令
import (引入)
export (输出)
=======模块化输出语法汇总=====
<script type="module">//用import 必须是type="module"类型 //import对应的文件需要是http的,可以使用live-server //会出现跨域,可以使用chrome设置跨域处理 //引入a import * as A from 'http://127.0.0.1:8080/a.js' console.log(A.name) //张华1 //引入a2 import * as A2 from 'http://127.0.0.1:8080/a2.js' console.log(A2.name) //张华2 //引入a3 import * as A3 from 'http://127.0.0.1:8080/a3.js' console.log(A3.default.name) //张华3</script>
对应的s中的内容
a.js
image.png
a2.js
image.png
a3.js
image.png
=======模块化引入语法汇总=====
//1、用*引入(export 和 export default 都可以)
import * as A from 'http://127.0.0.1:8080/a.js'; // console.log(A)
//2、使用花括号
import {name,smail} from 'http://127.0.0.1:8080/a2.js'; // console.log(name,smail) //别名 import {name as a1Name,smail as a1Smail} from 'http://127.0.0.1:8080/a.js'; // console.log(a1Name,a1Smail) import {default as A3} from 'http://127.0.0.1:8080/a3.js'; // console.log(A3)
//3、简写(只针对 export default)
import A33 from 'http://127.0.0.1:8080/a3.js'; console.log(A33)
=======针对vue项目模块化引入的思考=====
项目中index.js中
image.png
index.js相当于单页面应用的入口js文件,在默认引用index.js中 script标签设置的type 是 module
作者:浅浅_2d5a
链接:https://www.jianshu.com/p/b141de20b725
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。