三种前端模块化规范 前端模块规范有

说到模块化，不可否认这已经成为了前端开发的一个共识，而本人在开发中也逐渐接受了模块化这种理念，并且深深滴体会到模块化开发的好处。为啥这么说呢？来看一段简单的代码：（不使用模块化）

这是在未使用模块化之前经常可以见到的一种现象：把一堆js放在body底部，可是你知道吗?这种方式存在两个很大的问题：

1，root.js,tree.js,leaf.js这三者从上到下的顺序不能乱，因为leaf依赖tree，而tree又依赖root，顺序一变就跑不通了；

2，如果我是一个新手或者接盘侠，拿到leaf.js的时候，我知道它要依赖tree.js，但是我知道tree.js其实是依赖root.js的吗？也许root.js又要依赖别的js才能跑得起来呢？

模块化这时候就出现了，正是为了拯救这种js文件之间不确定的依赖关系而来。

　　AMD规范

说到这个规范，现在用的人已经是少之又少了，这个规范的基石在于，你要在html文件中先引入一个require.js，就好像你用jQuery的语法就要先把jQuery.js加载进来一样。引进这个讨厌的require.js之后，在一堆js文件中，分为三类：

第一类：单纯的define()，由于在require.js中，对于资源的引用（也就是资源作为参数传入）一定要先define，再require/define，这类负责纯定义；

第二类：有参数的define(["其他定义好的的js"])，在这类中，把其他define好的js引用进来，同时自己又再define另外一个东西，承担着双重职责；

第三类：单纯的require(["其他定义好的的js1","其他定义好的的js2",...]),在这一类，只需负责专心引用资源，可以引用很多资源。

怎么样？是不是感觉贼麻烦。需要全局定义函数，又要引用什么require.js，怒弃之。

CMD规范

其实CMD与AMD规范并没什么本质的区别，区别在于他们对依赖模块的执行时机处理不同。虽然两者都是异步加载模块，但是AMD依赖前置，js可以方便知道依赖模块是谁，要依赖什么js那就先加载进来，至于你要依赖这些js来干吗得先等着，等我加载完了资源再商量；而CMD就近依赖，需要使用这个依赖模块时，我再加载进来用。

这就好比什么呢？就好像我今晚要看5集三国演义。AMD是先打开五个窗口，分别是1~5集，都缓冲着先，反正等下每集我都要看的；CMD则是先打开第一集的窗口，等到我第一集看完了，想看第二集了，就再跳转到第二集。

CommonJS规范

总的来说，以上两种都不是我的菜，现在使用频率最高的，也是大家公认的好的模块化规范，是CommonJS。

CommonJS就很简单了，一个js文件要输出去，只需使用module.export={xxx:你要输出的内容}，而在另外一个js中，你要引用什么，就通过var xxxx=require("xxxx")引用进来就行了，这玩意并不是异步加载模块，而是同步一次性加载出来。个人感觉，这个规范可以说有些不错，甚至用“666”来形容它也丝毫不虚，推荐大家用这规范。

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！