为什么要用 前端模块化
1 最开始的js就是为了实现客户端验证以及一些简单的效果
2 后来,js得到重视,应用越来越广泛,前端开发的复杂度越来越高( 早期,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。 )
3 旧版本的js中没有提供与模块(module)相关的内容
非模块化的写法有很大的缺点:
1.加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长
2.由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
为了解决这两个问题 :
1.实现js文件的异步加载,避免网页失去响应;
2.管理模块之间的依赖性,便于代码的编写和维护。
模块的概念:
1.在js中,一个模块就是实现特定功能的文件(js文件)
2.遵循模块的机制,想要什么功能就加载什么模块
3.模块化开发需要遵循规范
模块化解决的问题:
1 命名冲突 2 文件依赖(加载文件) 3 模块的复用 4 统一规范和开发方式
JS实现模块化的规范:
1.AMD 浏览器端----requirejs
2.CommonJS nodejs---加载模块:require() 导出模块:module.exports = {} / exports = {}
3.ES6 中的 import / export
4.CMD 浏览器端---玉伯(阿里前端大神) -> seajs (目前京东还在用)
5.UMD 通用模块化规范,可以兼容 AMD、CommonJS、浏览器中没有模块化规范 等这些语法
AMD
Asynchronous Module Definition:异步模块定义,浏览器端模块开发的规范
代表:require.js
特点:模块被异步加载,模块加载不影响后面语句的运行