浅谈模块化开发

浅谈模块化开发

欢迎访问我的博客，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

前言

前段时间做的项目，其中也用到了模块化编程的思路，所以就想来总结下，方便以后使用，欢迎道友们踩点

什么是模块化

将一个项目按照功能划分，理论上一个功能一个模块，互不影响，在需要的时候载入，尽量遵循高内聚低耦合，关于高内聚低耦合可以看我的另一篇博客ES6中的Symbol中的章节1.4中有对耦合性和内聚性的解释

引入模块化的意义

以往在javascript中，没有明确的模块化的概念，不能够将一个大的项目分成一些相互依赖的小文件，这对于项目的开发就很难受，看看以往我们载入js文件

1 2 3 4 5 6

<script src = '1.js'></script> <script src = '2.js'></script> <script src = '3.js'></script> <script src = '4.js'></script> <script src = '5.js'></script> <script src = '6.js'></script>

1. 这里解释一下src，想必很多人都知道，src相当于下载文档，且当执行src嵌入文件时，下面的程序都不会执行，将src指向的内容嵌入到文档标签所在位置，向更加深入理解移步这里src和href的区别
2. 那么我们理解了src是直接嵌入内容到指定标签之后再去加载很多js文件，就会知道，它会产生很多问题：
   1. 变量冲突，脚本过多，不利于维护等
   2. 必须按照严格的依赖文件顺序
   3. src对文件的加载时必须要将当前src加载的文件加载完成才会执行下面的代码，当过多的脚本载入页面，就增加了页面等待时间，影响用户体验

由于诸如以上的原因，引入模块化的解决方案

CommonJS

请移步我的另一篇博客模块化开发之CommonJS规范

AMD 规范

请移步我的另一篇博客模块化开发之AMD规范

CMD规范

请移步我的另一篇博客模块化开发之CMD规范

AMD VS CMD

1. 依赖规范：AMD 依赖 RequireJS，而 CMD 依赖 SeaJS
2. 依赖模块：AMD 是提前执行，CMD 是延迟执行，不过 RequireJS 从 2.0开始，也改成可以延迟执行（根据写法不同，处理方式不同）
3. API职责：AMD 的 API默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一，比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API都简单纯粹

ES6中的Module

请移步我的另一篇博客ES6中Module语法与加载实现

ES6 中的模块与 CommonJS 模块差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
2. CommonJS 模块是运行时加载，其中的require全部下载模块，ES6 模块是编译时输出接口，其中的import可以按需加载

参考文章

• 阮一峰老师的module语法
• 玉伯大大的AMD 和 CMD 的区别有哪些？