更新文章，日常划水

1. 划水 2. BOM 3. 主题什么都没调整 4. 咸鱼🐟
2025-07-15 16:51:37 +00:00 · 2020-12-22 15:10:39 +08:00
parent 3461a71727
commit 0ee2a218e6
11 changed files with 358 additions and 49 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,7 +15,7 @@
        "gulp-htmlmin": "^5.0.1",
        "gulp-uglify": "^3.0.2",
        "gulp-uglify-es": "^2.0.0",
-        "hexo": "^5.2.0",
+        "hexo": "^5.3.0",
        "hexo-cli": "^4.2.0",
        "hexo-deployer-git": "^2.1.0",
        "hexo-generator-archive": "^1.0.0",
@ -32,7 +32,7 @@
      },
      "devDependencies": {
        "@babel/core": "^7.12.10",
-        "@babel/preset-env": "^7.12.10"
+        "@babel/preset-env": "^7.12.11"
      }
    },
    "node_modules/@babel/code-frame": {
@ -310,15 +310,15 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha1-p4x6clHgH2FlEtMbEK3PUq2l4NI=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0=",
      "dev": true
    },
    "node_modules/@babel/helper-validator-option": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-option/download/@babel/helper-validator-option-7.12.1.tgz?cache=0&sync_timestamp=1602802621757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-option%2Fdownload%2F%40babel%2Fhelper-validator-option-7.12.1.tgz",
-      "integrity": "sha1-F1VnOAw+d9YP+YpUuwFf548heNk=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-option/download/@babel/helper-validator-option-7.12.11.tgz?cache=0&sync_timestamp=1608076912392&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-option%2Fdownload%2F%40babel%2Fhelper-validator-option-7.12.11.tgz",
+      "integrity": "sha1-1my4t6Pn/kxpYrMgIKEx7PCEf08=",
      "dev": true
    },
    "node_modules/@babel/helper-wrap-function": {
@ -725,9 +725,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npm.taobao.org/@babel/plugin-transform-block-scoping/download/@babel/plugin-transform-block-scoping-7.12.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fplugin-transform-block-scoping%2Fdownload%2F%40babel%2Fplugin-transform-block-scoping-7.12.1.tgz",
-      "integrity": "sha1-8O5yeHS0KiCKSKWGuEw9IiwrvvE=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/plugin-transform-block-scoping/download/@babel/plugin-transform-block-scoping-7.12.11.tgz",
+      "integrity": "sha1-g66SoQTbuTp9bG3RhE81EIPEa08=",
      "dev": true,
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.10.4"
@ -1096,16 +1096,16 @@
      }
    },
    "node_modules/@babel/preset-env": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.12.10.tgz?cache=0&sync_timestamp=1607569385907&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fpreset-env%2Fdownload%2F%40babel%2Fpreset-env-7.12.10.tgz",
-      "integrity": "sha1-ypgblfZB8mEFMb1xlIZWMGkF5qs=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.12.11.tgz",
+      "integrity": "sha1-VdX3mBSHNlyT27yEUHscchXoV/k=",
      "dev": true,
      "dependencies": {
        "@babel/compat-data": "^7.12.7",
        "@babel/helper-compilation-targets": "^7.12.5",
        "@babel/helper-module-imports": "^7.12.5",
        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-validator-option": "^7.12.1",
+        "@babel/helper-validator-option": "^7.12.11",
        "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-proposal-dynamic-import": "^7.12.1",
@ -1134,7 +1134,7 @@
        "@babel/plugin-transform-arrow-functions": "^7.12.1",
        "@babel/plugin-transform-async-to-generator": "^7.12.1",
        "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
-        "@babel/plugin-transform-block-scoping": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.11",
        "@babel/plugin-transform-classes": "^7.12.1",
        "@babel/plugin-transform-computed-properties": "^7.12.1",
        "@babel/plugin-transform-destructuring": "^7.12.1",
@ -1164,7 +1164,7 @@
        "@babel/plugin-transform-unicode-escapes": "^7.12.1",
        "@babel/plugin-transform-unicode-regex": "^7.12.1",
        "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.12.10",
+        "@babel/types": "^7.12.11",
        "core-js-compat": "^3.8.0",
        "semver": "^5.5.0"
      },
@ -1226,12 +1226,12 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.12.10.tgz?cache=0&sync_timestamp=1607569324626&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.12.10.tgz",
-      "integrity": "sha1-eWXkpyYLJvCcVrz8sEmK8fbZsmA=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.12.11.tgz?cache=0&sync_timestamp=1608076909062&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.12.11.tgz",
+      "integrity": "sha1-qG5NceMKm27hAlkERsmGYliSg84=",
      "dev": true,
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.12.11",
        "lodash": "^4.17.19",
        "to-fast-properties": "^2.0.0"
      }
@ -3397,9 +3397,9 @@
      }
    },
    "node_modules/hexo": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npm.taobao.org/hexo/download/hexo-5.2.0.tgz",
-      "integrity": "sha1-z4suPfO6KYBaF9lhRa1Bs4QyqOU=",
+      "version": "5.3.0",
+      "resolved": "https://registry.npm.taobao.org/hexo/download/hexo-5.3.0.tgz",
+      "integrity": "sha1-R3Ni8TtnbX157LNTQY/4MOsndhw=",
      "dependencies": {
        "abbrev": "^1.1.1",
        "archy": "^1.0.0",
@ -8246,15 +8246,15 @@
      }
    },
    "@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha1-p4x6clHgH2FlEtMbEK3PUq2l4NI=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0=",
      "dev": true
    },
    "@babel/helper-validator-option": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-option/download/@babel/helper-validator-option-7.12.1.tgz?cache=0&sync_timestamp=1602802621757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-option%2Fdownload%2F%40babel%2Fhelper-validator-option-7.12.1.tgz",
-      "integrity": "sha1-F1VnOAw+d9YP+YpUuwFf548heNk=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-option/download/@babel/helper-validator-option-7.12.11.tgz?cache=0&sync_timestamp=1608076912392&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-option%2Fdownload%2F%40babel%2Fhelper-validator-option-7.12.11.tgz",
+      "integrity": "sha1-1my4t6Pn/kxpYrMgIKEx7PCEf08=",
      "dev": true
    },
    "@babel/helper-wrap-function": {
@ -8568,9 +8568,9 @@
      }
    },
    "@babel/plugin-transform-block-scoping": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npm.taobao.org/@babel/plugin-transform-block-scoping/download/@babel/plugin-transform-block-scoping-7.12.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fplugin-transform-block-scoping%2Fdownload%2F%40babel%2Fplugin-transform-block-scoping-7.12.1.tgz",
-      "integrity": "sha1-8O5yeHS0KiCKSKWGuEw9IiwrvvE=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/plugin-transform-block-scoping/download/@babel/plugin-transform-block-scoping-7.12.11.tgz",
+      "integrity": "sha1-g66SoQTbuTp9bG3RhE81EIPEa08=",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.10.4"
@ -8852,16 +8852,16 @@
      }
    },
    "@babel/preset-env": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.12.10.tgz?cache=0&sync_timestamp=1607569385907&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fpreset-env%2Fdownload%2F%40babel%2Fpreset-env-7.12.10.tgz",
-      "integrity": "sha1-ypgblfZB8mEFMb1xlIZWMGkF5qs=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.12.11.tgz",
+      "integrity": "sha1-VdX3mBSHNlyT27yEUHscchXoV/k=",
      "dev": true,
      "requires": {
        "@babel/compat-data": "^7.12.7",
        "@babel/helper-compilation-targets": "^7.12.5",
        "@babel/helper-module-imports": "^7.12.5",
        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-validator-option": "^7.12.1",
+        "@babel/helper-validator-option": "^7.12.11",
        "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-proposal-dynamic-import": "^7.12.1",
@ -8890,7 +8890,7 @@
        "@babel/plugin-transform-arrow-functions": "^7.12.1",
        "@babel/plugin-transform-async-to-generator": "^7.12.1",
        "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
-        "@babel/plugin-transform-block-scoping": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.11",
        "@babel/plugin-transform-classes": "^7.12.1",
        "@babel/plugin-transform-computed-properties": "^7.12.1",
        "@babel/plugin-transform-destructuring": "^7.12.1",
@ -8920,7 +8920,7 @@
        "@babel/plugin-transform-unicode-escapes": "^7.12.1",
        "@babel/plugin-transform-unicode-regex": "^7.12.1",
        "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.12.10",
+        "@babel/types": "^7.12.11",
        "core-js-compat": "^3.8.0",
        "semver": "^5.5.0"
      }
@ -8976,12 +8976,12 @@
      }
    },
    "@babel/types": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.12.10.tgz?cache=0&sync_timestamp=1607569324626&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.12.10.tgz",
-      "integrity": "sha1-eWXkpyYLJvCcVrz8sEmK8fbZsmA=",
+      "version": "7.12.11",
+      "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.12.11.tgz?cache=0&sync_timestamp=1608076909062&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.12.11.tgz",
+      "integrity": "sha1-qG5NceMKm27hAlkERsmGYliSg84=",
      "dev": true,
      "requires": {
-        "@babel/helper-validator-identifier": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.12.11",
        "lodash": "^4.17.19",
        "to-fast-properties": "^2.0.0"
      }
@ -10774,9 +10774,9 @@
      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8="
    },
    "hexo": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npm.taobao.org/hexo/download/hexo-5.2.0.tgz",
-      "integrity": "sha1-z4suPfO6KYBaF9lhRa1Bs4QyqOU=",
+      "version": "5.3.0",
+      "resolved": "https://registry.npm.taobao.org/hexo/download/hexo-5.3.0.tgz",
+      "integrity": "sha1-R3Ni8TtnbX157LNTQY/4MOsndhw=",
      "requires": {
        "abbrev": "^1.1.1",
        "archy": "^1.0.0",
--- a/package.json
+++ b/package.json
@ -21,7 +21,7 @@
    "gulp-htmlmin": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-uglify-es": "^2.0.0",
-    "hexo": "^5.2.0",
+    "hexo": "^5.3.0",
    "hexo-cli": "^4.2.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
@ -38,6 +38,6 @@
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.10"
+    "@babel/preset-env": "^7.12.11"
  }
 }
--- a/source/_md/客户端检测.md
+++ b/source/_md/客户端检测.md
@ -0,0 +1,121 @@
+浏览器发展至今，各种主流浏览器都实现了各自的长处，随之而来的就是各种不一致性的问题。
+
+## 能力检测
+
+最常用的一种客户端检测形式就是**能力检测**（特征检测）。能力检测不是去识别特定的浏览器，而是去识别浏览器的能力。只要确定了浏览器支持的特定能力，就可以给出特定的解决方案。检测手段也很简单，只需要用到简单的类型转换：
+
+```js
+if (Object.propertyInQuestion) {
+    // 使用特定能力
+}
+```
+
+来看一个简单的例子，在IE5.0之前不支持`document.getElementById()`这个DOM方法，但是可以使用非标准的`document.all`属性来实现相同的目的。所以：
+
+```js
+function getElementId(id) {
+    if (document.getElementById) {
+        return document.getElementById(id);
+    } else if (document.all) {
+        return document.all(id);
+    } else {
+        throw new Error('No way to get element id.')
+    }
+}
+```
+
+这里先判断标准方法是否存在，如果存在就直接使用。如果不存在，就使用IE5.0之前的非标准方法。如果二者都没有，则抛出一个错误。
+
+### 更可靠的能力检测
+
+仅仅靠简单的类型转换来检测是不够完善的，不仅仅要知道某个属性是否存在，还需要知道它是不是我们所需要的那个方法。如果仅使用类型转换来做判断，那么可能会遇到这样的问题：
+
+```js
+function isSortable(obj) {
+    return !!obj.sort;
+}
+
+let someObj = {
+    sort: 1
+}
+
+isSortable(someObj); //true
+```
+
+可以考虑善用`typeof`操作符，例如：
+
+```js
+function isSortable(obj) {
+    return typeof obj.sort == 'function';
+}
+```
+
+不过`typeof`操作符也不是完美的解决方案，在早期的IE中，某些DOM方法返回的是`object`而不是`function`。例如`document.createElement()`方法。
+
+除此之外，IE的ActiveX对象与其他对象的行为差异很大。例如：
+
+```js
+let xhr = new ActiveXObject('Microsoft.XMLHttp');
+if (xhr.open) {  //发生错误
+    // do something...
+}
+
+typeof (xhr.open);  //unknow
+```
+
+当然针对IE也是有解决办法的：
+
+```js
+//来自 Peter Michaux
+function isHostMethod(object, property) {
+    let t = object[property];
+    return t == 'function' || (!!(t == 'object' && object[property])) || t == 'unknow';
+}
+```
+
+## 怪癖检测
+
+怪癖检测，也就是Bug检测。通过确定浏览器以有的Bug来确定某一个特性不能正常工作。
+
+在IE8以及之前中有个Bug，将某个实例的属性设置为与标记了`[[Enumerbale]]`为`false`的某个原型属性同名，那么该属性就不会被枚举。可以这样来检测：
+
+```js
+(function hasEnumerableQuirk() {
+    let obj = {
+        toString: function () {}
+    }
+    for (let i in obj) {
+        if (i == 'toString') {
+            return false;
+        }
+    }
+    return true;
+})();
+```
+
+在Safari 3以前的版本中也有一个Bug，实例会枚举被隐藏的同名的原型属性。
+
+```js
+(function hasEnumerShadowQuirk() {
+    let obj = {
+        toString: function () {}
+    }
+    let count = 0;
+    for (i in obj) {
+        if (i == 'toString') {
+            count++;
+        }
+    }
+    return (count > 1);
+})()
+```
+
+## 用户代理字符串的历史
+
+这是一段很有趣的浏览器历史。
+
+// maybe later
+
+## 用户代理字符串检测
+
+用户代理字符串也就是常见的UA（UserAgent）。
--- a/source/_md/探索Node.js基本概念.md
+++ b/source/_md/探索Node.js基本概念.md
@ -67,3 +67,4 @@ let fs = require('fs');
 import fs from 'fs';
 ```

+ES2015的module
--- a/source/_md/某咸鱼的AJAX入门.md
+++ b/source/_md/某咸鱼的AJAX入门.md
@ -0,0 +1,134 @@
+## Ajax
+
+AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用`XMLHttpRequest`对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
+
+AJAX最主要的两个特性：
+
+* 在不重新加载页面的情况下发送请求给服务器。
+* 接受并使用从服务器发来的数据。
+
+## 发送http请求
+
+`XMLHttpRequest`方法就是发送请求必要的一个方法，通过该方法创建的实例来发送请求。
+
+```js
+let httpRequest = new XMLHttpRequest();
+```
+
+大部分现代浏览器都实现了`XMLHttpRequest`方法，当然也包括微软。不过早期的IE6或之前的浏览器是通过`ActiveXObject`方法来实现的。为了兼容早期的IE浏览器，我们可能需要这要写：
+
+```js
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+```
+
+不过随着时间的流逝，IE6早已被淘汰，所以目前的兼容性无需多虑。
+
+当发送了一个请求之后，就是得到相应的响应。得到响应后我们需要通知JS如何处理，这时就需要给实例的`onreadystatechange`属性赋值一个方法，当请求状态改变时调用该方法。
+
+```js
+httpRequest.onreadystatechange = someFunction;
+```
+
+当然也可以使用匿名函数：
+
+```js
+httpRequest.onreadystatechange = () => {
+    // balabalabala
+}
+```
+
+当我们能够处理响应的时候，就可以发送一个实际的请求了。通过调用HTTP请求对象的`open()`和`send()`方法：
+
+```js
+httpRequest.open('GET', 'https://www.defectink.com/balabala.html', true);
+httpRequest.send();
+```
+
+* `open()`的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
+* 第二个参数是要发送的URL。由于安全原因，默认不能调用第三方URL域名。
+* 第三个可选参数是用于设置请求是否是异步的。true为默认值。
+
+## 处理服务器响应
+
+`onreadystatechange`被赋值的函数负责处理响应，这个函数首先要检查请求的状态，根据状态来决定后面执行的任务。
+
+如果状态的值是`XMLHttpRequest.DONE`（对应的值是4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。
+
+```js
+if (httpRequest.readyState === 4) {
+    // Everything is good, the response was received.
+} else {
+    // Not ready yet.
+}
+```
+
+全部的`readyState`状态的值为：
+
+* 0 (未初始化) or (请求还未初始化)
+* 1 (正在加载) or (已建立服务器链接)
+* 2 (加载成功) or (请求已接受)
+* 3 (交互) or (正在处理请求)
+* 4 (完成) or (请求已完成并且响应已准备好)
+
+当然接下来再继续检查HTTP的`response code`。可以通过响应码200来判断AJAX有没有成功。
+
+```js
+if (httpRequest.status === 200) {
+    // Perfect!
+} else {
+    // There was a problem with the request.
+    // For example, the response may have a 404 (Not Found)
+    // or 500 (Internal Server Error) response code.
+}
+```
+
+当检查完请求状态和HTTP响应码后， 就可以使用服务器返回的数据了。有两种方法来访问这些数据：
+
+* `httpRequest.responseText` – 服务器以文本字符的形式返回
+* `httpRequest.responseXML` – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理
+
+当然这一步只有在发起的请求是异步的时候有效。如果发起的请求时同步请求则不必使用函数，但是并不推荐这样做。
+
+## 实例
+
+也算一个总结吧：
+
+1. 通过`XMLHttpRequest`生成一个实例
+2. 为实例的`onreadystatechange`方法添加一个处理响应的方法
+3. 发送请求，`open()`与`send()`
+4. 在处理响应的方法中判断状态值与HTTP响应码(4 && 200)
+5. 处理响应`responseText`与`responseXML`
+
+```js
+const btn = document.querySelector('.btn');
+const title = document.querySelector('.title')
+btn.addEventListener('click', makeRequest);
+
+let httpRequest;
+function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+    if (!httpRequest) {
+        throw new Error(':( Cannot create an XMLHTTP instance');
+        console.error(httpRequest);
+        return false;
+    }
+    httpRequest.onreadystatechange = handler;
+
+    httpRequest.open('GET', 'http://localhost/text.txt');
+    httpRequest.send();
+}
+
+function handler() {
+    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
+        title.textContent = httpRequest.responseText;
+    } else {
+        console.log('There was a problem with the request.');;
+        console.log(httpRequest.readyState);
+        console.log(httpRequest.status);
+    }
+}
+```
--- a/source/_md/正则表达式.md
+++ b/source/_md/正则表达式.md
@ -0,0 +1,28 @@
+正则，听到这个词大脑就会油然而生一阵疼痛。它是那么的令人头疼，却又是那么强大。无论在什么语言环境下都离不开正则表达式的匹配，而学习它的最佳办法就是多尝试，记住了它的语法就能轻松掌握用法了。
+
+匹配字符：`[abc]`，匹配`[...]`中的所有字符。
+
+排除字符：`[^abc]`，匹配除了`[...]`中字符的所有字符。
+
+区间匹配：`-`表示一个区间，`[0-9]`匹配0到9，`[a-z]`匹配a到z，区分大小写。
+
+`.`：匹配除换行符（\n、\r）之外的任何单个字符，相等于`[^\n\r]`。
+
+`\w`：匹配字母、数字、下划线。等价于`[A-Za-z0-9_]`。
+
+用`\d`可以匹配一个数字，`\w`可以匹配一个字母或数字
+
+用`*`表示任意个字符（包括0个），用`+`表示至少一个字符，用`?`表示0个或1个字符，用`{n}`表示n个字符，用`{n,m}`表示n-m个字符
+
+- `[0-9a-zA-Z\_]`可以匹配一个数字、字母或者下划线；
+- `[0-9a-zA-Z\_]+`可以匹配至少由一个数字、字母或者下划线组成的字符串，比如`'a100'`，`'0_Z'`，`'Py3000'`等等；
+- `[a-zA-Z\_][0-9a-zA-Z\_]*`可以匹配由字母或下划线开头，后接任意个由一个数字、字母或者下划线组成的字符串，也就是Python合法的变量；
+- `[a-zA-Z\_][0-9a-zA-Z\_]{0, 19}`更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
+
+`A|B`可以匹配A或B，所以`(P|p)ython`可以匹配`'Python'`或者`'python'`。
+
+`^`表示行的开头，`^\d`表示必须以数字开头。
+
+`$`表示行的结束，`\d$`表示必须以数字结束。
+
+你可能注意到了，`py`也可以匹配`'python'`，但是加上`^py$`就变成了整行匹配，就只能匹配`'py'`了。
--- a/source/_md/真的是在写JS-JavaScript的类.md
+++ b/source/_md/真的是在写JS-JavaScript的类.md
--- a/source/_posts/浏览器的老伙计-BOM.md
+++ b/source/_posts/浏览器的老伙计-BOM.md
@ -1,5 +1,16 @@
+---
+title: 浏览器的老伙计-BOM
+date: 2020-12-22 15:03:10
+tags: JavaScript
+categories: 笔记
+url: browsers-old-friend-bom
+index_img: /images/浏览器的老伙计-BOM/logo.webp
+---
+
 ECMAScript才是JavaScript的核心，在浏览器中，BOM无疑才是真正的核心（浏览器对象模型：BrowerObjectModel)。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法去随意拓展它。于是，浏览器之间共有的对象就成为了事实上的标准。

+![](../images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp)
+
 ## window对象

 BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器的一个接口，又是ECMAScript规定的Global对象。
@ -642,4 +653,18 @@ history.go(2);

 另外，还有两个简写的方法`back()`和`forward()`来代替`go()`方法。顾名思义，这两个方法可以模仿浏览器的“后退”和“前进”动作。

-history甚至还有一个length属性，用来保存历史记录的数量。
+history甚至还有一个length属性，用来保存历史记录的数量。
+
+## 总结
+
+浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性（`let`声明的变量并不作为window的属性），且所有原生的构造函数以及其他函数也都存在于它的命名空间下。
+
+* 在使用框架时，每个框架都有自己的window对象以及所有原生构造函数以及其他构造函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
+* 有一些窗口指针，可以用来引用其他框架，包括父框架。
+* top对象始终指向最外围的框架，也就是整个浏览器窗口。
+* parent对象标识包含当前框架的框架，而self对象则指回window。
+* 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性地修改浏览器的URL。
+* 使用replace()方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面。
+* navigator对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；不过，也有一些公共的属性（如userAgent）存在于所有浏览器中。
+
+BOM中还有两个对象：screen和history，但它们的功能有限。screen对象中保存着客户端显示器有关的信息，这些信息一般只用于站点分析。history对象为访问该刘安祺的历史记录开了一个小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。
--- a/source/images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp
+++ b/source/images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp
--- a/source/images/浏览器的老伙计-BOM/browser-post.psd
+++ b/source/images/浏览器的老伙计-BOM/browser-post.psd
--- a/source/images/浏览器的老伙计-BOM/logo.webp
+++ b/source/images/浏览器的老伙计-BOM/logo.webp