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

最新推荐文章于 2024-11-01 18:55:34 发布

原创最新推荐文章于 2024-11-01 18:55:34 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍模块化编程的概念及ES6中模块的使用方法，包括如何定义和导入模块，探讨了不同导入方式的特点及其应用场景。

模块化
注意：要放到服务器环境
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);
})