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