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'//不是修改的模块内部的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>