JS基础之模块化
- JS模块化
- 模块化
- 前端发展
- 什么是模块?
- 怎么定义模块化
- IIFE匿名函数自调用
- IIFE模式增强
- 模块化的好处
JS模块化
模块化
JS DOM操作 代码规范管理的标准
- 不同模块间的管理
- 模块内部自组织 标准
- bundler (模块构建工具) ESNext TS -> ES5
前端发展
生态 ------------------ 诞生时间
Node.js -------------- 2009年
NPM(包管理器) ---- 2010年
requireJS(AMD) — 2010年
seaJS(CMD) ------- 2011年
broswerify ----------- 2011年
webpack ------------ 2012年
grunt ----------------- 2012年
gulp ------------------ 2013年
react ----------------- 2013年
vue ------------------- 2014年
angular -------------- 2016年
redux ----------------- 2015年
vite -------------------- 2020年
snowpack ----------- 2020年
- 09年Nodejs出现
- 10年 npm 包管理器出现
- 10 年 requireJS amd async module definition 异步模块定义出现
- 11年 CommonJS 出现
- 11年 browserify 浏览器化
- webpack grunt gulp 构建工具,解决代码编码之后的标准化的产物
- 13 14年VDOM react vue
- 跨端
- vite snowpack truopack bun
…
- 对外:封装标准 ,组合
- 对内:私有化 scope 对外自定义接口方法
什么是模块?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起;
- 块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信;
怎么定义模块化
思考:可以从哪方面出发?
闭包、自执行函数等
IIFE匿名函数自调用
匿名函数自调用(闭包)
- 作用:数据私有化,外部只能通过暴露的方法操作
- 编码:将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口
IIFE问题:
- 依赖顺序问题
- 代码可维护性问题
//index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">myModule.foo()myModule.bar()console.log(myModule.data)//undefined不能访问模块内部的数据myModule.data = 'xxxx'//不是修改的模块内部的datamyModule.foo()//没有改变
</script>//module.js文件
(function(window){let data = 'www.baidu.com';//操作数据的函数function foo (){//用于暴露的函数console.log(`foo is : ${data}`);}function bar(){//用于暴露有函数console.log(`bar is : ${data}`);otherFun();//内部调用}function otherFun(){//内部私有的函数console.log('otherFun()')}window.myModule = {foo,bar}//ES6写法
})(window);
最后得到的结果:
foo is : www.baidu.com
bar is : www.baidu.com
otehrFun()
undefined
foo is : www.baidu.com
IIFE模式增强
这就是现代模块实现的基石:
引入JQuery库
// module.js文件
(function(window, $) {let data = 'www.baidu.com'//操作数据的函数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)// index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">myModule.foo()
</script>
模块化的好处
- 避免命名冲突(减少命名空间污染);
- 更好的分离,按需加载;
- 更高的复用性;
- 高可维护性;
好啦这期我们就到这里啦,我们下期聊聊【模块化规范】