移动端是趋势，移动端的屏幕显示和布局方面肯定是需要掌握的透透的。



> 注意：
> 本文章的图片出了些问题，还未修改。

## 像素 PX

其实很多会 Photoshop 的人都有一个误区：**认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。**

然而其实 pixel（像素）是图像的基本采样单位。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。

> 详细解释见维基 [像素](https://zh.wikipedia.org/wiki/%E5%83%8F%E7%B4%A0) 条目。

那么 px 都会受哪些因素的影响而变化？

*   每英寸点数(Dots Per Inch, DPI)
*   像素密度(pixel per inch, PPI)
*   设备像素比(device pixel ratio, DPR)

## 像素密度 PPI

### 物理像素

`物理像素(physical pixel)`又被称为`设备像素(device pixels)`，是设备能控制图像显示的最小单位，每个像素可以根据操作系统设置自己的颜色和亮度。

不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为`ppi`和`dpi`：

-   **ppi**：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素或显示器设备的点距。
-   **dpi**：每英寸多少点。

关于打印机的墨点我们不去关心，只要知道 **当用于描述显示器设备时 ppi 与 dpi 是同一个概念** 。

### PPI

**每英寸物理像素点数（Pixels Per Inch）**，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

ppi越高，每英寸像素点越多，图像越清晰。可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

要计算显示器的每英寸像素值，首先要确定屏幕的`尺寸（对角）`和`分辨率（物理像素）`。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/02px.png" style="max-height: 300px">

以爱疯6为例：

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/03px.png" style="max-height: 300px">

```
var 斜边尺寸 = V(1920^2+1080^2) V代表开根号
var ppi = 斜边尺寸/5.5
ppi = 401ppi

```

## 设备像素比 DPR

### CSS 像素

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。

在`CSS`规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。`px`是一个**相对单位**，相对的是`设备像素(device pixel)`。

每一个CSS声明和几乎所有的 javascript 属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是`screen.width/height`.

CSS 像素又被称为`与设备无关的像素`或`设备独立像素`(device-independent pixel)，简称 `DIPs`。

### 缩放

在桌面端，`1个css像素`往往都是对应着电脑屏幕的`1个物理像素`。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/04px.png" style="max-height: 300px">

_一个CSS像素对应一个物理像素_

而在手机端，由于屏幕尺寸的限制，`缩放`是经常性的操作。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/05px.png" style="max-height: 300px">

_设备像素(深蓝色背景)、CSS像素(半透明背景)_
_左图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素_
_右图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素_

不论我们进行缩小或放大操作，元素设置的CSS像素（如width:300px）是`始终不变的`，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的.

### DPR

> **设备像素比(device pixels ratio)** 描述的是未缩放状态下，`物理像素`和`CSS像素`的初始比例关系，计算方法如下。

```
设备像素比 ＝ 物理像素 / 设备独立像素      // 同一方向上
```

通俗点讲：**设备像素比(dpr)** 是指在移动开发`同一方向上（x轴或y轴）`中`1个css像素`占用`多少设备像素`，

如 retina 屏幕`dpr = 2`，代表`1个css像素`用`2x2个设备像素`来绘制。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/06px.png" style="max-height: 300px">

在 JavaScript 中，可以通过`window.devicePixelRatio`获取到当前设备的 dpr。而在 CSS 中，可以通过`-webkit-device-pixel-ratio`，`-webkit-min-device-pixel-ratio`和`-webkit-max-device-pixel-ratio`进行媒体查询。

桌面浏览器像素比为 `1`，表示`一个CSS像素`对应`1个物理像素`。retina 屏幕以及绝大数现代移动浏览器的像素比为 `2`，表示`一个CSS像素`对应`4个物理像素`。部分大屏移动设备的像素比可以达到 `3 `或 `4`。

### ppi 和 dpr 的关系

毕竟这些参数是外国人先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数，因此`ppi`就用作显示设备的工业标准；

**dpr 与 ppi 相关，一般是`ppi/160`的整数倍：**

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/07px.png" style="max-height: 300px">


## Viewport

### PPK 关于三个 viewport 的理论

[ppk大神](http://www.quirksmode.org/) 对于移动设备上的viewport有着非常多的研究（[第一篇](http://www.quirksmode.org/mobile/viewports.html)，[第二篇](http://www.quirksmode.org/mobile/viewports2.html)，[第三篇](http://www.quirksmode.org/mobile/metaviewport/)），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。

-   visual viewport / layout viewport

简单的理解，viewport 严格等于浏览器的窗口。为了能更好为移动端 CSS 布局服务，viewport 又分为 visual viewport 和 layout viewport。

George Cummins在 [Stack Overflow](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport) 上解释了这两个基本概念。

> 可以把 layout viewport 想象成是一张不能改变大小和角度的图片。现在你用一个更小的框来观看这张图片，这个框被不透明的材料包围，所以你只能看到这张图片的一部分，通过小框所看到的这部分区域被称为 visual viewport。你可以拿着这个框离图片远点（用户缩小页面）或近点（用户放大页面）进行观看，你也可以改变这个框的方向，但这张图片的大小和方向都不会改变。

`visual viewport`的宽度可以通过`window.innerWidth` 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/08px.png" style="max-height: 300px">
_viewport示意图_

-   ideal viewport

现在我们已经有两个`viewport`了：**layout viewport** 和  **visual viewport**。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的`viewport`。

所谓的完美适配指的是：
首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适，比如一段 14px 大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段 14px 的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。

ppk把这个`viewport`叫做 **ideal viewport**，也就是第三个`viewport` —— 移动设备的理想`viewport`。

`ideal viewport`并没有一个固定的尺寸，不同的设备拥有有不同的`ideal viewport`。所有的`iphone`的`ideal viewport`宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在`iphone`中，`css`中的320px就代表`iphone`屏幕的宽度。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/viewport/09px.png" style="max-height: 300px">

但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备`ideal viewport`的宽度都为多少，可以到 [Viewport Sizes](http://viewportsizes.com/) 去查看一下，里面收集了众多设备的理想宽度。


### viewport meta

移动设备默认的`viewport`是`layout viewport`，但在进行移动设备网站的开发时，我们需要的是`ideal viewport`。那么怎么才能得到`ideal viewport`呢？这就该轮到`meta`标签出场了。

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的`head`标签中：

`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">`

该`meta`标签的作用是让当前`viewport`的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让`viewport`的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认`viewport`，也就是说会出现横向滚动条。

## BOM 属性

为了便于获取不同对象的尺寸，浏览器包含以下属性供我们使用：

*   `screen.width/height`，设备的屏幕尺寸。

*   `window.innerWidth/Height`，包含滚动条尺寸的浏览器完整尺寸。

*   `document.documentElement.clientWidth/Height`，viewport 的尺寸。

*   `document.documentElement.offsetWidth/Height`，`<html>`的尺寸。

你可能同时也会用到以下属性：

*   `window.pageX/YOffset`，页面的移位。

*   `window.pageX/Y`，从`<html>`原点到事件触发点距离。

*   `window.clientX/Y`，从 viewport 原点（浏览器窗口）到事件触发点的距离。

*   `window.screenX/Y`，从用户显示器窗口原点到事件触发点的距离。

## flexible.js

基于上述几个概念，阿里前端团队设计了 [flexible.js](https://github.com/amfe/lib-flexible) 这个移动端自适应方案，它主要做了下面几件事：

**1. 动态改写`<meta>`标签**

你可以通过输出 meta 标签方式来手动设置 dpr，其中 initial-dpr 会把 dpr 强制设置为给定的值，maximum-dpr 会比较系统的 dpr 和给定的 dpr，取最小值。`注意：这两个参数只能选其一。`

```
<meta name="flexible" content="initial-dpr=2, maximum-dpr=3" />

```

**2. 给`<html>`元素添加`font-size`属性，并且动态改写`font-size`的值**

为了以后兼容 vh，vw 单位，当前方案会把页面分成 100 份来看待，每一份被称为一个单位 a。同时，1rem 单位认定为 10a。拿 750 的视觉稿举例：

```
1a = 7.5px
1rem = 75px

```

因此，对于视觉稿上的元素的尺寸换算，只需要原始 px 值除以 rem 基准 px 值即可。例如 `240px * 120px` 的元素，最后转换为 3.2rem * 1.6rem。

**3. 给`<html>`元素添加`data-dpr`属性，并且动态改写`data-dpr`的值**

我们希望在大屏手机上看到更多的文字，所以字体的大小不推荐用 rem 作为单位。所以对于字体的设置，仍旧使用 px 作为单位，并配合用 data-dpr 属性来区分不同 dpr 下的的大小。

```
div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}
```

## 参考文章

[深入理解移动端像素知识与Viewport知识](http://blog.csdn.net/aiolos1111/article/details/51967744)
[移动端H5页面的设计稿尺寸（上）](http://zikoman.lofter.com/post/3bf3bb_6da8d80#)
[移动端H5页面的设计稿尺寸（下）](http://zikoman.lofter.com/post/3bf3bb_6da8e55#)
[你真的了解像素吗](http://www.cnblogs.com/dojo-lzz/p/6683036.html?utm_source=debugrun&utm_medium=referral)
[移动前端开发之viewport的深入理解](http://www.cnblogs.com/2050/p/3877280.html)
[设备像素，设备独立像素，CSS像素](http://yunkus.com/physical-pixel-device-independent-pixels/)
[移动端开发系列——像素与viewport](http://www.jianshu.com/p/76130f4d7cf9)
[移动端高清、多屏适配方案](http://div.io/topic/1092?page=2)
[像素（px）到底是个什么单位](http://hax.iteye.com/blog/374323)
[CSS 长度单位](https://yukun.im/css/469)
[彻底理解 UI 及 Web 的尺寸单位：基本概念](https://medium.com/uxabc/understanding-ui-units-8acdc0575388)
[针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析](https://www.idaima.com/a/13245.html)

像素、设备像素比、PPI、Viewport

ESlint 主要是用来帮助我们规范书写 JavaScript 代码。通过使用 Atom 的 ESLit 插件，并配合 Airbnb 的 ESLint 规则，我们可以一边编码一边检测语法。关于 ESLint 的详细介绍可看[官方文档](http://eslint.org/)。



## 安装及设置

### 在 Atom 中安装 ESLint 插件

```source-shell
apm install linter
apm install linter-eslint
// 也可以在 atom 插件管理面板搜索安装
```

### 在项目中使用 eslint-config-airbnb

[eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb#improving-this-config%EF%BC%89%E6%98%AF%E4%B8%80%E4%B8%AA%E5%9F%BA%E4%BA%8E) 是一个基于[Airbnb's Javascript 规则](https://github.com/airbnb/javascript) 的 ESLint 配置。安装方法如下：

```source-shell
// 转到项目文件夹
cd react-app(项目文件夹路径)

// 分别是在项目内安装 eslint 和依赖的插件
$ npm install --save-dev eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-config-airbnb
```

然后在项目根目录添加一个 `.eslintrc` 文件，并在其中添加如下代码：

```source-json
{
  "extends": "airbnb"
}
```

## 配置选项

eslint-config-airbnb 中的规则，可能并不完全符合自己的编码习惯，我们还可以在 `.eslintrc` 中添加一些自定义的规则。

```
module.exports = {
  // 环境定义了预定义的全局变量。更多在官网查看
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "amd": true,
  },
  // JavaScript 语言选项
  "parserOptions": {
    // ECMAScript 版本
    "ecmaVersion": 6,
    "sourceType": "script", // module
  },


// "off" 或 0 - 关闭规则
// "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
// "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)


  "rules": {

    //==========================================================//
    // 可能的 error
    //==========================================================//

    "no-console": 0,
    "no-cond-assign": 2,  // 禁止条件表达式中出现赋值操作符
    "no-constant-condition": 2,  // 禁止在条件中使用常量表达式
    "no-dupe-args": 2,  // 禁止 function 定义中出现重名参数
    "no-dupe-keys": 2,  // 禁止对象字面量中出现重复的 key
    "no-duplicate-case": 2,  // 禁止重复的 case 标签
    "no-empty": 1,  // 禁止空语句块
    "no-empty-character-class": 2,  // 禁止在正则表达式中使用空字符集 (/^abc[]/)
    "no-ex-assign": 2,  // 禁止对 catch 子句的参数重新赋值
    "no-extra-boolean-cast": 1,  // 禁止不必要的布尔转换

    "no-func-assign": 2,  // 禁止对 function 声明重新赋值
    "no-inner-declarations": [2, "functions"],  //  禁止在嵌套的块中出现 function 或 var 声明
    "no-invalid-regexp": 2,  // 禁止 RegExp 构造函数中无效的正则表达式字符串
    "no-negated-in-lhs": 2,  // 禁止在 in 表达式中出现否定的左操作数
    "no-unexpected-multiline": 1,  // 禁止出现令人困惑的多行表达式
    "no-unreachable": 1,  // 禁止在return、throw、continue 和 break语句之后出现不可达代码
    "use-isnan": 2,  // 要求使用 isNaN() 检查 NaN

    // 强制使用有效的 JSDoc 注释
    "valid-jsdoc": [1, {
      "requireReturn": false
    }],

    // 强制 typeof 表达式与有效的字符串进行比较
    // typeof foo === "undefimed" 错误
    "valid-typeof": 2,


    //==========================================================//
    // 最佳实践 warn
    //==========================================================//

    // 强制把变量的使用限制在其定义的作用域范围内
    "block-scoped-var": 1,
    // 强制所有控制语句使用一致的括号风格
    "curly": [2, "all"],
    // switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告
    "default-case": 1,
    // 使用 === 替代 == allow-null允许null和undefined==
    "eqeqeq": [1, "allow-null"],
    // 不允许在 case 子句中使用词法声明
    "no-case-declarations": 2,
    // 禁止除法操作符显式的出现在正则表达式开始的位置
    "no-div-regex": 2,
    // 禁止在没有类型检查操作符的情况下与 null 进行比较
    "no-eq-null": 1,
    // 禁止扩展原生类型
    "no-extend-native": 2,
    // 禁止不必要的 .bind() 调用
    "no-extra-bind": 1,
    // 禁止数字字面量中使用前导和末尾小数点
    "no-floating-decimal": 2,
    // 禁用不必要的嵌套块
    "no-lone-blocks": 1,
    // 禁止在循环中出现 function 声明和表达式
    "no-loop-func": 1,
    // 禁止对原生对象赋值
    "no-native-reassign": 2,
    // 禁止在非赋值或条件语句中使用 new 操作符
    "no-new": 1,
    // 不允许对 function 的参数进行重新赋值
    "no-param-reassign": [1, {
      "props": true
    }],
    // 禁止使用 var 多次声明同一变量
    "no-redeclare": 2,
    // 禁止自我赋值
    "no-self-assign": 2,
    // 禁止自身比较
    "no-self-compare": 2,
    // 禁用一成不变的循环条件
    "no-unmodified-loop-condition": 2,
    // 禁止不必要的 .call() 和 .apply()
    "no-useless-call": 2,
    // 禁止不必要的字符串字面量或模板字面量的连接
    "no-useless-concat": 2,
    // 强制在parseInt()使用基数参数
    "radix": 1,
    // 要求所有的 var 声明出现在它们所在的作用域顶部
    "vars-on-top": 1,
    // 要求 IIFE 使用括号括起来
    "wrap-iife": [2, "any"],


    //==========================================================//
    //  关于变量声明
    //==========================================================//

    // 禁止删除变量
    "no-delete-var": 2,
    // 禁止 var 声明 与外层作用域的变量同名
    "no-shadow": 1,
    // 禁止覆盖受限制的标识符
    "no-shadow-restricted-names": 2,
    // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    "no-undef": 2,
    // 禁止将变量初始化为 undefined
    "no-undef-init": 1,
    // 禁止将 undefined 作为标识符
    "no-undefined": 1,

    // 禁止出现未使用过的变量
    "no-unused-vars": [1, {
      "vars": "all",
      "args": "none"
    }],
    // 不允许在变量定义之前使用它们
    "no-use-before-define": 2,
  },
};
```

## 我的配置

下面是我的个人配置，仅供参考。

```
{
  "extends": "airbnb",
  "plugin": {
    "react"
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
  },
  "parserOptions": {
    "ecmaVersion": 5,
    "sourceType": "script",
  },
  "rules": {
    "no-unused-vars": [1, {
      "vars": "all",
      "args": "none"
    }],
  }
}

```


参考：
- [https://github.com/nodejh/nodejh.github.io/issues/21](https://github.com/nodejh/nodejh.github.io/issues/21)
- [https://segmentfault.com/a/1190000005984309](https://segmentfault.com/a/1190000005984309)

在 Atom 中使用 ESLint

上次重装系统后重新部署的Hexo，好麻烦。痛定思痛，决定以后要养成备份的好习惯。去网上找了找备份 Hexo 源文件的方法，备份到 Github 这个还是比较方便靠谱的，所以记录一下。



### 思路

采用分支的思路，一个分支用来存放 Hexo 生成的网站原始的文件，另一个分支用来存放生成的静态网页。

如图：
<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/b36b5a19/hexo-backup.png" style="max-height: 300px">

### 流程

1. 在 Github 创建一个新仓库；
2. 仓库创建两个分支：master 与 hexo；
3. 设置 hexo 为默认分支（因为我们只需要手动管理这个分支上的 Hexo 网站文件）；
4. 拷贝这个仓库到本地；
5. 拷贝后的本地文件夹下有一个`.git`文件夹（默认隐藏），复制它，粘贴到其他文件夹。一会还要粘回来。
5. 在本地文件夹下通过 Git bash 依次执行 `npm install hexo`、`hexo init`、`npm install` 和 `npm install hexo-deployer-git`（此时当前分支应显示为 hexo）;
7. 将刚才复制的`.git`文件夹黏贴回来覆盖本地文件夹中的`.git`文件夹；
8. 修改`_config.yml` 中的 `deploy` 参数，`branch: master`；
9. 依次执行 git 命令，推送本地文件夹下的文件到 Github 仓库（推送原文件到 hexo 分支）；
10. 执行 hexo g -d 生成网站并部署到 GitHub 上（生成网站静态文件并推送到 master 分支）。

------------

### 常见问题：

前四步的目的是，在 github 上建立一个新的仓库，并且把目录同步到本地（这时同步到本地的文件夹可能只有一个 `readme.md`，或者是个空文件夹，但是有一个隐藏的`. git` 文件夹。clone 一个空仓库的目的是要通过 git 建立存放本地环境的文件夹）。

------------

执行第6步的时候，Hexo 会生成一个新的`.git`文件夹，并且覆盖了上文提到的`.git`文件夹。这会导致没法 push 到 hexo 分支（第七步没法执行）。所以要在 `hexo init` 前复制`.git`文件夹 。在完成 `hexo init` 后再黏贴回来覆盖新生成的`.git`文件夹。

------------

**问：** 在完成第一次 push 到远程 hexo 分支后需要切换到本地的 master 分支，然后 hexo g -d 吗？然后以后需要修改的话再切换到本地 hexo 分支？

**答：** 不需要。所有操作只需要在 hexo 分支下进行就可以了，hexo g -d 会将编译生成的静态网页提交到`_config.yml` 文件里面指定的分支。我们已经提前设置`_config.yml` 文件为`branch: master`，所以会默认推送静态文件到`master`分支。

------------

**问：** 当我 push 本地文件夹到远程 hexo 分支的时候，推送的是网站原始文件，push 的记录中会不会包含博客编译后的静态网页？

**答：** 不会。hexo 分支是用来对必须的网站原始文件进行版本控制，而 master 是用来放置编译后部署的静态网页。所以，在默认分支为 hexo 下，你每次 push 所记录的是网站所必须的原始文件，不会包含编译之后的网页文件。
你可以看下用 hexo 搭建博客的原始文件，生成的`.gitignore` 文件已经把 `public/` 和`.deploy*/` 这两个文件夹都忽略了（这两个文件就是用来放置编译后的静态网页的）。

------------

参考：[知乎 - 使用 hexo，如果换了电脑怎么更新博客](https://www.zhihu.com/question/21193762)

备份Hexo源文件到Github

自己使用Hexo过程中遇到的问题，记录一下。



### 1. 打不开本地服务器

**问：**`http://localhost:4000` 无法显示该网页.

**答：**cmd窗口执行命令`hexo s -p 3600`, 换一个 3600 的端口号就可以了，如果 `0.0.0.0` 不可以就用 `127.0.0.1`

### 2. 怎么用 hexo 上传一个 README.md 到 github

因为一执行`hexo d`命令之后，`README.md` 文件就被渲染变为 `README.html` 文件。

**解决办法：**

- 在 Hexo 目录下的 `source` 根目录下添加一个 `README.md`；
- 修改 Hexo 目录下的`_config.yml`，设置 `skip_render: README.md` 保存退出即可；
- 使用 hexo d 命令就不会再渲染 README.md 这个文件了。

### 3. 链接地址内出现括号
`Markdown` 创造一个链接或者图片是使用 `[title](link)` 和 `![title](link)`.

我们可以避免`[]`内出现中括号, 或者使用转义.
但是在小括号的链接里面就可能会出问题. 有些网址上面会具有小括号.

例如：
[https://msdn.microsoft.com/zh-cn/library/br230269(v=vs.94).aspx](https://msdn.microsoft.com/zh-cn/library/br230269(v=vs.94).aspx)

如果使用转义符, 打开链接时也会出现转义符, 网址出错.

**解决方法:**

使用 `url` 符号码去代替 `ascii` 的符号.
即使用`%28` 代替`(`, `%29`代替`)`.

Hexo常见问题记录

严格模式是一种将更好的错误检查引入代码中的方法。



## 什么是严格模式

ECMAScript 5 引入严格模式 (`strict mode`) 概念。通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测，使用严格模式的好处是可以提早知道代码中的存在的错误，及时捕获一些可能导致编程错误的 ECMAScript 行为。在开发中使用严格模式能帮助我们早发现错误。

## 为什么要使用严格模式

主要有以下几个：错误检测、规范、效率、安全、面向未来

- 消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的 Javascript 做好铺垫。

## 开启严格模式

严格模式可以应用到整个 `script` 标签或个别函数中。

### 全局开启（不推荐）

为整个 script 标签开启严格模式, 需要在所有语句之前放一个特定语句 `"use strict";`

```
// 整个语句都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";
```

- 这个语法从 ECMAScript 3 开始支持。向后兼容不支持严格模式的浏览器，他们就当遇到了一个普通字符串，编译时忽略。
- 将 `use strict` 放在脚本文件的第一行，则整个脚本都将以 "严格模式" 运行。
- 如果这行语句不在第一行，则无效，整个脚本以 "正常模式" 运行。
- 如果不同模式的代码文件合并成一个文件很危险，这一点需要特别注意。

### 函数内开启（推荐）

将 `use strict` 放在函数体的第一行，则整个函数以 "严格模式" 运行。

```javascript
function strict(){
  "use strict";
  return "这是严格模式。";
}
function notStrict() {
  return "这是正常模式。";
}
```

因为上面的调用方法不利于文件合并，所以更好的做法是将整个脚本文件放在一个`立即执行的函数表达式`之中。

```javascript
+function (){
  "use strict";
  ...
}();
```

## 严格模式有哪些不同

### 变量

严格模式下，变量都必须先用 `var` 命令显示声明，然后再使用，否则直接报错。
意外创建的全局变量（函数内没有使用`var`创建的变量），也会报错。

```javascript
!function (){
  'use strict';
  tt = 4;
  console.log(tt);
}();

// Uncaught ReferenceError: tt is not defined
```

------------



别用这些词做 **变量名 **或 **参数名**
```
implements, interface, let, package, private, protected, public, static, yield
```
这些都是保留字，将来 ECMAScript 版本中可能会用到他们，使用这些标识符作为变量名会导致语法错误.

```javascript
!function (){
  'use strict';
  var implements = 4;
  console.log(implements);
}();

// Uncaught SyntaxError: Unexpected strict mode reserved word
```

------------

严格模式下写入到只读属性，直接报错。

```javascript
!function (){
  'use strict';
  var obj = {
    get x() { return 17; }
  };
  obj.x = 5;
}();

// Uncaught TypeError: Cannot set property x of #<Object> which has only a getter
```

------------

严格模式下, 试图删除不可删除的属性时会抛出异常

```javascript
!function (){
  'use strict';
  delete Object.prototype;
}();

// Uncaught TypeError: Cannot delete property 'prototype' of function Object() { [native code] }
```

### 对象

严格模式要求一个对象内的所有属性名在对象内必须唯一。

当一个对象内有重名属性时：

- 正常模式下：取最后一个重名的属性决定其属性值。
- 严格模式下：报错！

>　此问题 ES6 已解决，

------------

严格模式要求函数的参数名唯一。

```javascript
function sum(a, a, c){ // !!! 语法错误
  "use strict";
  return a + b + c; // 代码运行到这里会出错
}

//　Uncaught SyntaxError: Duplicate parameter name not allowed in this context
```

------------

严格模式下禁止八进制数字语法或尝试对八进制值使用转义。

```javascript
!function (){
  "use strict";
  var a = 0o10; // ES6: 八进制
  console.log(a);
}();
```
> 貌似这个问题已解决，没有报错。

------------

在严格模式下，函数声明无法嵌套在语句或块中。它们只能显示在顶级或直接显示在函数体中。

```javascript
var arr = [1, 2, 3, 4, 5];
var index = null;
for (index in arr) {
    function myFunc() {};
    console.log(typeof myFync);
}

// undefined
```

------------

字符串 “arguments” 不能用作标识符（变量或函数名、参数名等）。

```javascript
!function (){
  "use strict";
  var arguments = 10;
  console.log(arguments);
}();

// Uncaught SyntaxError: Unexpected eval or arguments in strict mode
```


------------

严格模式下不允许使用 `with` 语句.

```javascript
!function (){
  "use strict";
  with (Math){
    x = cos(3);
    y = tan(7);
  }
}();

// Uncaught SyntaxError: Strict mode code may not include a with statement
```

--------------

参考资料：

- [MDN 严格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)
- [Micorsoft 严格模式](https://msdn.microsoft.com/zh-cn/library/br230269%28v=vs.94%29.aspx)