这是我参与「第四届青训营 」笔记创作活动的第1天

第三课【跟着月影学JavaScript】总结（一）

前端设计有三大原则（可能不止这三大）。或者称之为三种思想，是组件封装，过程抽象，各司其责。

这三种思想其实在其他的编程书籍甚至计算机其他相关书籍中或篇幅甚巨，或寥寥几笔都曾提到过。 例如，在《计算机组成原理：硬件、软件接口》中就曾提到过“使用抽象简化设计”，这本书也把它列为计算机系统结构中的8个伟大思想

让我们来看看这三种思想

one：各司其责：

HTML、CSS、Javascript被称为前端设计的三驾马车。HTML负责结构，CSS负责表现，JavaScript负责行为。各司其责就是指HTML、CSS、JavaScript三者各自1负责自己应该做的事情，不要越界。例如我们应该用JavaScript来负责用户行为（如鼠标点击）导致的变化，而不应用CSS（尽管我们有能力这么做）。如果违背这一原则，可能会导致一些不必要的资源浪费，如如果我们想改变样式，可能要花费更长的时间去修改、如果我们想改变事件，可能不得不重构代码。

second：组件封装：

组件封装其实很简单。这里不做过多介绍，只写下如何封装一个组件。 封装组件流程：分析结构，用CSS做表现效果，行为设计（包括API和控制流）。 另：要学会把大组件拆分成小组件，以实现组件复用并便于修改。 封装组件的意义就在于如果我们把经常用到的组件封装，来达到复用的目的，就能够大大减少我们的维护成本，提高了开发的效率。

third：过程抽象：

其实就是将函数抽象化，只关注其输入输出，而不关心其内部实现细节。这点在很多高级程序设计语言中都有提到，这里不做介绍。