Webcourse/12-Vue框架/03-CSS模块化设计.md

项目设计与原理分析

包括以下内容：

• CSS模块化设计

• JS组件设计

• 自适应

• SPA设计

• 构建设计

• 上线指导

本文先讲CSS模块化设计。

CSS模块化设计

1、设计原则：

• 可复用、能继承、要完整。

• 周期性迭代

2、设计方法：

• 先整体后部分，再颗粒化。

20180308_1603.png

上图中，整体指的是“布局”。

• 先抽象再具体。

20180308_1615.png

上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。

总结：

20180308_1620.png

三个模块：

• reset.css：不同的浏览器有默认的样式，我们要去掉。

• layout.css：布局层面。属于抽象部分。

• element.css：功能层面（比如列表、按钮）

如果你想给两个组件，采用相同的名称，但是样式不同，这个时候就要用到 module。

通过 global和scope的方式，我们就实现了模块的复用、继承、私有化。

JS组件设计

1、设计原则：

• a、高内聚低耦合。

高内聚：模块功能的专一性高，独立性强。低耦合：是模块之间的联系尽量少，尽量简单。

高内聚：尽量让组件的功能受控于组件本身，而不是依赖于其他的组件。

低耦合：两个模块相同的功能，提取成一个公共的抽象组件，但这两个模块没有任何耦合的关系。

• b、周期性迭代

需要不断迭代，才能知道什么样的组件最符合自己的业务场景。

2、设计方法：

• 先整体后部分再颗粒化。

写抽象的组件，然后继承抽象的组件，达到颗粒化。

• 尽可能的抽象。

自适应方案设计

如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。