浅谈模块化开发

浅谈模块化开发

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

前言

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

什么是模块化

将一个项目按照功能划分,理论上一个功能一个模块,互不影响,在需要的时候载入,尽量遵循高内聚低耦合,关于高内聚低耦合可以看我的另一篇博客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延迟执行,不过 RequireJS2.0开始,也改成可以延迟执行(根据写法不同,处理方式不同)
  3. API职责AMDAPI默认是一个当多个用CMDAPI 严格区分,推崇职责单一,比如 AMD 里,require 分全局 require 和局部 require,都叫 requireCMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API简单纯粹

ES6中的Module

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

ES6 中的模块与 CommonJS 模块差异

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

参考文章

本文标题:浅谈模块化开发

文章作者:王工头

发布时间:2019年01月31日 - 17:42:34

最后更新:2019年01月31日 - 23:11:24

原始链接:https://qqqww.com/浅谈模块化开发/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------