为什么需要模块化

下面主要是看了王元红老师关于vue的视频讲解，归纳出的一些知识点，不太正式，如有问题，请给予指正。

为什么出现了模块化，首先要讲下javascript的发展：

一 、网页开发的早期，js制作作为一种脚本语言，实现一些简单的功能（在html文档中的script之间写）

JavaScript是除了HTML和CSS之外，万维网的核心技术之一。JavaScript支持交互式web页面，是web应用程序的重要组成部分。绝大多数网站都使用它，主要的网络浏览器都有专门的JavaScript引擎来执行它。
它有很多功能：
1、譬如前端初学者一般接触过的，点击按钮，弹出对话框，这类效果单单css+html是做不到的，js可给用户提供更好的体验；
2、可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。譬如下面代码：源代码出处，表单中要你输入电子邮箱而你却输入一个手机号，那么应该给你一个提醒。（当然html5新增的input表单标签也能做到type=“tel”)，但总有你html+css做不到的事情。
3、还有关于cookie，从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。
4、JavaScript 使有规律地重复的HTML文段简化，减少下载时间

<span id="passwordCheckID"></span> <br />手机号码：
<input type="text" id="phoneID" name="phoneNumber" placeholder="请输入中国大陆手机号" onblur="checkPhoneNumber()"/>

//3.当失去焦点时,手机号校验函数
		function checkPhoneNumber(){
//			3.1 获取到phoneID对应的input元素节点和phoneNumber对应的校验span元素节点
	var phoneNode = document.getElementById("phoneID");
	var phoneCheckNode = document.getElementById("phoneCheckId");
//			3.2 定义校验正则
	var phoneReg = /^1[0-9]{10}$/ig;
//			3.3 获取到phoneNumber元素节点的value属性值
	var phoneValue = phoneNode.value;
//			3.4 判断value属性值是否匹配正则并进行相关处理
	if (phoneReg.test(phoneValue)) {
	phoneCheckNode.innerText = "手机号输入成功！";  //当手机号输入成功时候的校验结果
phoneCheckNode.style.color = "green";
			return true;
	} else{
	phoneCheckNode.innerText = "手机号输入失败！请输入中国大陆手机号码";  //当手机号输入失败时候的校验结果
	phoneCheckNode.style.color = "red";
	return false;
			}
		}

二、 随着ajax异步请求的出现，代码量与日俱增（创建js文件，引入html)

客户端需要完成的事情越来越多，出现下面问题：比如全局变量，函数名冲突，依赖关系不好处理。下面详细解释下：

1、为了维护的方便，我们也把不同功能的js抽取出来当做一个js文件，但是当项目变的复杂的时候，一个html页面可能需要加载好多个js文件，而这个时候就会出现各种命名冲突。
2、比如一个js文件里定义了一个flag变量，另一个js也定义了flag变量，会出现变量被全局污染的问题。那么你写的如果这是一个公共类，公共的属性和方法，大家都去修改，谁想修改就去修改，这样就乱了，这样不合理，我们应该统一修改。
3、再比如下面代码，有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

		<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

三、为解决上述问题，继续做出改进，出现了模块化的雏形

在自己的作用域内，把对象 封装一个方法，写一个自执行函数， 外部不能访问我的内部内容–创建一个自执行函数，这样又出现了问题，当外部函数想用你封装里的变量时，成了代码不可复用的， 不再外部使用。这种做法就是利用匿名函数解决重名问题。

//写一个函数 自执行函数 外部不能访问我的内部内容--创建一个自执行函数
(function(){
var obj={
name:'lisi',
age:20
}
})();
console.log(obj);

综上，如果希望代码可复用，也能使你的js代码成为封闭的作用域，此时模块化起作用了。由于es6之前都还未出现模块化的概念，他们怎么实现这种模块化的功能的呢，见下面代码：在匿名函数内部定义一个对象，给对象添加各种需要暴露在外面的属性和方法，最后将该对象return出去，并用一个module来接收，成为全局可用的变量。这可以说时模块的原始雏形

var module=(function(){
var obj={
name:"lilei",
age:20
}
function setName(value){
obj.name=value;
}
function getName(){
return obj.name;
}
return {
setName:setName,
getName:getName
};
})();
console.log(module.getName());
console.log('---------------------');
module.setName('huahua');
console.log(module.getName());

四、模块化规范

幸运的是，前端模块化开发已经有了许多既有的规范及对应实现方案。常见的规范：CommonJS、AMD、CMD及ES6的Modules。后面会继续介绍es6模块化的实现。