add : 添加第九章：客户端检测

bytebit8 · bytebit8 · commit 4748e60355a8 · 2020-02-02T11:20:45.000+08:00
diff --git a/Chapter9 - Client Detection/客户端检测.md b/Chapter9 - Client Detection/客户端检测.md
@@ -0,0 +1,330 @@
+# 《JavaScript 高级程序设计》第九章 : 客户端检测
+
+## 前言
+
+本章重点：
+
+- 能力检测与浏览器检测的区别和使用场景。
+- 了解户代理的历史发展，特别是 `Mozilla` 版本信息的历史。
+- 使用用户代理进行浏览器检测，但是受限于用户代理会发生变更，所以书上的判断方法以已经失效或者说已不满足当前的场景（新增的 IE11 以及 Edge），但是示例代码中的正则写法还是值得我们去学习的。
+
+## 能力检测
+
+能力检测的目的不是识别特定的浏览器，而是识别当前浏览器是否支持特定的功能。
+
+能力检测的准则是：先检测最常用最通用以及性能更好的方案，后检测妥协的方案，这就如使用 `if...else if...` 语句总会把最可能达到的情况放在之前判断，提高命中率。
+
+示例：
+
+```javascript
+function getById(id) {
+  if (document.getElementById) {
+    return document.getElementById(id);
+  } else if (document.all) {
+    return document.all[id];
+  } else {
+    throw new Error("element cannot be retrieved by ID");
+  }
+}
+```
+
+> IE5 之前的版本不支持 `getElementById`，但支持 document.all 的方式获取
+
+更精准的能力检测不仅要检测浏览器是否支持特定的能力，还要在支持的基础上进一步判断能力的类型是否满足我们所需。
+
+```javascript
+typeof object.sort === "function";
+```
+
+我们建议在进行类型判断的时候尽可能的多使用 `typeof` ，因为对于不存在或未定义的标识符通过 `typeof` 检测并不会报错，而是返回 `undefined`。
+
+但是“类型检测”的滥用往往有可能会给我们造成潜在的 bug，这种情况一般都出于浏览器的兼容性问题，因此在使用的时候，要求我们开发人员要有一个整体性的考量和把控。
+
+```javascript
+typeof document.createElement === "function"; //false by IE8-
+typeof document.createElement === "object"; //true by IE8-
+
+typeof document.createElement === "function"; //true by IE9+、Chrome、Firefox
+```
+
+> 在 IE8 及以下版本中对于 `DOM`  的实现是通过调用系统 `COM` 组件方式实现的，所以对于一些 DOM 方法的类型检测就会与其它浏览器的结果不同。
+
+“能力检测”结合“类型检测”是一种渐进增强式的检测过程，前者判断有没有，存不存在，而后者则是在存在的基础上，继续判断能力的类型，进行更准确的判断。但这种组合依然无法解决能力本身的兼容性问题，即我们要判断的能力是存在的，类型也是我们所需的，但是“能力”的完善和支持程度在不同的浏览器中并不相同。
+
+例如我们通过调用 `Array.prototype.slice.call(NodeList, 0)`  可以将 `Like Array`  格式的 `NodeList`对象转换为数组对象，但是这种能力在 `IE8-`  版本中是不被支持的，直接调用会产生错误。
+
+```javascript
+By IE8-
+Array.prototype.slice.call(box.childNodes, 0) // Array.prototype.slice: 'this' 不是 JavaScript 对象
+```
+
+> 问题的原因依然是因为 IE8 及以下的版本中其 DOM 是采用 COM  组件的方式实现，因此 box.childNodes  返回的 nodeList  是一个 COM  对象，而非一个原生的  `NodeList`  对象，虽然 IE9  支持通过借用数组的 `slice`  方法将一个 nodeList  对象转换为数组，但是直到 IE11  才真正的实现了 `NodeList`  类型对象。
+
+报错本身也是一种状态反馈，我们完全可以捕获报错，然后在错误处理中采用降级的方案，即通过遍历 `NodeList`  来生成一个数组，从而保证该种能力在所有浏览器中都兼容。
+
+```javascript
+var arr = [];
+try {
+  Array.prototype.slice.call(box.childNodes, 0);
+} catch (e) {
+  for (var k in box.childNodes) {
+    arr.push(box.childNodes[k]);
+  }
+}
+```
+
+因此，我认为一个完善的“能力检测”方案是结合了 “类型检测”与“错误检测”一起使用。
+
+## 浏览器检测
+
+浏览器检测的核心就是“用户代理检测”。
+需要明确的是“用户代理检测”并不可靠，因为浏览器厂商在发布版本的时候都有可能会对用户代理进行修改，特别是国内的套壳浏览器厂商，更为严重。
+
+“用户代理检测” 的技术核心在于 `navigator` 对象的 `userAgent` 属性，这个属性原本是按照 `HTTP 1.0/1.1` 的规范，用来定义浏览器向服务端发送用户代理字符串，以标明浏览器的名称、版本等。但现在常用于前端领域对浏览器类型以及版本进行检测。
+
+不论何种浏览器，通常来说，`navigator.userAgent` 属性中都包含以下信息：
+
+- Mozilla/版本号
+- 操作系统的信息：`Windows NT 版本号`
+- 计算机操作系统的位长：`WOW64、x64、Win64`
+- 浏览器名称与版本号: `Chrome/版本号`、`Firefox/版本号`、`Edge/版本号`、`MSIE 版本号`
+- 浏览器内核：`Trident`、`Gecko`、`AppleWebKit`
+
+`Mozilla/版本号` 源于 `Netspace` 公司第一个公开发行版 `Netspace Navigator 2` 的用户代理字符串。
+
+```
+Mozilla/2.02 [lang] (WinNt; I)
+```
+
+到了 `Netspace Navigator 3` 的时候则为：
+
+```
+Mozilla/3.0 (Win95; U)
+```
+
+而这个时候刚发布的 `IE3` 则考虑 `Netspace` 公司在浏览器市场中占据的无与伦比的份额，为了使很多服务器也支持自家的浏览器，因此也在用户代理中加入了 `Mozilla 2.0` 的标识。
+
+随着 `Microsoft` 与 `Netspace` 公司在浏览器市场并驾齐驱时，`Netspace Navigator 4` 的用户代理则为 `Mozilla 4.0` 同时期的 `IE4.0` 也对应调整为 `Mozilla 4.0` 而后期随着网景公司的败亡，从 `IE4.0 ~ IE8` 都是 `Mozilla 4.0` 没有变过。
+
+随着 `IE` 的发展与市场的占有率步入黄昏，微软紧急推出了重大改进版的 `IE9.0`，再一次将用户代理中的 Mozilla 版本标识升级到了 `Mozilla 5.0`，在当时所有的现代浏览器 `Safir`、`Chrome`、`Firefox` 等也都是 `Mozilla 5.0`，`IE9` 的修改也只是紧随其后，一直到目前都是如此。
+
+这些浏览器之所以都将 `Mozilla 5.0` 加入自己的用户代理中，实际的原因则是为了继承 `Netspace Navigator` 这笔古老的财富，确保过去的用户代理检测脚本以及提供网页内容的服务器更好的兼容自己。而后期的发展则越来越没有底线，比如 `IE11`、`Microsoft Edge`、`Safari` 、`Chrome` 等都在自己的用户代理中都加入了 `like Gecko` 关键字，但 `Gecko` 则是 `Firefox` 的浏览器内核，最早使用的则是 `Netspace Navigator 6` 中，所以我们可以认为这是 IE/Chrome/Safari 集体占火狐的便宜，事情已经不可避免的往更糟糕的方向倾斜，就目前而言 Chrome 里面会含有 `Safari` 的信息，而 `Microsoft Edge` 中则会同时含有 `Chrome` 与 `Safari` 两者的信息。这也就为我们通过 `navigator.userAgent` 来判断浏览类型以及版本又增加了难度。
+
+下面是搜集到的主流浏览器较新版本的用户代理头信息，以供我们分析：
+
+```
+IE7
+"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
+
+IE8
+"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
+
+IE9
+"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
+
+IE10
+"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
+
+IE11
+"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; rv:11.0) like Gecko"
+
+Edge
+"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
+
+Firefox
+"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"
+
+Chrome
+"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"
+
+Safari
+"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15"
+```
+
+简单的分析，我们可以发现 `Firefox` 的用户代理信息最简洁，其中含有 `Firefox/68` ，`Gecko` 等关键信息，但 `Gecko` 在 IE11、Chrome、Safari、Edge 中都存在，所以我们只能判断是否同时存在 `Firefox` 与 `Gecko` 。
+
+```javascript
+var ua = navigator.userAgent;
+if (/Firefox\/(\S+)/.test(ua) && ua.indexOf("Gecko") != -1) {
+  //Firefox
+  //RegExp.$1 - version
+}
+```
+
+接着第二个少的要数 `Chrome`，但是 `Chrome` 关键字也在很多浏览器中被占用了，所以判断是否为谷歌浏览器，还借助浏览器的提供商属性 `vendor`。
+
+```javascript
+var ua = navigator.userAgent;
+if (/Chrome\/(\S+)/.test(ua) && navigator.vendor.indexOf("Google") != -1) {
+  //Chrome
+}
+```
+
+接着是 `Safari` ，它的用户代理中有 `Version` 来作为版本标识的关键字，且存在 `Safari` 但没有 `Chrome` 关键字，因此满足这两个条件我们就可以认为是 `Safari`。
+
+```javascript
+var ua = navigator.userAgent;
+if (
+  /Version\/(\S+)/.test(ua) &&
+  /(?=.Sfari)(?!.Chrome)/.test(ua) &&
+  /Apple/.test(navigator.vendor)
+) {
+  //Safari
+}
+```
+
+> 其中 `navigator.vendor` 用于返回浏览器的提供商，但该属性仅限于 PC 端的 Safari 浏览器。
+
+对于 `Edge` 这个奇葩浏览器而言，它具有 `Safari` 、`Chrome` 以及　`Gecko` 等关键信息，但所幸的是，它也具有了一个唯一标识自己的 `Edge` 字符。
+
+```javascript
+var ua = navigator.userAgent;
+if (/Edge\/(\S+)/.test(ua)) {
+  //Edge
+}
+```
+
+最后便是 `IE7~IE11`，非常简单，判断是否有 `Trident` 或 `MSIE` 即可，对于 `IE11` 就比较特殊了，它没有 `MSIE` 标识，但是它有 `rv:11.0` 来表示版本。
+
+```javascript
+var ua = navigator.userAgent;
+if (/(?:Trident)? | (?:MSIE)?/) {
+  if (/MSIE ([^;]+)/.test(ua)) {
+    //IE7-IE10
+  }
+  if (/rv:([^\)]+)/.test(ua)) {
+    //IE11
+  }
+}
+```
+
+在掌握了每种浏览器的判断后，现在我们来整合这些判断方法，整合的过程会遵循以下原则：
+
+- 将常用的浏览器尽量放在前面检测。
+- 减少判断的分支条件，尽可能快的定位浏览器的种类。
+
+下面是具体实现的代码，我们采用模块模式（简单工厂模式）来设计，最后暴漏出一个对象，以方便后期扩展。
+
+```javascript
+function getClientInfo() {
+  var ua = navigator.userAgent;
+  var pf = navigator.platform;
+  var browser;
+  var ver;
+  var platform;
+  var client = {};
+
+  //Chrome/Edge/Safari
+  if (/AppleWebKit/.test(ua)) {
+    if (
+      /Version\/(\S+)/.test(ua) &&
+      /(?=.Sfari)(?!.Chrome)/.test(ua) &&
+      /Apple/.test(navigator.vendor)
+    ) {
+      browser = "Safari";
+      ver = RegExp.$1;
+    } else if (/Edge\/(\S+)/.test(ua)) {
+      browser = "Edge";
+      ver = RegExp.$1;
+    } else if (
+      /Chrome\/(\S+)/.test(ua) &&
+      navigator.vendor.indexOf("Google") != -1
+    ) {
+      browser = "Chrome";
+      ver = RegExp.$1;
+    }
+  } else if (/Firefox\/(\S+)/.test(ua) && ua.indexOf("Gecko") != -1) {
+    //Firfox
+    browser = "Firefox";
+    ver = RegExp.$1;
+  } else if (/(?:Trident)? | (?:MSIE)?/.test(ua)) {
+    //IE
+    browser = "IE";
+    if (/MSIE ([^;]+)/.test(ua)) {
+      ver = RegExp.$1;
+    }
+    if (/rv:([^\)]+)/.test(ua)) {
+      ver = RegExp.$1;
+    }
+  }
+
+  //检测系统
+  if (pf.indexOf("Win") != -1) {
+    platform = "Win";
+  } else if (pf.indexOf("Mac") != -1) {
+    platform = "Mac";
+  } else if (pf.indexOf("X11") != -1 || pf.indexOf("Linux") != -1) {
+    platform = "Linux";
+  }
+
+  client.ver = ver ? ver : void 0;
+  client.browser = browser ? browser : void 0;
+  client.platform = platform ? platform : void 0;
+
+  if (typeof client.__proto__ != undefined) {
+    client.__proto__ = null;
+  }
+
+  return client;
+}
+```
+
+对于 IE 浏览器，`IE10` 以下的版本我们可以通过专有的注释标签，直接在 HTML 中快速定位 IE 的版本。
+
+```html
+<!--[if IE 7]>
+  //仅限IE7
+<![endif]-->
+
+<!--[if lte IE 7]>
+  //仅限小于等于IE7
+<![endif]-->
+
+<!--[if gt IE 7]>
+  //仅限大于IE7
+<![endif]-->
+```
+
+注释标签的潜在优势，就是按需加载资源，例如 IE 浏览器需要加载执行 `A` 脚本，而非 IE 则加载执行 `B` 脚本。
+
+```html
+<!--[if IE]>
+  <script src="A.js"></script>
+<![endif]-->
+
+<!--[if !IE]><!-->
+<script src="B.js"></script>
+<!--<![endif]-->
+```
+
+下面对 IE 条件注释中关键字含义的说明
+
+- `gt` : 大于
+- `lt` : 小于
+- `lte` : 小于等于
+- `gte` : 大于等于
+- `!` : 非，取反。
+
+> IE 浏览器独有的条件注释仅支持 IE9 及以下版本。
+
+IE 的条件注释不仅仅只可以写在 HTML 中，实际上还可以结合 JS 脚本来动态的向浏览器中插入：
+
+```javascript
+var _IE = (function() {
+  var version = null;
+  //增加性能
+  if (document.all || window.ActiveXObject || "ActiveXObject" in window) {
+    var div = document.createElement("div"),
+      all = div.getElementsByTagName("i"),
+      version = 5;
+    while (
+      ((div.innerHTML = "<!--[if gt IE " + ++version + "]><i></i><![endif]-->"),
+      all[0])
+    );
+    //while循环的第一个参数：循环的第一个参数是一个执行的语句，只要当前IE的版本号大于依次循环生成的版本号，那么就往div里面加一个i标签。
+    //while循环的第二个参数是控制循环的条件。
+    -[1] && version == 6 ? (version = 10) : ""; // 用于解决在IE10 时不支持条件注释的问题。
+  }
+  return version;
+})();
+```
