客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
1. 浏览器支持使用JavaScript 模块依赖于 import 和 export，import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的，但 IE 和旧版本的浏览器不支持，因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。 export 和 import 是成对出现，配合工作的 JS模块化是各种JS框架学习的前提基础 import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出，也可导入/导出类 2. export 导出模块默认导出 一个模块只能有一个默认导出，默认导出的变量只能有一个，且不能有大括号{} 语法为export default 变量名 model.js
function Test1(){
console.log("这是默认导出")
}
function Test2(){
console.log('这是命名导出')
}
export default Test1
批量导出 语法为export {变量名,变量名……}
function Test1(){
console.log("这是默认导出")
}
function Test2(){
console.log('这是命名导出')
}
export {Test1, Test2}
3. import 导入模块默认导入 main.js import Test1 from "./model.js" Test1() 默认导入的重命名 main.js import x from "./model.js"//x就是默认导出的Test1 x() 批量导入 main.js
import {Test1, Test2} from "./model.js"
Test1();
Test2();
批量导入的重命名 as关键字跟一个新名字实现重命名 main.js
import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();
也可在导出时用as关键字重命名 model.js
function Test1(){
console.log("这是默认导出")
}
function Test2(){
console.log('这是命名导出')
}
export {Test1 as x1, Test2 as x2}
应用模块 html <script src="main.js"></script> 4. 创建模块对象使用对象，在as关键字重命名的基础上进一步简单化 import * as Model from "./model.js" Model.x1(); Model.x2(); 5. export import 中转站有时候可以将多个子模块组合到一个父模块中，再由父模块决定导出哪个，这个父模块文件就像是个组合各个模块的中转站 语法为export {变量名} from 模块路径 当前目录结构结构
model.js
function Test1(){
console.log("这是子模块1")
}
export {Test1}
model2.js
function Test2(){
console.log('这是子模块2')
}
export {Test2}
redirection.js
export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"
main.js import * as Model from "./redirection.js" Model.Test1() Model.Test2() html <script src="./main.js"></script> 6. 动态加载模块动态加载模块用于在导入模块时不必预先加载所有模块，可以在需要时使用 import() 作为函数调用，将其参数传递给模块的路径，它返回一个 promise，使用 Promise 对象对模块加载结果操作。 语法为import(动态加载的模块路径) dynamic.js
function TestDy(){
console.log("这是动态模块")
}
export default TestDy
main.js
document.querySelector('.load').onclick = function(){
import('./dynamic.js').then((Model)=>{
Model.default()
})
}
以上就是如何理解JavaScript模块化的详细内容，更多关于JavaScript模块化的资料请关注极客世界其它相关文章！ |
请发表评论