125 lines
1.9 KiB
Markdown
125 lines
1.9 KiB
Markdown
|
||
|
||
## 项目设计与原理分析
|
||
|
||
包括以下内容：
|
||
|
||
|
||
- 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、**设计方法**：
|
||
|
||
- 先整体后部分再颗粒化。
|
||
|
||
|
||
写抽象的组件，然后继承抽象的组件，达到颗粒化。
|
||
|
||
|
||
- 尽可能的抽象。
|
||
|
||
|
||
|
||
|
||
## 自适应方案设计
|
||
|
||
如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
|
||
|
||
|
||
###
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|