From cbdf3ec76201b9648566405dd3fc39b91461e4b3 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Thu, 8 Mar 2018 19:48:22 +0800
Subject: [PATCH] =?UTF-8?q?add=20file=EF=BC=9A=E9=A1=B9=E7=9B=AE=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E4=B8=8E=E5=8E=9F=E7=90=86=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 06-前端基础/21-面经推荐.md                    |  11 +
 09-移动web开发/01-Bootstrap入门.md            |  23 +-
 ...�绍和环境配置.md => 00-Vue的介绍和环境配置.md} |   0
 12-Vue框架/{02-项目介绍.md => 01-项目介绍.md} |   0
 12-Vue框架/02-项目设计与原理分析.md           | 277 ++++++++++++++++++
 12-Vue框架/03-CSS模块化设计.md                | 124 --------
 12-Vue框架/03-首页部分.md                     |   0
 7 files changed, 303 insertions(+), 132 deletions(-)
 create mode 100644 06-前端基础/21-面经推荐.md
 rename 12-Vue框架/{01-Vue的介绍和环境配置.md => 00-Vue的介绍和环境配置.md} (100%)
 rename 12-Vue框架/{02-项目介绍.md => 01-项目介绍.md} (100%)
 create mode 100644 12-Vue框架/02-项目设计与原理分析.md
 delete mode 100644 12-Vue框架/03-CSS模块化设计.md
 create mode 100644 12-Vue框架/03-首页部分.md

diff --git a/06-前端基础/21-面经推荐.md b/06-前端基础/21-面经推荐.md
new file mode 100644
index 0000000..6ebbb9b
--- /dev/null
+++ b/06-前端基础/21-面经推荐.md
@@ -0,0 +1,11 @@
+
+
+
+### 2018-03-08
+
+- [jawil | 一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
+
+
+此博主的博客签名：
+
+20180308_1703.png
\ No newline at end of file
diff --git a/09-移动web开发/01-Bootstrap入门.md b/09-移动web开发/01-Bootstrap入门.md
index adac116..6658401 100644
--- a/09-移动web开发/01-Bootstrap入门.md
+++ b/09-移动web开发/01-Bootstrap入门.md
@@ -136,27 +136,34 @@ PS：`dist`表示编译之后的文件，这在库文件中是很常见的。
 
 **（2）viewport 视口**：
 
+
 ```html
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 ```
 
 解释：声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时，就用上面这行代码设置 viewport。
 
 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。
 
+
 需要注意的是：
 
 - 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
-- 视口的宽度可以通过meta标签设置。
-- 此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
-	- width:视口的宽度
-    - initial-scale：初始化缩放
-    - user-scalable:是否允许用户自行缩放（值可以写成yes/no，也可以写成1/0）
-    - minimum-scale:最小缩放。
-    - maximum-scale:最大缩放。
+- 此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）。
+
+属性解释：
+
+- width:设置viewport的宽度。
+- initial-scale：初始化缩放比例。
+- minimum-scale:最小缩放比例。
+- maximum-scale:最大缩放比例。
+- user-scalable:是否允许用户手动缩放（值可以写成yes/no，也可以写成1/0）
+
 
 PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就没有意义了。二者是矛盾的。
 
+
+
 **（3）条件注释**：
 
 ```html
diff --git a/12-Vue框架/01-Vue的介绍和环境配置.md b/12-Vue框架/00-Vue的介绍和环境配置.md
similarity index 100%
rename from 12-Vue框架/01-Vue的介绍和环境配置.md
rename to 12-Vue框架/00-Vue的介绍和环境配置.md
diff --git a/12-Vue框架/02-项目介绍.md b/12-Vue框架/01-项目介绍.md
similarity index 100%
rename from 12-Vue框架/02-项目介绍.md
rename to 12-Vue框架/01-项目介绍.md
diff --git a/12-Vue框架/02-项目设计与原理分析.md b/12-Vue框架/02-项目设计与原理分析.md
new file mode 100644
index 0000000..298e61d
--- /dev/null
+++ b/12-Vue框架/02-项目设计与原理分析.md
@@ -0,0 +1,277 @@
+
+
+## 项目设计与原理分析
+
+包括以下内容：
+
+
+- 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、**设计方法**：
+
+- 先整体后部分再颗粒化。
+
+
+写抽象的组件，然后继承抽象的组件，达到颗粒化。
+
+
+- 尽可能的抽象。
+
+
+
+
+## 自适应方案设计
+
+如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
+
+
+### 单位的基本概念
+
+
+- **`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单位。
+
+
+## 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`，这个比较简单，这里就不提了。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/12-Vue框架/03-CSS模块化设计.md b/12-Vue框架/03-CSS模块化设计.md
deleted file mode 100644
index 04c676e..0000000
--- a/12-Vue框架/03-CSS模块化设计.md
+++ /dev/null
@@ -1,124 +0,0 @@
-
-
-## 项目设计与原理分析
-
-包括以下内容：
-
-
-- 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、**设计方法**：
-
-- 先整体后部分再颗粒化。
-
-
-写抽象的组件，然后继承抽象的组件，达到颗粒化。
-
-
-- 尽可能的抽象。
-
-
-
-
-## 自适应方案设计
-
-如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
-
-
-###
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/12-Vue框架/03-首页部分.md b/12-Vue框架/03-首页部分.md
new file mode 100644
index 0000000..e69de29