小编给大家分享一下JavaScript模块化的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
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就是默认导出的Test1x()批量导入
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 模块路径
当前目录结构结构
src
index.html
main.js
redirection.js
models
model.js
model2.js
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 TestDymain.js
document.querySelector('.load').onclick = function(){ import('./dynamic.js').then((Model)=>{ Model.default() })}JavaScript的作用是什么
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。
以上是“JavaScript模块化的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
