JS基础之模块化

JS模块化

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问题：

依赖顺序问题

代码可维护性问题

js 复制代码

//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);

最后得到的结果:

js 复制代码

foo is : www.baidu.com
bar is : www.baidu.com
otehrFun()
undefined
foo is : www.baidu.com

IIFE模式增强

这就是现代模块实现的基石:

引入JQuery库

js 复制代码

// 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>

模块化的好处

避免命名冲突（减少命名空间污染）；

更好的分离，按需加载；

更高的复用性；

高可维护性；

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