Web前端进阶之JavaScript模块化编程知识

JavaScript是前端三要素之一，也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门完全摸不着头脑。但只要我们一点一点由基础到进阶的学习，就一定能学好JavaScript。接下来小千就给大家分享Web前端学习进阶中有关JavaScript模块化编程的知识。

模块是实现特定功能的一组方法，模块化是一种规范、一种约束，这种约束会大大提升开发效率。JS模块化思想是将每个JS文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。

模块化需要实现的功能

1.解决命名冲突。当代码达到一定规模，功能很多的时，命名冲突就会出现，模块化可以很好的解决命名冲突的问题。

2.实现依赖管理。当一个页面要加载多个JS并且他们之际有些还有依赖关系，这时候就需要慎重仔细的排列这些JS的顺序，以保证每个组件都能正常运行，而模块化之后就不用为此多费心思。

3.提高复用性和代码可读性。一个功能为一个模块，每个模块相互独立，互不影响，代码组件封装可以重复利用，去除这个模块不影响其它的。

JavaScript模块化发展

闭包与命名空间

这是最容易想到的也是最简便的解决方式，早在模块化概念提出之前很多人就已经使用闭包的方式来解决变量重名和污染问题。这样每个JS文件都是使用IIFE包裹的，各个JS文件分别在不同的词法作用域中，相互隔离，最后通过闭包的方式暴露变量。每个闭包都是单独一个文件，每个文件仍然通过script标签的方式下载，标签的顺序就是模块的依赖关系。

面向对象开发

这种方法只是闭包方式的小改进，约束js文件返回必须是对象，对象其实就是一些个方法和属性的集合。这样的优点：1)规范化输出，更加统一的便于相互依赖和引用;2)使用‘类’的方式开发，便于后面的依赖进行扩展。本质上这种方法只是对闭包方法的规范约束，并没有做什么根本改动。

YUI

雅虎出品的一个工具，模块化管理只是一部分，其还具有JS压缩、混淆、请求合并(合并资源需要server端配合)等性能优化的工具，可谓是现有JS模块化的鼻祖。通过YUI全局对象去管理不同模块，所有模块都只是对象上的不同属性，相当于是不同程序运行在操作系统上。

CommonJs

2009年Nodejs发布，Commonjs发布之后，就成了Node里面标准的模块化管理工具。同时Node还推出了npm包管理工具，npm平台上的包均满足Commonjs规范，随着Node与npm的发展，Commonjs影响力也越来越大，并且促进了后面模块化工具的发展，具有里程碑意义的模块化工具。

AMD和RequireJS

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后(前置依赖)，这个回调函数才会运行。

RequireJs是JS模块化的工具框架，是AMD规范的具体实现。但是有意思的是，RequireJs诞生之后，推广过程中产生的AMD规范。RequireJs的优点：1)动态并行加载js，依赖前置，无需再考虑js加载顺序问题;2)核心还是注入变量的沙箱编译，解决模块化问题;3)规范化输入输出，使用起来方便;4)对于不满足AMD规范的文件可以很好地兼容。

CMD和SeaJs

CMD规范由国内(阿里)诞生，借鉴了Commonjs的规范与AMD规范，在两者基础上做了改进。特点：1)define定义模块、require加载模块、exports暴露变量;2)不同于AMD的依赖前置，CMD推崇依赖就近(需要的时候再加载);3)推崇api功能单一，一个模块干一件事。

SeaJs是CMD规范的实现，跟RequireJs类似，CMD也是SeaJs推广过程中诞生的规范。CMD借鉴了很多AMD和Commonjs优点，同样SeaJs也对AMD和Commonjs做出了很多兼容。

ES6中的模块化

ES6规范中终于将模块化纳入JavaScript标准，从此JS模块化被官方扶正，也是未来JS的标准。ES6中的模块化在Commonjs的基础上有所不同，增加了关键字import、export、default、as、from，而不是全局对象。二者有两点主要的区别：1)CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用;2)CommonJS模块是运行时加载，ES6模块是编译时输出接口。

想了解更多JavaScript模块化知识点，你可以关注小千，后期分享更多知识。

本文来自千锋教育，转载请注明出处。