这次给大家带来前端模块化的三种规范，前端模块化规范的注意事项有哪些，下面就是实战案例，一起来看一下。
说到模块化，不可否认这已经成为了前端开发的一个共识，而本人在开发中也逐渐接受了模块化这种理念，并且深深滴体会到模块化开发的好处。为啥这么说呢？来看一段简单的代码：（不使用模块化）
这是在未使用模块化之前经常可以见到的一种现象：把一堆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类型有哪些规则
以上就是前端模块化的三种规范的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780578.html
