ES6模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。

模块化的优势有以下几点:

1) 防止命名冲突

2) 代码复用(把功能代码封装成一个文件 对外暴露一个接口)

3) 高维护性

模块功能主要由两个命令构成: export 和 import。

 export 命令用于规定模块的对外接口

 import 命令用于输入其他模块提供的功能

  1. 暴露方式:

m1

//分别暴露

export let school = 'sgg';

export function teach(){

    console.log('我们')

}

m2

//统一暴露

let school = 'sgg';

function findJob(){

    console.log('我们')

}

export{school, findJob}

m3

//默认暴露

export default {//default后面跟上要暴露的数据 可以是数字 字符串或对象(居多)

    school:'atguigu',

    change:function(){

        console.log('women');

    }

}

导入方式:

        //引入m1.js模块内容

        import * as m1 from "./m1.js";

        console.log(m1);

        //引入m2.js模块内容

        import * as m2 from "./m2.js";

        console.log(m2);

        //引入m3.js模块内容

        import * as m3 from "./m3.js";

        console.log(m3);

        m3.default.change(); //默认暴露要通过default来调用方法

引入语法:

//1.通用的导入方式

        //引入m1.js模块内容

        import * as m1 from "./m1.js";

        console.log(m1);

        //引入m2.js模块内容

        import * as m2 from "./m2.js";

        console.log(m2);

        //引入m3.js模块内容

        import * as m3 from "./m3.js";

        console.log(m3);

        m3.default.change();

       

//2.解构赋值方式

        import {school,teach} from './m1.js'

        console.log(school);

        console.log(teach);

        import {school as guigu,findJob} from './m2.js'

        console.log(guigu);

        console.log(findJob);

        import {default as m3} from './m3.js'//不能把default当做名字 要取别名

        console.log(m3);

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

        import m3 from "./m3.js";

        console.log(m3);

使用es6模块化的两种方式:

  1. 直接在标签里写
<script type="module">

…………

</script>
  1. 用标签src属性 引入口文件 type=“module”
<script src="./app.js" type="module"></script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值