## 项目设计与原理分析 包括以下内容： - CSS模块化设计 - JS组件设计 - 自适应方案 - SPA设计 - 构建设计 - 上线指导 ### 面试相关 模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】 比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。 本文先讲CSS模块化设计。 ## CSS模块化设计 1、**设计原则**： - 可**复用**、能**继承**、要完整。 - 周期性迭代 2、**设计方法**： - 先整体后部分，再颗粒化。 20180308_1603.png 上图中，整体指的是“布局”。 - **先抽象再具体**。【重要】 20180308_1615.png 上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。 比如，**panel、按钮、轮播图**等等，都可以提取为**抽象**的组件，复用。 **总结：** 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:2（1个逻辑像素 需要 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：相对于父元素的比例。 - rem：css3中的属性，相对于根元素`<html>`的 比例。浏览器默认的字号16px。 参考链接：<https://segmentfault.com/a/1190000004605022> ### 工作原理 > 面试如果问怎么做自适应，就回答这两点。 （1）利用`viewport`和设备像素比，调整基准像素。 （2）利用`px2rem`自动转换css单位。我们需要将移动端的字体，从 px转换为 rem。 ## 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`，这个比较简单，这里就不提了。