From 4871a735fceda99061115bc681bde4491e2405d1 Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月12日 16:56:34 +0800 Subject: [PATCH 001/340] docs(bom): edit webworker --- docs/bom/webworker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/bom/webworker.md b/docs/bom/webworker.md index a9e0378..6a0d034 100644 --- a/docs/bom/webworker.md +++ b/docs/bom/webworker.md @@ -272,7 +272,7 @@ pollingWorker.postMessage('init'); ## 实例: Worker 新建 Worker -Worker 线程内部还能再新建 Worker 线程。下面的例子是将一个计算密集的任务,分配到10个 Worker。 +Worker 线程内部还能再新建 Worker 线程(目前只有 Firefox 浏览器支持)。下面的例子是将一个计算密集的任务,分配到10个 Worker。 主线程代码如下。 From afa0e2e88be319bd2b756ce87faa76dcd26cee5b Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月13日 09:47:51 +0800 Subject: [PATCH 002/340] docs(oop): edit bom --- docs/oop/prototype.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/oop/prototype.md b/docs/oop/prototype.md index 833bc4f..7ed4a74 100644 --- a/docs/oop/prototype.md +++ b/docs/oop/prototype.md @@ -510,7 +510,7 @@ function StringBuilder() { } ``` -上面代码中,`buffer`是模块的私有变量。一旦生成实例对象,外部是无法直接访问`buffer`的。但是,这种方法将私有变量封装在构造函数中,违反了构造函数与实例对象相分离的原则。并且,非常耗费内存。 +上面代码中,`buffer`是模块的私有变量。一旦生成实例对象,外部是无法直接访问`buffer`的。但是,这种方法将私有变量封装在构造函数中,导致构造函数与实例对象是一体的,总是存在于内存之中,无法在使用完成后清除。这意味着,构造函数有双重作用,既用来塑造实例对象,又用来保存实例对象的数据,违背了构造函数与实例对象在数据上相分离的原则(即实例对象的数据,不应该保存在实例对象以外)。同时,非常耗费内存。 ```javascript function StringBuilder() { From a85f4ea15fb7404ae13a736e66e23165b620fd67 Mon Sep 17 00:00:00 2001 From: GJ Wang Date: 2018年7月13日 11:44:52 +0800 Subject: [PATCH 003/340] docs(dom): fix element --- docs/dom/element.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dom/element.md b/docs/dom/element.md index cb9b5c8..52c31ec 100644 --- a/docs/dom/element.md +++ b/docs/dom/element.md @@ -347,7 +347,7 @@ document.body.clientHeight `Element.clientLeft`属性等于元素节点左边框(left border)的宽度(单位像素),不包括左侧的`padding`和`margin`。如果没有设置左边框,或者是行内元素(`display: inline`),该属性返回`0`。该属性总是返回整数值,如果是小数,会四舍五入。 -`Element.clientTop`属性等于网页元素顶部边框的宽度(单位像素),其他特点都与`clientTop`相同。 +`Element.clientTop`属性等于网页元素顶部边框的宽度(单位像素),其他特点都与`clientLeft`相同。 ### Element.scrollHeight,Element.scrollWidth From 9a5fafc422c3639690e6c8e4697893864db3e71f Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月14日 19:10:46 +0800 Subject: [PATCH 004/340] docs(bom): fix web worker --- docs/bom/webworker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/bom/webworker.md b/docs/bom/webworker.md index 6a0d034..3b8f11f 100644 --- a/docs/bom/webworker.md +++ b/docs/bom/webworker.md @@ -238,7 +238,7 @@ worker.onmessage = function (e) { ```javascript function createWorker(f) { - var blob = new Blob([f.toString()]); + var blob = new Blob(['(' + f.toString() + ')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker; From f8577115bb2094b78fd0ee6afe73c0acd91dcc21 Mon Sep 17 00:00:00 2001 From: snow212-cn Date: 2018年7月15日 13:42:19 +0800 Subject: [PATCH 005/340] Update window.md --- docs/bom/window.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/bom/window.md b/docs/bom/window.md index 517cb17..9da5449 100644 --- a/docs/bom/window.md +++ b/docs/bom/window.md @@ -151,7 +151,7 @@ if (window.parent !== window.top) { 注意,这两个属性的返回值不是整数,而是双精度浮点数。如果页面没有滚动,它们的值就是`0`。 -举例来说,如果用户向下拉动了垂直滚动条75像素,那么`window.pageYOffset`就是75左右。用户水平向右拉动水平滚动条200像素,`window.pageXOffset`就是200左右。 +举例来说,如果用户向下拉动了垂直滚动条75像素,那么`window.scrollY`就是75左右。用户水平向右拉动水平滚动条200像素,`window.scrollX`就是200左右。 ```javascript if (window.scrollY < 75) { @@ -171,7 +171,7 @@ if (window.scrollY < 75) { - `window.locationbar`:地址栏对象 - `window.menubar`:菜单栏对象 -- `window.scrollbar`:窗口的滚动条对象 +- `window.scrollbars`:窗口的滚动条对象 - `window.toolbar`:工具栏对象 - `window.statusbar`:状态栏对象 - `window.personalbar`:用户安装的个人工具栏对象 @@ -181,7 +181,7 @@ if (window.scrollY < 75) { ```javascript window.locationbar.visible window.menubar.visible -window.scrollbar.visible +window.scrollbars.visible window.toolbar.visible window.statusbar.visible window.personalbar.visible From 0fcced878ab3b3d082be4e8c4b1eb7b565ce8a1e Mon Sep 17 00:00:00 2001 From: snow212-cn Date: 2018年7月15日 14:50:48 +0800 Subject: [PATCH 006/340] Update location.md --- docs/bom/location.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/bom/location.md b/docs/bom/location.md index 0052744..4f782da 100644 --- a/docs/bom/location.md +++ b/docs/bom/location.md @@ -173,7 +173,7 @@ decodeURIComponent('%E6%98%A5%E8%8A%82') `URL`对象是浏览器的原生对象,可以用来构造、解析和编码 URL。一般情况下,通过`window.URL`可以拿到这个对象。 -``元素和``元素都部署了这个接口。这就是说,它们的 DOM 节点对象可以 URL 的实例属性和方法。 +``元素和``元素都部署了这个接口。这就是说,它们的 DOM 节点对象可以使用 URL 的实例属性和方法。 ```javascript var a = document.createElement('a'); From 9e9399c39b24cea016aea5dbd89b9dd1b58a7f6f Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月17日 21:39:12 +0800 Subject: [PATCH 007/340] docs(dom): fix NodeList #14 --- docs/dom/nodelist.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/dom/nodelist.md b/docs/dom/nodelist.md index ff9fd65..b646b8e 100644 --- a/docs/dom/nodelist.md +++ b/docs/dom/nodelist.md @@ -2,7 +2,7 @@ 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点。DOM 提供两种节点集合,用于容纳多个节点:`NodeList`和`HTMLCollection`。 -这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是`NodeList`实例或`HTMLCollection`实例。 +这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是`NodeList`实例或`HTMLCollection`实例。主要区别是,`NodeList`可以包含各种类型的节点,`HTMLCollection`只能包含 HTML 元素节点。 ## NodeList 接口 @@ -11,7 +11,7 @@ `NodeList`实例是一个类似数组的对象,它的成员是节点对象。通过以下方法可以得到`NodeList`实例。 - `Node.childNodes` -- `document.querySelectorAll()`、`document.getElementsByTagName()`等节点搜索方法 +- `document.querySelectorAll()`等节点搜索方法 ```javascript document.body.childNodes instanceof NodeList // true From 1a740747c7b29dbc63b6e7dd67317f4204d774b3 Mon Sep 17 00:00:00 2001 From: GJ Wang Date: 2018年7月19日 12:11:31 +0800 Subject: [PATCH 008/340] docs(dom): fix css --- docs/dom/css.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/dom/css.md b/docs/dom/css.md index ae4bb57..b4ea670 100644 --- a/docs/dom/css.md +++ b/docs/dom/css.md @@ -389,6 +389,8 @@ var myStyleSheet = document.getElementById('myStyle').sheet; myStyleSheet instanceof StyleSheet // true ``` +`CSSStyleSheet`接口代表一个单一的 CSS 样式表,它从父代`StyleSheet`继承属性和方法 + ### 实例属性 `StyleSheet`实例有以下属性。 @@ -457,9 +459,9 @@ if (stylesheet.parentStyleSheet) { document.styleSheets[0].ownerNode // [object HTMLLinkElement] ``` -**(8)StyleSheet.cssRules** +**(8)CSSStyleSheet.cssRules** -`StyleSheet.cssRules`属性指向一个类似数组的对象(`CSSRuleList`实例),里面每一个成员就是当前样式表的一条 CSS 规则。使用该规则的`cssText`属性,可以得到 CSS 规则对应的字符串。 +`CSSStyleSheet.cssRules`属性指向一个类似数组的对象(`CSSRuleList`实例),里面每一个成员就是当前样式表的一条 CSS 规则。使用该规则的`cssText`属性,可以得到 CSS 规则对应的字符串。 ```javascript var sheet = document.querySelector('#styleElement').sheet; @@ -474,11 +476,11 @@ sheet.cssRules[1].cssText 每条 CSS 规则还有一个`style`属性,指向一个对象,用来读写具体的 CSS 命令。 ```javascript -styleSheet.cssRules[0].style.color = 'red'; -styleSheet.cssRules[1].style.color = 'purple'; +cssStyleSheet.cssRules[0].style.color = 'red'; +cssStyleSheet.cssRules[1].style.color = 'purple'; ``` -**(9)StyleSheet.ownerRule** +**(9)CSSStyleSheet.ownerRule** 有些样式表是通过`@import`规则输入的,它的`ownerRule`属性会返回一个`CSSRule`实例,代表那行`@import`规则。如果当前样式表不是通过`@import`引入的,`ownerRule`属性返回`null`。 From a1b6632f3e31632b257759510b0a4b9130bb8401 Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月20日 17:10:38 +0800 Subject: [PATCH 009/340] docs(features): fix typo #19 --- docs/features/conversion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/conversion.md b/docs/features/conversion.md index 9a68298..a71ed28 100644 --- a/docs/features/conversion.md +++ b/docs/features/conversion.md @@ -22,7 +22,7 @@ var x = y ? 1 : 'a'; ## 强制转换 -强制转换主要指使用`Number`、`String`和`Boolean`三个函数,手动将各种类型的值,分布转换成数字、字符串或者布尔值。 +强制转换主要指使用`Number()`、`String()`和`Boolean()`三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。 ### Number() From bbd54ee7333fbd9c58e8b6dd4afbebc897b0f867 Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月20日 17:36:37 +0800 Subject: [PATCH 010/340] =?UTF-8?q?docs(dom)=EF=BC=9A=20edit=20css/stylesh?= =?UTF-8?q?eet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/dom/css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dom/css.md b/docs/dom/css.md index b4ea670..b7d6aa0 100644 --- a/docs/dom/css.md +++ b/docs/dom/css.md @@ -389,7 +389,7 @@ var myStyleSheet = document.getElementById('myStyle').sheet; myStyleSheet instanceof StyleSheet // true ``` -`CSSStyleSheet`接口代表一个单一的 CSS 样式表,它从父代`StyleSheet`继承属性和方法 +严格地说,`StyleSheet`接口不仅包括网页样式表,还包括 XML 文档的样式表。所以,它有一个子类`CSSStyleSheet`表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例,实际上是`CSSStyleSheet`的实例。这个子接口继承了`StyleSheet`的所有属性和方法,并且定义了几个自己的属性,下面把这两个接口放在一起介绍。 ### 实例属性 From d070b857033bbf48a815f80cec064be689e51cd5 Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2018年7月25日 14:57:59 +0800 Subject: [PATCH 011/340] docs(dom): fix document --- docs/bom/storage.md | 7 +++--- docs/dom/document.md | 4 ++-- docs/elements/video.md | 51 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 docs/elements/video.md diff --git a/docs/bom/storage.md b/docs/bom/storage.md index cb6f83a..12904ab 100644 --- a/docs/bom/storage.md +++ b/docs/bom/storage.md @@ -113,10 +113,9 @@ window.addEventListener('storage', onStorageChange); - `StorageEvent.key`:字符串,表示发生变动的键名。如果 storage 事件是由`clear()`方法引起,该属性返回`null`。 - `StorageEvent.newValue`:字符串,表示新的键值。如果 storage 事件是由`clear()`方法或删除该键值对引发的,该属性返回`null`。 -- `Storage.oldValue`:字符串,表示旧的键值。如果该键值对是新增的,该属性返回`null`。 -- `Storage.storageArea`:对象,返回键值对所在的整个对象。也说是说,可以从这个属性上面拿到当前域名储存的所有键值对。 -- `Storage.url`:字符串,表示原始触发 storage 事件的那个网页的网址。 - +- `StorageEvent.oldValue`:字符串,表示旧的键值。如果该键值对是新增的,该属性返回`null`。 +- `StorageEvent.storageArea`:对象,返回键值对所在的整个对象。也说是说,可以从这个属性上面拿到当前域名储存的所有键值对。 +- `StorageEvent.url`:字符串,表示原始触发 storage 事件的那个网页的网址。 下面是`StorageEvent.key`属性的例子。 diff --git a/docs/dom/document.md b/docs/dom/document.md index 22f595e..577eca1 100644 --- a/docs/dom/document.md +++ b/docs/dom/document.md @@ -2,7 +2,7 @@ ## 概述 -`document`节点对象是文档的根节点,每张网页都有自己的`document`对象。`window.document`属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。 +`document`节点对象代表整个文档,每张网页都有自己的`document`对象。`window.document`属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。 `document`对象有不同的办法可以获取。 @@ -41,7 +41,7 @@ doctype.name // "html" **(3)document.documentElement** -`document.documentElement`属性返回当前文档的根节点(root)。它通常是`document`节点的第二个子节点,紧跟在`document.doctype`节点后面。HTML网页的该属性,一般是``节点。 +`document.documentElement`属性返回当前文档的根元素节点(root)。它通常是`document`节点的第二个子节点,紧跟在`document.doctype`节点后面。HTML网页的该属性,一般是``节点。 **(4)document.body,document.head** diff --git a/docs/elements/video.md b/docs/elements/video.md new file mode 100644 index 0000000..5cd5b70 --- /dev/null +++ b/docs/elements/video.md @@ -0,0 +1,51 @@ +#