模块的概念，组建地概念？

1.模块（Model）

一般所指“模块”是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。

根据不一样的关注点，将一个项目的能够共享的部分抽取出来，造成独立的Module，就是模块化。

对于JavaScript来讲，在ES6以前，并无语言内置的模块机制，但咱们用一些方式自制了某种模块机制，像CommonJS / AMD甚至创建了广泛接受的社区标准。虽然它们都是模块机制，但会有一些重大或微妙的差别。故当咱们提到JS模块时，若是没有足够的上下文，有时须要明确是CommonJS module或AMD module或ES6 module。

对于CSS来讲，并无广泛接受的“CSS模块”概念。一个CSS样式表里能够经过@import来引入其余样式表，但咱们一般并不称之为“模块”。多份样式表以cascade机制结合，这和咱们通常编程语言中模块互相调用的方式至关不一样。且CSS的@import语义基本上就是最简单的include，也就是将@import语句替换为导入样式表的内容。而编程语言中的导入模块会在当前做用域导入命名空间、符号等，比简单的include要复杂许多。

有关“CSS模块”的问题，咱们后面还会讨论。

注：在Web标准中，“CSS module”其实指CSS spec自己的模块化。这也是咱们应该避免采用“CSS模块”来指代CSS代码的组织结构的重要缘由。

其实我公司里对“模块”的用法也比较随便。好比咱们有/static/js/modules/目录，其实下面就是一些脚本，并无采用任何一种module规范。再如咱们有/src/modules/目录，下面每一个子目录是业务模块，里面包含了view、controller和相关的各类类。

这里一个是历史因素——目录结构不是我创建的，你们习惯如此，都知道咱们讲的“module”是指业务模块，跟具体编程语言里的module没有直接的关系，只要沟通没有什么障碍，那也没必要改了。不过当咱们完成引入JS module loader和相关设施以后，极可能仍是须要从新调整文档和目录命名，以免可能的理解错位。

回到关于“模块”的定义讨论上，我建议运用此术语时尽可能避免扩张性解释——即避免在脱离特定机制的general的“模块化”的意义上使用“模块”这个词。

好比，传统的JS代码组织方法之一，是挂在global上的层级命名空间。此严格上很差称之为“模块”。缘由是namespace只提供逻辑划分，不解决代码自己的划分。若是没有其余机制，代码划分仍然是文件为单位，并由开发者本身指定script加载。同理，咱们一般认为C++里没有模块（尽管有namespace和include），可是PHP咱们认为有模块（由于它有autoloader能够根据namespace映射到目录去加载文件）。

固然，即使编程语言没有模块，咱们仍然能够经过一些方式进行“模块化”编程，但这种模糊的用法有可能形成误解。在JS这边由于咱们已经有很成熟的CommonJS / AMD / ES6 module了，更应避免模糊用法。

2.组建（component）

另外一个概念是“组件”。大致上“组件”和“模块”的概念是相似的，只是“组件”一般指更high-level的东西。

我我的体会，“模块”指代码单元，其意义偏向静态的代码结构。而“组件”指功能单元，其意义偏向运行时的结构，并有更复杂的控制（如组件实例的生命周期管理）。

举例来讲，在组件系统中，你应该能够比较容易的作到在运行时查找某种组件并替换为另外一种组件（热插拔）。而这一般并不做为模块系统的需求——即便模块系统支持动态加载，一般也不支持注销旧模块；即便支持注销旧模块，一般也不支持替换全部旧模块的引用（意味着须要从新 实例化/初始化 模块依赖树上全部直接或间接引用此模块的模块）。

注：的确有某Node.js平台下的游戏框架设计以class做为模块单元，经过替换prototype来作到模块的热插拔。不过这其实要求很是多的编程方式约定，实际上可被视为使用的是JS的一个裁剪的特性子集，于是不具备广泛性。