【JavaScript模块化】1-模块化进化史 清疚 2024-04-03 12:46 23阅读 0赞 ## 模块化进化史教程 ## ### 1.全局function模式 ### * module1.js //数据 let data = 'module1 data' //操作数据的函数 function foo() { console.log(`foo() ${ data}`) } function bar() { console.log(`bar() ${ data}`) } * module2.js let data2 = 'module2 data' function foo() { //与另一个模块中的函数冲突了 console.log(`foo() ${ data2}`) } * test1.html <script type="text/javascript" src="module1.js"></script> <script type="text/javascript" src="module2.js"></script> <script type="text/javascript"> let data = "修改后的数据" foo() bar() </script> > * 全局函数模式: 将不同的功能封装成不同的全局函数 > * 问题: Global被污染了, 很容易引起命名冲突 ### 2.namespace模式 ### * module1.js let myModule = { data: 'module1 data', foo() { console.log(`foo() ${ this.data}`) }, bar() { console.log(`bar() ${ this.data}`) } } * module2.js let myModule2 = { data: 'module2 data', foo() { console.log(`foo() ${ this.data}`) }, bar() { console.log(`bar() ${ this.data}`) } } * test2.html <script type="text/javascript" src="module2.js"></script> <script type="text/javascript" src="module22.js"></script> <script type="text/javascript"> myModule.foo() myModule.bar() myModule2.foo() myModule2.bar() myModule.data = 'other data' //能直接修改模块内部的数据 myModule.foo() </script> > * namespace模式: 简单对象封装 > * 作用: 减少了全局变量 > * 问题: 不安全(因为能直接修改模块内部的数据) ### 3.IIFE模式 ### * module3.js (function (window) { //数据 let data = 'module3 data' //操作数据的函数 function foo() { //用于暴露有函数 console.log(`foo() ${ data}`) } function bar() { //用于暴露有函数 console.log(`bar() ${ data}`) otherFun() //内部调用 } function otherFun() { //内部私有的函数 console.log('otherFun()') } //暴露行为 window.myModule = { foo, bar} })(window) * test3.html <script type="text/javascript" src="module3.js"></script> <script type="text/javascript"> myModule.foo() myModule.bar() //myModule.otherFun() //myModule.otherFun is not a function console.log(myModule.data) //undefined 不能访问模块内部数据 myModule.data = 'xxxx' //不是修改的模块内部的data myModule.foo() //没有改变 </script> > * IIFE模式: 匿名函数自调用(闭包) > * IIFE : immediately-invoked function expression(立即调用函数表达式) > * 作用: 数据是私有的, 外部只能通过暴露的方法操作 > * 问题: 如果当前这个模块依赖另一个模块怎么办? ### 4.IIFE模式增强 ### * 引入jquery到项目中 * module4.js (function (window, $) { //数据 let data = 'module4 data' //操作数据的函数 function foo() { //用于暴露有函数 console.log(`foo() ${ data}`) $('body').css('background', 'red') } function bar() { //用于暴露有函数 console.log(`bar() ${ data}`) otherFun() //内部调用 } function otherFun() { //内部私有的函数 console.log('otherFun()') } //暴露行为 window.myModule = { foo, bar} })(window, jQuery) * test4.html <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="module4.js"></script> <script type="text/javascript"> myModule.foo() </script> > * IIFE模式增强 : 引入依赖 > * 这就是现代模块实现的基石 ### 5.页面加载多个js的问题 ### * 页面: <script type="text/javascript" src="module1.js"></script> <script type="text/javascript" src="module2.js"></script> <script type="text/javascript" src="module3.js"></script> <script type="text/javascript" src="module4.js"></script> > * 一个页面需要引入多个js文件 > * 问题: > > * 请求过多 > * 依赖模糊 > * 难以维护 > * 这些问题可以通过现代模块化编码和项目构建来解决
还没有评论,来说两句吧...