前端的路程四之js的模块化

JavaScript模块化

JavaScript模块化的历史

前端模块化的发展

js本身的定位：简单页面设计的支撑–页面的动画、表单的提交。
原本并没有模块化和命名空间基础。
因为js是运行在用户的设备，随着发展用户的设备性能一步一步的高升，这样就催促着前端页面可以有更多的扩展（js模块化需求慢慢增长起来）。

初期：无模块化

1. 开始出现页面有不同的js库（动画库、表单库、各类工具库）
2. 各种功能的js被划分在不同的文件中
3. 不同文件被同一个模板引用（如果有相互依赖需要有固定的引入顺序，例如将自己的js放在最下方去引用其他的js库）

模块化的第一步：js文件划分模块
但是文件划分的话各文件中的变量会相互污染，或者说命名冲突，当项目体量大开发人员多的情况下，就容易产生不利因素

重点来了(面试的点)：在js文件加载的时候有async和defer两个属性,他们分别起到了什么作用

<script src="xxxx" asnyc defer ></script>

常规的script标签，在被解析到的时候立刻停止解析html，并且去下载资源同时执行
async：
在解析html的时候遇到async的script资源，异步下载资源，资源下载完成后立刻执行（阻塞解析）
defer：
异步下载sciprt资源，在解析完html后去执行script资源（不阻塞解析）

这里会衍生一些新问题，或者说面试的追问
问题导向：浏览器渲染原理、同步异步原理、模块化加载原理（后续展开哈哈）

中期：IIFE（匿名自调用函数） （模块化的雏形）

函数本身是拥有自己的作用域的，并且各个函数之间属于作用域隔离的状态，两个函数之间的各个量不会相互污染。
将每一个模块都放在一个IIFE(匿名子调用函数)中，那么这样就解决了命名冲突的问题，其实就是利用函数独立的作用域去实现了模块的隔离。

const moduleA = (function(){
   
	var self = '老王'
	function say(){
   
		console.log('老王的家')
	}
	return {
   
		self,
		say
	}
})()
const moduleB = (function(){
   
	var self = '老李'
	function say(){
   
		console.log('老李的家')
	}
	return {
   
		self,
		say
	}
}