diff --git a/package-lock.json b/package-lock.json index 908c393..d73cef8 100644 --- 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", diff --git a/package.json b/package.json index d355ece..542835a 100644 --- 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" } } diff --git a/source/_md/客户端检测.md b/source/_md/客户端检测.md new file mode 100644 index 0000000..6fd3ea2 --- /dev/null +++ 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）。 \ No newline at end of file diff --git a/source/_md/探索Node.js基本概念.md b/source/_md/探索Node.js基本概念.md index 76ca60c..92f230a 100644 --- 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 \ No newline at end of file diff --git a/source/_md/某咸鱼的AJAX入门.md b/source/_md/某咸鱼的AJAX入门.md new file mode 100644 index 0000000..9e8ece9 --- /dev/null +++ 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); + } +} +``` \ No newline at end of file diff --git a/source/_md/正则表达式.md b/source/_md/正则表达式.md new file mode 100644 index 0000000..26ea208 --- /dev/null +++ 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'`了。 \ No newline at end of file diff --git a/source/_md/来聊聊关于JS的类.md b/source/_md/真的是在写JS-JavaScript的类.md similarity index 100% rename from source/_md/来聊聊关于JS的类.md rename to source/_md/真的是在写JS-JavaScript的类.md diff --git a/source/_md/BOM.md b/source/_posts/浏览器的老伙计-BOM.md similarity index 93% rename from source/_md/BOM.md rename to source/_posts/浏览器的老伙计-BOM.md index 9fc6edc..984a822 100644 --- a/source/_md/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属性，用来保存历史记录的数量。 \ No newline at end of file +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对象为访问该刘安祺的历史记录开了一个小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。 \ No newline at end of file diff --git a/source/images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp b/source/images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp new file mode 100644 index 0000000..56731b5 Binary files /dev/null and b/source/images/浏览器的老伙计-BOM/2020-12-22-15-00-54.webp differ diff --git a/source/images/浏览器的老伙计-BOM/browser-post.psd b/source/images/浏览器的老伙计-BOM/browser-post.psd new file mode 100644 index 0000000..cd4e4d6 Binary files /dev/null and b/source/images/浏览器的老伙计-BOM/browser-post.psd differ diff --git a/source/images/浏览器的老伙计-BOM/logo.webp b/source/images/浏览器的老伙计-BOM/logo.webp new file mode 100644 index 0000000..e46147a Binary files /dev/null and b/source/images/浏览器的老伙计-BOM/logo.webp differ