在目前的编程开发的教学中，大家往往关心的是语言、语句、对象等概念和编写方法，却往往忽视了开发思想的构建。接下来的文章中，我会向大家介绍一些重要的开发思想。不过，这些思想实际上并不仅仅属于开发，还属于其他的方面，所以对于非开发者而言，也很重要。

这个文章中，我将介绍的是：分离与模块化。

从课设报告开始

某一堂课的期末作业是以小组为单位，交一份关于开发管理信息系统的课程设计报告。宿舍里面的四个人正好组成一个小组，如何完成这次课程设计报告呢？

大家最容易想到的解决方案就是：每个人负责报告的某部分。比如：A负责写可行性分析，B负责写系统分析，C负责写系统设计，D负责写系统实施。然后把大家写的各部分合并起来。当然，这是理想情况，实际上一些部分需要在其他部分完成之后才能进行。

4个部分

这就是团队合作，是分离与模块化的一个典型的例子。在这里，我将这两个词放在一起，是因为：“分离”如果不能达成模块化，那么它毫无意义；为了实现“模块化”，分离是必需的。上面的例子中，我们将一份课程设计报告分离成了可行性分析、系统分析、系统设计、系统实施四大模块，每个模块互相独立，有着自己的功能，却又是整体的一部分，与其他模块之间存在关联。

在生活中，这样的例子十分多见，如：电脑的硬件分成了CPU、主板、内存条、硬盘等可插拔的元件；生产线以模组为单位进行各个工序的处理；一套健身流程由多个子动作按规律装配而成。

Keep上的某个训练

人们运用分离与模块化的原因并不是单一的。写报告中的分离与模块化，是为了平衡工作量、减轻负担；电脑硬件的分离与模块化，是为了能够较为方便地更换硬件，方便电脑的组装、升级与维修，方便个性化定制；生产线中的分离与模块化，是为了方便维修更换，能够在一个工序出现异常时，将对其他工序的影响降到最低；健身中的分离与模块化，是为了方便教学、充分发挥各子动作的优势，让健身更加高效。虽然具体原因各不相同，但是总的来说，无非是为了提高效率、方便安装、更换与定制、减少单个问题对整体造成的影响。

南京LG化学工厂更换流水线上的设备，机器模块化特征明显

开发中的分离与模块化

在开发中，这个情况更为多见了。

最显而易见的例子是网页制作中，内容（HTML）、样式（CSS）与动作（JS）的分离。

我们的“电子商务网站开发与建设”的课程设计中，由于我底子比较好，就给很多同学提供了帮助。我在写代码的时候比较注重分离的思想，开发出来的网站还算不错，后期修改起来也挺容易。但是其他同学的就不一样了，改他们的代码对我来说显得异常艰难。

样式与内容分离

我看到有很多同学把样式写在标签里面，如：

（这是我拿自己写的代码改的，那些同学写的更加惨不忍睹）

这会让标签变得非常长，而且对于一些要经常使用的组件也这么写，会让样式的调整变得相当困难。

解决方法就是：除非确有必要放在标签里面，将关于样式的内容全部从标签里面分离开来，放在一起，在原来的位置以对应的class或id属性替代，当然也可以充分利用CSS的选择器标识需要应用样式的元素，如：

.login {
  padding-bottom: 5px;
}
.login > h1 {
  color: #22842C;
  font-weight: normal;
  margin: 15px auto 9px auto;
}
.login > div > p {
  display: flex;
  width: 100%;
  margin: 9px 0;
  font-size: 1.1rem;
  justify-content: space-between;
}

.login > div > p > input {
  margin: 4px 45px 0 0;
  height: 15px;
}
.login-button > button {
  margin: 0 20px;
  height: 30px;
  width: 60px;
  font-size: 1rem;
}

至于样式放在哪里，有两种选择：一是放在

分离与模块化：分工合作，各司其职

从课设报告开始

开发中的分离与模块化

样式与内容分离

用户登陆