JS基础之模块化

JS模块化

模块化

JS DOM操作 代码规范管理的标准

1. 不同模块间的管理
2. 模块内部自组织 标准
3. 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年

1. 09年Nodejs出现
2. 10年 npm 包管理器出现
3. 10 年 requireJS amd async module definition 异步模块定义出现
4. 11年 CommonJS 出现
5. 11年 browserify 浏览器化
6. webpack grunt gulp 构建工具，解决代码编码之后的标准化的产物
7. 13 14年VDOM react vue
8. 跨端
9. vite snowpack truopack bun
   …

1. 对外：封装标准 ，组合
2. 对内：私有化 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'//不是修改的模块内部的data
	myModule.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>

模块化的好处

• 避免命名冲突（减少命名空间污染）；
• 更好的分离，按需加载；
• 更高的复用性；
• 高可维护性；

好啦这期我们就到这里啦，我们下期聊聊【模块化规范】