阅读 89

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

文章分类
后端
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐