## 项目设计与原理分析

包括以下内容：


- 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、**设计方法**：

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


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


- 尽可能的抽象。




## 自适应方案设计

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


###