Webcourse/22-Vue框架-组件化思维/02-项目设计与原理分析.md

289 lines
6.6 KiB
Markdown
Raw Normal View History

2018-03-08 19:48:22 +08:00
## 项目设计与原理分析
包括以下内容:
- CSS模块化设计
- JS组件设计
- 自适应方案
- SPA设计
- 构建设计
- 上线指导
2018-03-08 23:34:58 +08:00
### 面试相关
模块化设计的关键词:**封装、继承**;把**通用**的模块**先抽象,后具体**,达到**复用**。【面试记住】
比如,**panel、按钮、轮播图**、列表等等,都可以提取为**抽象**的组件,复用。
2018-03-08 19:48:22 +08:00
本文先讲CSS模块化设计。
## CSS模块化设计
1、**设计原则**
- 可**复用**、能**继承**、要完整。
- 周期性迭代
2、**设计方法**
- 先整体后部分,再颗粒化。
20180308_1603.png
上图中,整体指的是“布局”。
2018-03-08 23:34:58 +08:00
- **先抽象再具体**。【重要】
2018-03-08 19:48:22 +08:00
20180308_1615.png
上图中,先看整体的布局,有哪些版块;具体的版块中,有横向列表、纵向列表;最后再是功能。
2018-03-08 23:34:58 +08:00
比如,**panel、按钮、轮播图**等等,都可以提取为**抽象**的组件,复用。
2018-03-08 19:48:22 +08:00
**总结:**
20180308_1620.png
三个模块:
- `reset.css`:不同的浏览器有默认的样式,我们要去掉。
- `layout.css`:布局层面。属于抽象部分。
- `element.css`:功能层面(比如列表、按钮)
如果你想给两个组件,采用相同的名称,但是样式不同,这个时候就要用到 module。
通过 global和scope的方式我们就实现了模块的**复用、继承、私有化**。
## JS组件设计
1、**设计原则**
- **a、高内聚低耦合**。
高内聚:模块功能的专一性高,独立性强。低耦合:是模块之间的联系尽量少,尽量简单。
高内聚:尽量让组件的功能受控于组件本身,而不是依赖于其他的组件。
低耦合:两个模块相同的功能,提取成一个公共的**抽象组件**,但这两个模块没有任何耦合的关系。
- b、周期性迭代
需要不断迭代,才能知道什么样的组件最符合自己的业务场景。
2、**设计方法**
- 先整体后部分再颗粒化。
写抽象的组件,然后继承抽象的组件,达到颗粒化。
- 尽可能的抽象。
## 自适应方案设计
如何用一套代码,让一份设计稿,在不同的浏览器上有相同的体验。
### 单位的基本概念
- **`px`**:是`pixel`像素的缩写是相对单位。px = **CSS像素** = **逻辑像素**
- **`dpi`**dot per inch没英寸有多少个点。代表的是屏幕的细腻程度。计算方式勾股定理。
常见的dpi
20180308_1755.png
- **`ppi`** Pixel per inch每英寸的像素数。当用于描述显示器设备时ppi与dpi是同一个概念 。
换算公式px=dp*(dpi/160)。
- **`dip`**:逻辑像素。简称是`dp`。
- **设备像素(物理像素):**单位是`pt`是绝对单位。1pt = 1/72(inch)。inch即英寸而1英寸等于2.54厘米。
比如苹果的Retina视网膜显示屏一个px需要两个物理像素来表示
20180308_1753.png
说白了普通的显示器上一个px对应的是硬件上的真实像素但是在Retina屏上比例是1:21个逻辑像素 需要 4个物理像素 来表示)。由此得出了**设备像素比**
- 设备像素比(dpr)公式为1px = (dpr)^2 * 1dp。
推荐链接:
- [CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport](https://github.com/jawil/blog/issues/21)
### viewport 视口
做过移动端的都知道这一行:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
```
解释:声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时,就用上面这行代码设置 viewport。
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示。
需要注意的是:
- 目前大多数手机浏览器的视口承载页面的容器宽度都是980
- 此属性为移动端页面视口设置上方代码设置的值表示在移动端页面的宽度为设备的宽度并且不缩放缩放级别为1
属性解释:
- width:设置viewport的宽度。
- initial-scale初始化缩放比例。
- minimum-scale:最小缩放比例。
- maximum-scale:最大缩放比例。
- user-scalable:是否允许用户手动缩放值可以写成yes/no也可以写成1/0
PS如果设置了不允许用户缩放那么最小缩放和最大缩放就没有意义了。二者是矛盾的。
**viewport分为三类**
20180308_1825.png
- layout viewport可以理解成页面区域
- visual viewport浏览器的可视区域
- ideal viewport完美适配。1不需要用户缩放和横向滚动条2显示的文字的大小是否合适。不同设备拥有不同的ideal viewport。如所有iphone的ideal viewport宽度都是320px而安卓设备比较复杂可以在网站<http://viewportsizes.com>上查。
如果让 `layout viewport = ideal viewport`,我们就做到了完美适配。
### 设置字体大小em和rem
- em相对于父元素的比例。
- remcss3中的属性相对于根元素`<html>`的 比例。浏览器默认的字号16px。
参考链接:<https://segmentfault.com/a/1190000004605022>
### 工作原理
> 面试如果问怎么做自适应,就回答这两点。
1利用`viewport`和设备像素比,调整基准像素。
2018-03-08 23:34:58 +08:00
2利用`px2rem`自动转换css单位。我们需要将移动端的字体从 px转换为 rem。
2018-03-08 19:48:22 +08:00
## SAP设计
### 设计意义
- 前后端分离:前端专注于业务、视图(交互);后端专注于服务、数据。
- 减轻服务器压力:十几个页面,只用请求一次。
- 增强用户体验
- 缺点SEO有一些弱势。补充知识点[Prerender预渲染优化SEO](http://codingfishman.github.io/2016/05/06/prerender%E9%A2%84%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96SEO/)。
### 工作原理
1、方式一**History API**HTML5中新增的。很优雅但对浏览器有要求。
20180308_1925.png
必要条件:
1要执行打开的操作。
2要有历史记录的操作单。
- pushState创建历史记录。
- onpopstate监听前进、后退的事件。
2、方式二Hash。不是很优雅但是兼容性好。
20180308_1926.png
## 构建工具的安装和配置
20180308_1945.png
- `Webpack`:安装、配置。
- `babel`将ES6转为ES5。
- `dev-server`:页面的更新、渲染和服务。
另外还有`npm scripts`,这个比较简单,这里就不提了。