ecma6学习知识点(九)模块化

  1. 模块化
    注意:要放到服务器环境
    a)如何定义模块
    export 东西 , 东西可以使对象就可以
    b)如何使用
    import

使用模块

import: 特点
a)import 可以是相对路径,也可以是绝对路径
import ‘https//code.jquery.com/jquery-3.3.1.js’;
b)import 模块只会导入一次,无论你引入多少次
c)import ‘./modules/11.js’ 如果这么用相当于引入文件
d)
export let a = “dsfsdfdsfdsf”;
import {a} from ‘./modules/11.js’ 引入该模块中的a变量
同样可以用别名来引入

test.js
let aa = 1;
	let bb = 2
	export {
		aa as c,
		bb as d,
	}
//则引入方式为
import {c,d} from "../modules/test.js"

as 也可以放在import 的地方起别名

除此之外也可以这样引入
 import * as mode form  "../modules/test.js"
console.log(mode.aa);

import a from "…/modules/test.js"如果用这种方式的话 就要加 default
export default let a = 2;
export 出来的要{}
default 出来的就不用
import a,{cc,dd} from “…/modules/test.js”

1.import 有提升效果 即使写在后面 但是它在执行的时候依然是在前面执行的。
2.导出去的模块如果有定时器造成数据更改的 ,引入的地方在模块更改后其也会更改。
3.默认import是不能写在 if else里面的
只能通过 imprt()动态加载模块
如 
import('‘https//code.jquery.com/jquery-3.3.1.js').then(res = > {
	$("body").style ......
})
可以动态实现在jquery引入完毕之后再执行jquery 代码
优点:按需加载,可以写在if else 中 ,import()是个promise对象。也可以这样写
Promise.all([
	import("./sdfdsf/aa.js"),
	import("./werewr/bb.js")
]).then(([mod1,mode2]) =>{
	console.log(mode1);
	console.log(mode2);
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值