前端模块化的三种规范

这次给大家带来前端模块化的三种规范，前端模块化规范的注意事项有哪些，下面就是实战案例，一起来看一下。

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

　　

　　这是在未使用模块化之前经常可以见到的一种现象：把一堆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”来形容它也丝毫不虚，推荐大家用这规范。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

Vue.js的表单输入绑定

JS的类型值转化为Boolean类型有哪些规则

以上就是前端模块化的三种规范的详细内容，更多请关注其它相关文章！