From 36c8803f7b74ec5e1dfde6dee9961c2bdc4ad3a0 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 24 Jul 2018 11:35:29 +0800 Subject: [PATCH 01/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...04\344\270\200\344\272\233\344\272\213.md" | 335 ++++++++++-------- 1 file changed, 187 insertions(+), 148 deletions(-) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index 8f6a099..55a7a46 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -9,244 +9,283 @@ 最近被同学问道 JavaScript 单线程的一些事，我竟回答不上。好吧，感觉自己的 JavaScript 白学了。下面是我这几天整理的一些关于 JavaScript 单线程的一些事。 ## 首先，说下为什么 JavaScript 是单线程？ -总所周知，JavaScript是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢？ + +总所周知，JavaScript 是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢？ > 进程和线程都是操作系统的概念。进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过程中能够申请创建和使用系统资源（如独立的内存区域等），这些资源也会随着进程的终止而被销毁。而线程则是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资源的，所以在多线程的情况下，需要特别注意对临界资源的访问控制。在系统创建进程之后就开始启动执行进程的主线程，而进程的生命周期和这个主线程的生命周期一致，主线程的退出也就意味着进程的终止和销毁。主线程是由系统进程所创建的，同时用户也可以自主创建其它线程，这一系列的线程都会并发地运行于同一个进程中。 -显然，在多线程操作下可以实现应用的**并行处理**，从而以更高的CPU利用率提高整个应用程序的性能和吞吐量。特别是现在很多语言都支持多核并行处理技术，然而JavaScript却以单线程执行，为什么呢？ +显然，在多线程操作下可以实现应用的**并行处理**，从而以更高的 CPU 利用率提高整个应用程序的性能和吞吐量。特别是现在很多语言都支持多核并行处理技术，然而 JavaScript 却以单线程执行，为什么呢？ -其实这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。若以多线程的方式操作这些DOM，则可能出现操作的冲突。假设有两个线程同时操作一个DOM元素，线程1要求浏览器删除DOM，而线程2却要求修改DOM样式，这时浏览器就无法决定采用哪个线程的操作。当然，我们可以为浏览器引入“锁”的机制来解决这些冲突，但这会大大提高复杂性，所以 JavaScript 从诞生开始就选择了单线程执行。 +其实这与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。若以多线程的方式操作这些 DOM，则可能出现操作的冲突。假设有两个线程同时操作一个 DOM 元素，线程 1 要求浏览器删除 DOM，而线程 2 却要求修改 DOM 样式，这时浏览器就无法决定采用哪个线程的操作。当然，我们可以为浏览器引入“锁”的机制来解决这些冲突，但这会大大提高复杂性，所以 JavaScript 从诞生开始就选择了单线程执行。 -另外，因为 JavaScript 是单线程的，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行。那么对于类似I/O等耗时的任务，就没必要等待他们执行完后才继续后面的操作。在这些任务完成前，JavaScript完全可以往下执行其他操作，当这些耗时的任务完成后则以回调的方式执行相应处理。这些就是JavaScript与生俱来的特性：异步与回调。 +另外，因为 JavaScript 是单线程的，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行。那么对于类似 I/O 等耗时的任务，就没必要等待他们执行完后才继续后面的操作。在这些任务完成前，JavaScript 完全可以往下执行其他操作，当这些耗时的任务完成后则以回调的方式执行相应处理。这些就是 JavaScript 与生俱来的特性：异步与回调。 -当然对于不可避免的耗时操作（如：繁重的运算，多重循环），HTML5提出了**Web Worker**，它会在当前JavaScript的执行主线程中利用Worker类新开辟一个额外的线程来加载和运行特定的JavaScript文件，这个新的线程和JavaScript的主线程之间并不会互相影响和阻塞执行，而且在Web Worker中提供了这个新线程和JavaScript主线程之间数据交换的接口：postMessage和onMessage事件。但在HTML5 Web Worker中是不能操作DOM的，任何需要操作DOM的任务都需要委托给JavaScript主线程来执行，所以虽然引入HTML5 Web Worker，但仍然没有改线JavaScript单线程的本质。 +当然对于不可避免的耗时操作（如：繁重的运算，多重循环），HTML5 提出了**Web Worker**，它会在当前 JavaScript 的执行主线程中利用 Worker 类新开辟一个额外的线程来加载和运行特定的 JavaScript 文件，这个新的线程和 JavaScript 的主线程之间并不会互相影响和阻塞执行，而且在 Web Worker 中提供了这个新线程和 JavaScript 主线程之间数据交换的接口：postMessage 和 onMessage 事件。但在 HTML5 Web Worker 中是不能操作 DOM 的，任何需要操作 DOM 的任务都需要委托给 JavaScript 主线程来执行，所以虽然引入 HTML5 Web Worker，但仍然没有改线 JavaScript 单线程的本质。 -## 并发模式与Event Loop +## 并发模式与 Event Loop **JavaScript 有个基于“Event Loop”并发的模型。** -啊，并发？不是说 JavaScript是单线程吗？ 没错，的确是单线程，但是并发与并行是有区别的。 +啊，并发？不是说 JavaScript 是单线程吗？ 没错，的确是单线程，但是并发与并行是有区别的。 前者是逻辑上的同时发生，而后者是物理上的同时发生。所以，单核处理器也能实现并发。 ![并发与并行][1] 并发与并行 -并行大家都好理解，而**所谓“并发”是指两个或两个以上的事件在同一时间间隔中发生。**如上图的第一个表，由于计算机系统只有一个CPU，故ABC三个程序从“微观”上是交替使用CPU，但交替时间很短，用户察觉不到，形成了“宏观”意义上的并发操作。 +并行大家都好理解，而**所谓“并发”是指两个或两个以上的事件在同一时间间隔中发生。**如上图的第一个表，由于计算机系统只有一个 CPU，故 ABC 三个程序从“微观”上是交替使用 CPU，但交替时间很短，用户察觉不到，形成了“宏观”意义上的并发操作。 ### Runtime 概念 + 下面的内容解释一个理论上的模型。现代 JavaScript 引擎已着重实现和优化了以下所描述的几个概念。 ![Stack、Heap、Queue][2] #### Stack（栈） -这里放着JavaScript正在执行的任务。每个任务被称为帧（stack of frames）。 - function f(b){ - var a = 12; - return a+b+35; - } - - function g(x){ - var m = 4; - return f(m*x); - } - - g(21); +这里放着 JavaScript 正在执行的任务。每个任务被称为帧（stack of frames）。 + +``` +function f(b) { + var a = 12; + return a+b+35; +} + +function g(x) { + var m = 4; + return f(m*x); +} + +g(21); +``` 上述代码调用 `g` 时，创建栈的第一帧，该帧包含了 `g` 的参数和局部变量。当 `g` 调用 `f` 时，第二帧就会被创建，并且置于第一帧之上，当然，该帧也包含了 `f` 的参数和局部变量。当 `f` 返回时，其对应的帧就会出栈。同理，当 `g` 返回时，栈就为空了（**栈的特定就是后进先出** Last-in first-out (LIFO)）。 #### Heap（堆） + 一个用来表示内存中一大片非结构化区域的名字，对象都被分配在这。 #### Queue（队列） + 一个 JavaScript runtime 包含了一个任务队列，该队列是由一系列待处理的任务组成。而每个任务都有相对应的函数。当栈为空时，就会从任务队列中取出一个任务，并处理之。该处理会调用与该任务相关联的一系列函数（因此会创建一个初始栈帧）。当该任务处理完毕后，栈就会再次为空。**（Queue的特点是先进先出 First-in First-out (FIFO)）。** 为了方便描述与理解，作出以下约定： - - Stack栈为**主线程** - - Queue队列为**任务队列（等待调度到主线程执行）** + - Stack 栈为**主线程** + - Queue 队列为**任务队列（等待调度到主线程执行）** OK，上述知识点帮助我们理清了一个 JavaScript runtime 的相关概念，这有助于接下来的分析。 ### Event Loop -之所以被称为Event loop，是因为它以以下类似方式实现： - while(queue.waitForMessage()){ - queue.processNextMessage(); - } +之所以被称为 Event loop，是因为它以以下类似方式实现： + +``` +while(queue.waitForMessage()) { + queue.processNextMessage(); +} +``` -正如上述所说，“任务队列”是一个事件的队列，如果I/O设备完成任务或用户触发事件（该事件指定了回调函数），那么相关事件处理函数就会进入“任务队列”，当主线程空闲时，就会调度“任务队列”里第一个待处理任务，（FIFO）。当然，对于定时器，当到达其指定时间时，才会把相应任务插到“任务队列”尾部。 +正如上述所说，“任务队列”是一个事件的队列，如果 I/O 设备完成任务或用户触发事件（该事件指定了回调函数），那么相关事件处理函数就会进入“任务队列”，当主线程空闲时，就会调度“任务队列”里第一个待处理任务（FIFO）。当然，对于定时器，当到达其指定时间时，才会把相应任务插到“任务队列”尾部。 #### “执行至完成” + 每当某个任务执行完后，其它任务才会被执行。也就是说，当一个函数运行时，它不能被取代且会在其它代码运行前先完成。 -当然，这也是Event Loop的一个**缺点**：当一个任务完成时间过长，那么应用就不能及时处理用户的交互（如点击事件），甚至导致该应用奔溃。一个比较好解决方案是：将任务完成时间缩短，或者尽可能将一个任务分成多个任务执行。 +当然，这也是 Event Loop 的一个**缺点**：当一个任务完成时间过长，那么应用就不能及时处理用户的交互（如点击事件），甚至导致该应用奔溃。一个比较好解决方案是：将任务完成时间缩短，或者尽可能将一个任务分成多个任务执行。 #### 绝不阻塞 -JavaScript与其它语言不同，其Event Loop的一个特性是永不阻塞。I/O操作通常是通过事件和回调函数处理。所以，当应用等待 indexedDB 或 XHR 异步请求返回时，其仍能处理其它操作（如用户输入）。 -例外是存在的，如alert或者同步XHR，但避免它们被认为是最佳实践。注意的是，例外的例外也是存在的（但通常是实现错误而非其它原因)。 +JavaScript 与其它语言不同，其 Event Loop 的一个特性是永不阻塞。I/O 操作通常是通过事件和回调函数处理。所以，当应用等待 indexedDB 或 XHR 异步请求返回时，其仍能处理其它操作（如用户输入）。 + +例外是存在的，如 alert 或者同步 XHR，但避免它们被认为是最佳实践。注意的是，例外的例外也是存在的（但通常是实现错误而非其它原因)。 ### 定时器 + #### 定时器的一些概念 -上面也提到，在到达指定时间时，定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器(timer)”功能。 -[定时器](http://dev.w3.org/html5/spec-preview/timers.html) 包括setTimeout与setInterval两个方法。它们的第二个参数是指定其回调函数推迟\每隔多少毫秒数后执行。 +上面也提到，在到达指定时间时，定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器（timer）”功能。 + +[定时器](http://dev.w3.org/html5/spec-preview/timers.html) 包括 setTimeout 与 setInterval 两个方法。它们的第二个参数是指定其回调函数推迟\每隔多少毫秒数后执行。 + 对于第二个参数有以下需要注意的地方： - - 当第二个参数缺省时，默认为0； - - 当指定的值小于4毫秒，则增加到4ms（4ms是HTML5标准指定的，对于2010年及之前的浏览器则是10ms）； + - 当第二个参数缺省时，默认为 0； + - 当指定的值小于 4 毫秒，则增加到 4ms（4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms）； 如果你理解上述知识，那么以下代码就应该对你没什么问题了： - console.log(1); - setTimeout(function(){ - console.log(2); - },10); - console.log(3); - // 输出：1 3 2 +``` +console.log(1); +setTimeout(function() { + console.log(2); +},10); +console.log(3); +// 输出：1 3 2 +``` #### 深入了解定时器 + ##### 零延迟 setTimeout(func, 0) + 零延迟并不是意味着回调函数立刻执行。它取决于主线程当前是否空闲与“任务队列”里其前面正在等待的任务。 看看以下代码： - - (function () { - console.log('this is the start'); - - setTimeout(function cb() { - console.log('this is a msg from call back'); - }); - - console.log('this is just a message'); - - setTimeout(function cb1() { - console.log('this is a msg from call back1'); - }, 0); - - console.log('this is the end'); - - })(); - - // 输出如下： - this is the start - this is just a message - this is the end - undefined // 立即调用函数的返回值 - this is a msg from callback - this is a msg from a callback1 - -##### **setTimeout(func, 0)的作用** - - - 让浏览器渲染当前的元素更改（浏览器将UI render和JavaScript的执行是放在一个线程中，线程阻塞会导致界面无法更新渲染） - - 重新评估”scriptis running too long”警告 +``` +(function () { + + console.log('this is the start'); + + setTimeout(function cb() { + console.log('this is a msg from callback'); + }); + + console.log('this is just a message'); + + setTimeout(function cb1() { + console.log('this is a msg from callback1'); + }, 0); + + console.log('this is the end'); + +})(); + +// 输出如下： +this is the start +this is just a message +this is the end +undefined // 立即调用函数的返回值 +this is a msg from callback +this is a msg from callback1 +``` + +##### **setTimeout(func, 0) 的作用** + + - 让浏览器渲染当前的元素更改（浏览器将 UI render 和 JavaScript 的执行是放在一个线程中，线程阻塞会导致界面无法更新渲染） + - 重新评估“scriptis running too long”警告 - 改变执行顺序 再看看以下代码： - -
-
- - - $('#do').on('click', function(){ - - $('#status').text('calculating....');// 此处会触发redraw事件，但会放到队列里执行，直到long()执行完。 - - // 没设定定时器，用户将无法看到“calculating...” - long();// 执行长时间任务，造成阻塞 - - // 设定了定时器，用户就如期看到“calculating...” - //setTimeout(long,50);// 大约50ms后，将耗时长的long回调函数插入“任务队列”末尾，根据先进先出原则，其将在redraw之后被调度到主线程执行 - - }); - - function long(){ - var result = 0 - for (var i = 0; i<1000; i++){ - for (var j = 0; j<1000; j++){ - for (var k = 0; k<1000; k++){ - result = result + i+j+k - } - } +``` + +
+
+ + +$('#do').on('click', function() { + + // 此处会触发 redraw 事件，但会放到队列里执行，直到 long() 执行完。 + $('#status').text('calculating....'); + + // 没设定定时器，用户将无法看到 “calculating...” + // 这是因为“calculation”的 redraw 事件会紧接在 + // “calculating...”的 redraw 事件后执行 + long(); // 执行长时间任务，造成阻塞 + + // 设定了定时器，用户就如期看到“calculating...” + // 大约 50ms 后，将耗时长的 long 回调函数插入“任务队列”末尾， + // 根据先进先出原则，其将在 redraw 之后被调度到主线程执行 + //setTimeout(long,50); + +}); + +function long() { + var result = 0 + for (var i = 0; i<1000; i++){ + for (var j = 0; j<1000; j++){ + for (var k = 0; k<1000; k++){ + result = result + i+j+k } - $('#status').text('calclation done'); // 在本案例中，该语句必须放到这里，这将使它与回调函数的行为类似 - } + } + } + // 在本案例中，该语句必须放到这里，这将使它与回调函数的行为类似 + $('#status').text('calculation done'); +} +``` -###### **正版与翻版setInterval的区别** -大家都可能知道通过setTimeout可以模仿setInterval的效果，下面我们看看以下代码的区别： +###### **正版与翻版 setInterval 的区别** - // 利用setTimeout模仿setInterval - setTimeout(function(){ - /* 执行一些操作. */ - setTimeout(arguments.callee, 1000); - }, 1000); - - setInterval(function(){ - /* 执行一些操作 */ - }, 1000); +大家都可能知道通过 setTimeout 可以模仿 setInterval 的效果，下面我们看看以下代码的区别： -可能你认为这没什么区别。的确，当回调函数里的操作耗时很短时，并不能看出它们有什么区别。 -其实：上面案例中的 setTimeout 总是会在其回调函数执行后延迟 1000ms（或者更多，但不可能少）再次执行回调函数，从而实现setInterval的效果，而 setInterval 总是 1000ms 执行一次，而不管它的回调函数执行多久。 +``` +// 利用 setTimeout 模仿 setInterval +setTimeout(function() { + /* 执行一些操作. */ + setTimeout(arguments.callee, 1000); +}, 1000); + +setInterval(function() { + /* 执行一些操作 */ +}, 1000); +``` + +可能你认为这没什么区别。的确，当回调函数里的操作耗时很短时，并不能看出它们有什么区别。 +其实：上面案例中的 setTimeout 总是会在其回调函数执行后延迟 1000ms（或者更多，但不可能少）再次执行回调函数，从而实现 setInterval 的效果，而 setInterval 总是 1000ms 执行一次，而不管它的回调函数执行多久。 所以，如果 setInterval 的回调函数执行时间比你指定的间隔时间相等或者更长，那么其回调函数会连在一起执行。 你可以试试运行以下代码： - var counter = 0; - var initTime = new Date().getTime(); - var timer = setInterval(function(){ - if(counter===2){ - clearInterval(timer); - } - if(counter === 0){ - for(var i = 0; i < 1990000000; i++){ - ; - } - } - - console.log("第"+counter+"次：" + (new Date().getTime() - initTime) + " ms"); - - counter++; - },1000); - -我电脑Chrome浏览器的输入如下： - - 第0次：2007 ms - 第1次：2013 ms - 第2次：3008 ms - -从上面的执行结果可看出，第一次和第二次执行间隔很短（不足1000ms）。 +``` +var counter = 0; + var initTime = new Date().getTime(); + var timer = setInterval(function() { + if(counter===2) { + clearInterval(timer); + } + if(counter === 0) { + for(var i = 0; i < 1990000000; i++) { + ; + } + } + + console.log("第"+counter+"次：" + (new Date().getTime() - initTime) + " ms"); + + counter++; +},1000); +``` + +我电脑 Chrome 浏览器的输入如下： + +``` + 第0次：2007 ms + 第1次：2013 ms + 第2次：3008 ms +``` + +从上面的执行结果可看出，第一次和第二次执行间隔很短（不足 1000ms）。 ### 浏览器 + #### 浏览器不是单线程的 -上面说了这么多关于JavaScript是单线程的，下面说说其宿主环境——浏览器。 + +上面说了这么多关于 JavaScript 是单线程的，下面说说其宿主环境——浏览器。 **浏览器的内核是多线程**的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程： - 1. JavaScript引擎线程 JavaScript引擎是基于事件驱动单线程执行的，JavaScript 引擎一直等待着任务队列中任务的到来，然后加以处理。 - 2. GUI渲染线程 GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。 - 3. 浏览器事件触发线程 事件触发线程，当一个事件被触发时该线程会把事件添加到“任务队列”的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JavaScript是单线程执行的，所有这些事件都得排队等待JavaScript引擎处理。 + 1. JavaScript 引擎线程 JavaScript 引擎是基于事件驱动单线程执行的，JavaScript 引擎一直等待着任务队列中任务的到来，然后加以处理。 + 2. GUI 渲染线程 GUI 渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行。但需要注意 GUI 渲染线程与 JavaScript 引擎是互斥的，当 JavaScript 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JavaScript 引擎空闲时立即被执行。 + 3. 浏览器事件触发线程事件触发线程，当一个事件被触发时该线程会把事件添加到“任务队列”的队尾，等待 JavaScript 引擎的处理。这些事件可来自 JavaScript 引擎当前执行的代码块如 setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX 异步请求等，但由于 JavaScript 是单线程执行的，所有这些事件都得排队等待 JavaScript 引擎处理。 -在Chrome浏览器中，为了防止因一个标签页奔溃而影响整个浏览器，其每个标签页都是一个**进程（Renderer Process）**。当然，对于同一域名下的标签页是能够相互通讯的，具体可看 [浏览器跨标签通讯](http://web.jobbole.com/82225/)。在Chrome设计中存在很多的进程，并利用进程间通讯来完成它们之间的同步，因此这也是Chrome快速的法宝之一。对于Ajax的请求也需要特殊线程来执行，当需要发送一个Ajax请求时，浏览器会开辟一个新的线程来执行HTTP的请求，它并不会阻塞JavaScript线程的执行，当HTTP请求状态变更时，相应事件会被作为回调放入到“任务队列”中等待被执行。 +在 Chrome 浏览器中，为了防止因一个标签页奔溃而影响整个浏览器，其每个标签页都是一个**进程（Renderer Process）**。当然，对于同一域名下的标签页是能够相互通讯的，具体可看 [浏览器跨标签通讯](http://web.jobbole.com/82225/)。在 Chrome 设计中存在很多的进程，并利用进程间通讯来完成它们之间的同步，因此这也是 Chrome 快速的法宝之一。对于 Ajax 的请求也需要特殊线程来执行，当需要发送一个 Ajax 请求时，浏览器会开辟一个新的线程来执行 HTTP 的请求，它并不会阻塞 JavaScript 线程的执行，当 HTTP 请求状态变更时，相应事件会被作为回调放入到“任务队列”中等待被执行。 看看以下代码： - document.onclick = function(){ - console.log("click") - } +``` + document.onclick = function() { + console.log("click") + } - for(var i = 0; i< 100000000; i++); + for(var i = 0; i< 100000000; i++); +``` -解释一下代码：首先向document注册了一个click事件，然后就执行了一段耗时的for循环，在这段for循环结束前，你可以尝试点击页面。当耗时操作结束后，console控制台就会输出之前点击事件的"click"语句。这证明了点击事件（也包括其它各种事件）是由额外单独的线程触发的，事件触发后就会将回调函数放进了“任务队列”的末尾，等待着JavaScript主线程的执行。 +解释一下代码：首先向 document 注册了一个 click 事件，然后就执行了一段耗时的 for 循环，在这段 for 循环结束前，你可以尝试点击页面。当耗时操作结束后，console 控制台就会输出之前点击事件的“click”语句。这证明了点击事件（也包括其它各种事件）是由额外单独的线程触发的，事件触发后就会将回调函数放进了“任务队列”的末尾，等待着 JavaScript 主线程的执行。 ## 总结 - - JavaScript是单线程的，同一时刻只能执行特定的任务。而浏览器是多线程的。 - - 异步任务（各种浏览器事件、定时器等）都是先添加到“任务队列”（定时器则到达其指定参数时）。当Stack栈（JS主线程）为空时，就会读取Queue队列（任务队列）的第一个任务（队首），然后执行。 - + - JavaScript 是单线程的，同一时刻只能执行特定的任务，而浏览器是多线程的。 + - 异步任务（各种浏览器事件、定时器等）都是先添加到“任务队列”（定时器则到达其指定参数时）。当 Stack 栈（JavaScript 主线程）为空时，就会读取 Queue 队列（任务队列）的第一个任务（队首），然后执行。 -JavaScript为了避免复杂性，而实现单线程执行。而今JavaScript却变得越来越不简单了，当然这也是JavaScript迷人的地方。 +JavaScript 为了避免复杂性，而实现单线程执行。而如今 JavaScript 却变得越来越不简单了，当然这也是 JavaScript 迷人的地方。 ## 参考资料： From 7bb6145d4cdcfb43a125a09ff797abef4ef3c14d Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 24 Jul 2018 11:38:36 +0800 Subject: [PATCH 02/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2\204\344\270\200\344\272\233\344\272\213.md" | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index 55a7a46..844cd40 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -31,7 +31,7 @@ ![并发与并行][1] 并发与并行 -并行大家都好理解，而**所谓“并发”是指两个或两个以上的事件在同一时间间隔中发生。**如上图的第一个表，由于计算机系统只有一个 CPU，故 ABC 三个程序从“微观”上是交替使用 CPU，但交替时间很短，用户察觉不到，形成了“宏观”意义上的并发操作。 +并行大家都好理解，而**所谓“并发”是指两个或两个以上的事件在同一时间间隔中发生**。如上图的第一个表，由于计算机系统只有一个 CPU，故 ABC 三个程序从“微观”上是交替使用 CPU，但交替时间很短，用户察觉不到，形成了“宏观”意义上的并发操作。 ### Runtime 概念 @@ -248,9 +248,9 @@ var counter = 0; 我电脑 Chrome 浏览器的输入如下： ``` - 第0次：2007 ms - 第1次：2013 ms - 第2次：3008 ms +第0次：2007 ms +第1次：2013 ms +第2次：3008 ms ``` 从上面的执行结果可看出，第一次和第二次执行间隔很短（不足 1000ms）。 @@ -271,11 +271,11 @@ var counter = 0; 看看以下代码： ``` - document.onclick = function() { - console.log("click") - } +document.onclick = function() { + console.log("click") +} - for(var i = 0; i< 100000000; i++); +for(var i = 0; i< 100000000; i++); ``` 解释一下代码：首先向 document 注册了一个 click 事件，然后就执行了一段耗时的 for 循环，在这段 for 循环结束前，你可以尝试点击页面。当耗时操作结束后，console 控制台就会输出之前点击事件的“click”语句。这证明了点击事件（也包括其它各种事件）是由额外单独的线程触发的，事件触发后就会将回调函数放进了“任务队列”的末尾，等待着 JavaScript 主线程的执行。 From 01d35971c43d10aa9ddd48a0d17af4f3a878f261 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 24 Jul 2018 11:39:59 +0800 Subject: [PATCH 03/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\213\347\232\204\344\270\200\344\272\233\344\272\213.md" | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index 844cd40..ebeb705 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -190,11 +190,11 @@ $('#do').on('click', function() { }); function long() { - var result = 0 + var result = 0; for (var i = 0; i<1000; i++){ for (var j = 0; j<1000; j++){ for (var k = 0; k<1000; k++){ - result = result + i+j+k + result = result + i+j+k; } } } @@ -272,7 +272,7 @@ var counter = 0; ``` document.onclick = function() { - console.log("click") + console.log("click"); } for(var i = 0; i< 100000000; i++); From 81f211cbc37fa83f70935db5467a9258eb18e4a5 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Wed, 15 Aug 2018 23:25:16 +0800 Subject: [PATCH 04/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...50\213\347\232\204\344\270\200\344\272\233\344\272\213.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index ebeb705..9a79226 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -47,12 +47,12 @@ ``` function f(b) { var a = 12; - return a+b+35; + return a + b + 35; } function g(x) { var m = 4; - return f(m*x); + return f(m * x); } g(21); From 06ca9695e05f88ced400933e101fda3ff9fc0ccb Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Sun, 19 Aug 2018 18:18:06 +0800 Subject: [PATCH 05/36] Update README.md --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d4a6ba8..b7d0742 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,15 @@ > 更多精彩文章会首发于 [凹凸实验室](https://aotu.io/) 📣📣📣 ## 新博文（存档在 issues 中） - + + - [【译】使用 CSS 分层动画实现曲线运动](https://github.com/JChehe/blog/issues/27) + - [【译】圆形填充—Circle Packing](https://github.com/JChehe/blog/issues/26) + - [【译】一二三—Un Deux Trois](https://github.com/JChehe/blog/issues/25) + - [【译】三角网格—Triangular mesh](https://github.com/JChehe/blog/issues/24) + - [【译】无序方块—Cubic Disarray](https://github.com/JChehe/blog/issues/23) + - [【译】欢乐分队—Joy Division](https://github.com/JChehe/blog/issues/22) + - [【译】瓷砖线—Tiled Lines](https://github.com/JChehe/blog/issues/21) + - [【译】基于 Vue-router 实现用户认证](https://github.com/JChehe/blog/issues/20) - [【译】如何更好地组织 React 项目](https://github.com/JChehe/blog/issues/19) - [动画：从 AE 到 Web](https://github.com/JChehe/blog/issues/18) - [【译】使用 Fullscreen API 全屏展示内容](https://github.com/JChehe/blog/issues/17) From 2398319298234af9434fcbec36433a3b1525152f Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Mon, 3 Sep 2018 18:31:56 +0800 Subject: [PATCH 06/36] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b7d0742..9eb54c9 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ ## 新博文（存档在 issues 中） + - [正态分布 — 更真实地还原动画](https://github.com/JChehe/blog/issues/29) + - [【译】叶子——可互动的 Web 玩具](https://github.com/JChehe/blog/issues/28) - [【译】使用 CSS 分层动画实现曲线运动](https://github.com/JChehe/blog/issues/27) - [【译】圆形填充—Circle Packing](https://github.com/JChehe/blog/issues/26) - [【译】一二三—Un Deux Trois](https://github.com/JChehe/blog/issues/25) From b5d27cb1ebe4762486d12753f6eae1bcb40d2e7c Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 9 Oct 2018 21:05:29 +0800 Subject: [PATCH 07/36] =?UTF-8?q?Update=20=E8=84=B1=E7=A6=BBjQuery?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8=E5=8E=9F=E7=94=9FAjax.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\214\344\275\277\347\224\250\345\216\237\347\224\237Ajax.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/translation/\350\204\261\347\246\273jQuery\357\274\214\344\275\277\347\224\250\345\216\237\347\224\237Ajax.md" "b/translation/\350\204\261\347\246\273jQuery\357\274\214\344\275\277\347\224\250\345\216\237\347\224\237Ajax.md" index 1c9e0f6..69b4e59 100644 --- "a/translation/\350\204\261\347\246\273jQuery\357\274\214\344\275\277\347\224\250\345\216\237\347\224\237Ajax.md" +++ "b/translation/\350\204\261\347\246\273jQuery\357\274\214\344\275\277\347\224\250\345\216\237\347\224\237Ajax.md" @@ -1,6 +1,6 @@ # 脱离jQuery，使用原生Ajax -标签： Ajax translate +标签： Ajax translation --- From 73faab54dbd6837c61522462ab729c475d206381 Mon Sep 17 00:00:00 2001 From: Jianchao Liu Date: Tue, 9 Oct 2018 21:08:36 +0800 Subject: [PATCH 08/36] typo --- ...54\347\232\204 JS \345\207\275\346\225\260[\350\257\221].md" | 2 +- ...\210\235\345\255\246\350\200\205\346\214\207\345\215\227.md" | 2 +- ...\274\232\346\250\241\345\235\227\346\211\223\345\214\205.md" | 2 +- ...\232\204\346\212\200\346\234\257\347\273\206\350\212\202.md" | 2 +- ...\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git "a/translation/7 \344\270\252\345\237\272\346\234\254\347\232\204 JS \345\207\275\346\225\260[\350\257\221].md" "b/translation/7 \344\270\252\345\237\272\346\234\254\347\232\204 JS \345\207\275\346\225\260[\350\257\221].md" index 9284cb0..4c93d2c 100644 --- "a/translation/7 \344\270\252\345\237\272\346\234\254\347\232\204 JS \345\207\275\346\225\260[\350\257\221].md" +++ "b/translation/7 \344\270\252\345\237\272\346\234\254\347\232\204 JS \345\207\275\346\225\260[\350\257\221].md" @@ -1,6 +1,6 @@ # 7 个基本的 JS 函数 -标签： JavaScript translate +标签： JavaScript translation --- diff --git "a/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 1\343\200\221\357\274\232\345\210\235\345\255\246\350\200\205\346\214\207\345\215\227.md" "b/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 1\343\200\221\357\274\232\345\210\235\345\255\246\350\200\205\346\214\207\345\215\227.md" index 4b82cd6..ac65a48 100644 --- "a/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 1\343\200\221\357\274\232\345\210\235\345\255\246\350\200\205\346\214\207\345\215\227.md" +++ "b/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 1\343\200\221\357\274\232\345\210\235\345\255\246\350\200\205\346\214\207\345\215\227.md" @@ -1,6 +1,6 @@ # JavaScript 模块【Part 1】：初学者指南 -标签： JavaScript translate module +标签： JavaScript translation module --- diff --git "a/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 2\343\200\221\357\274\232\346\250\241\345\235\227\346\211\223\345\214\205.md" "b/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 2\343\200\221\357\274\232\346\250\241\345\235\227\346\211\223\345\214\205.md" index 9cf3633..c9a3054 100644 --- "a/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 2\343\200\221\357\274\232\346\250\241\345\235\227\346\211\223\345\214\205.md" +++ "b/translation/JavaScript \346\250\241\345\235\227\343\200\220Part 2\343\200\221\357\274\232\346\250\241\345\235\227\346\211\223\345\214\205.md" @@ -1,6 +1,6 @@ # JavaScript 模块【Part 2】：模块打包 -标签： JavaScript module ES6 translate +标签： JavaScript module ES6 translation --- diff --git "a/translation/Web\345\272\224\347\224\250\344\270\212\347\272\277\344\271\213\345\211\215\357\274\214\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\345\272\224\350\257\245\344\272\206\350\247\243\347\232\204\346\212\200\346\234\257\347\273\206\350\212\202.md" "b/translation/Web\345\272\224\347\224\250\344\270\212\347\272\277\344\271\213\345\211\215\357\274\214\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\345\272\224\350\257\245\344\272\206\350\247\243\347\232\204\346\212\200\346\234\257\347\273\206\350\212\202.md" index 899874f..6a0b7cb 100644 --- "a/translation/Web\345\272\224\347\224\250\344\270\212\347\272\277\344\271\213\345\211\215\357\274\214\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\345\272\224\350\257\245\344\272\206\350\247\243\347\232\204\346\212\200\346\234\257\347\273\206\350\212\202.md" +++ "b/translation/Web\345\272\224\347\224\250\344\270\212\347\272\277\344\271\213\345\211\215\357\274\214\346\257\217\344\270\252\347\250\213\345\272\217\345\221\230\345\272\224\350\257\245\344\272\206\350\247\243\347\232\204\346\212\200\346\234\257\347\273\206\350\212\202.md" @@ -1,6 +1,6 @@ # Web应用上线之前，每个程序员应该了解的技术细节 -标签： Web translate +标签： Web translation --- diff --git "a/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" "b/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" index dc1c146..60f8d95 100644 --- "a/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" +++ "b/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" @@ -1,6 +1,6 @@ # 其实闭包并不高深莫测 -标签： translate closure +标签： translation closure --- 本文由 [伯乐在线](http://web.jobbole.com/) - [刘健超-J.c](http://www.jobbole.com/members/q574805242) 翻译，[Namco](http://www.jobbole.com/members/namco1992) 校稿。未经许可，禁止转载！ From eb6f71256327895f7539d0f43528c7f35a9c4973 Mon Sep 17 00:00:00 2001 From: Jianchao Liu Date: Tue, 9 Oct 2018 21:09:50 +0800 Subject: [PATCH 09/36] =?UTF-8?q?feat:=20=E6=96=87=E7=AB=A0=E5=88=86?= =?UTF-8?q?=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 184 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 129 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 9eb54c9..3756fe7 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,55 @@ -> 更多精彩文章会首发于 [凹凸实验室](https://aotu.io/) 📣📣📣 - -## 新博文（存档在 issues 中） - - - [正态分布 — 更真实地还原动画](https://github.com/JChehe/blog/issues/29) - - [【译】叶子——可互动的 Web 玩具](https://github.com/JChehe/blog/issues/28) - - [【译】使用 CSS 分层动画实现曲线运动](https://github.com/JChehe/blog/issues/27) - - [【译】圆形填充—Circle Packing](https://github.com/JChehe/blog/issues/26) - - [【译】一二三—Un Deux Trois](https://github.com/JChehe/blog/issues/25) - - [【译】三角网格—Triangular mesh](https://github.com/JChehe/blog/issues/24) - - [【译】无序方块—Cubic Disarray](https://github.com/JChehe/blog/issues/23) - - [【译】欢乐分队—Joy Division](https://github.com/JChehe/blog/issues/22) - - [【译】瓷砖线—Tiled Lines](https://github.com/JChehe/blog/issues/21) - - [【译】基于 Vue-router 实现用户认证](https://github.com/JChehe/blog/issues/20) - - [【译】如何更好地组织 React 项目](https://github.com/JChehe/blog/issues/19) - - [动画：从 AE 到 Web](https://github.com/JChehe/blog/issues/18) - - [【译】使用 Fullscreen API 全屏展示内容](https://github.com/JChehe/blog/issues/17) - - [【译】Grid 完整指南](https://github.com/JChehe/blog/issues/16) - - [【译】隧道动画](https://github.com/JChehe/blog/issues/15) - - [【译】探索基于 WebGL 的动画与交互（案例学习）](https://github.com/JChehe/blog/issues/11) - - [《Web API 的设计与开发》读书笔记](https://github.com/JChehe/blog/issues/10) - - [Three.js 现学现卖](https://github.com/JChehe/blog/issues/14) - - [这里有你对 Web 游戏的疑问吗？](https://github.com/JChehe/blog/issues/13) - - [用Web技术实现移动监测](https://github.com/JChehe/blog/issues/12) - - [实现一个简单但有趣的AR效果（Web）](https://github.com/JChehe/blog/issues/9) - - [“等一下，我碰！”——常见的2D碰撞检测](https://github.com/JChehe/blog/issues/8) - - [XCel 项目总结 - Electron 与 Vue 的性能优化](https://github.com/JChehe/blog/issues/7) - - [ -【译】Electron 自动更新的完整教程（Windows 和 OSX）](https://github.com/JChehe/blog/issues/6) - - [【译】Electron 的本质](https://github.com/JChehe/blog/issues/5) - - [我的第一次移动端页面制作 — 总结与思考](https://github.com/JChehe/blog/issues/4) - - [浅谈 WebVR](https://github.com/JChehe/blog/issues/3) - - [CSS 3D Panorama - 淘宝造物节技术剖析](https://github.com/JChehe/blog/issues/2) +### 项目总结 + + - [XCel 项目总结 - Electron 与 Vue 的性能优化][1] + - [我的第一次移动端页面制作 — 总结与思考][2] + +### 归纳分享 + + - [Three.js 现学现卖][3] + - [“等一下，我碰！”——常见的2D碰撞检测][4] + +### 动效动画 + + - [正态分布 — 更真实地还原动画][5] + - [【译】叶子——可互动的 Web 玩具][6] + - [【译】使用 CSS 分层动画实现曲线运动][7] + - [动画：从 AE 到 Web][8] + - [【译】隧道动画][9] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][10] + - [CSS 3D Panorama - 淘宝造物节技术剖析][11] + +### Web 小试验 + + - [这里有你对 Web 游戏的疑问吗？][12] + - [用 Web 技术实现移动监测][13] + - [实现一个简单但有趣的AR效果（Web）][14] + - [浅谈 WebVR][15] + +### 框架 + + - [【译】基于 Vue-router 实现用户认证][16] + - [【译】如何更好地组织 React 项目][17] + +### API 与 技巧 + + - [【译】使用 Fullscreen API 全屏展示内容][18] + - [【译】Grid 完整指南][19] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][20] + +### Generative Artistry + + - [【译】皮特·蒙德里安—Piet Mondrian][21] + - [【译】催眠方块—Hypnotic Squares][22] + - [【译】圆形填充—Circle Packing][23] + - [【译】一二三—Un Deux Trois][24] + - [【译】三角网格—Triangular mesh][25] + - [【译】无序方块—Cubic Disarray][26] + - [【译】欢乐分队—Joy Division][27] + - [【译】瓷砖线—Tiled Lines][28] + +### 读书笔记 + + - [《Web API 的设计与开发》读书笔记][29] ## 关于本博客 @@ -60,30 +79,85 @@ --- ## 之前的记录 + 健超的 Blog，主要是原创文章和翻译技术文章。 ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c](http://www.cnblogs.com/Jccc/)> or <[segmentfault 刘健超_Jc](https://segmentfault.com/u/jc)> - - [Flex 学习](https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md) - - [《CSS 揭秘》读书笔记](https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md) - - [《JavaScript模式》读书笔记](https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md) - - [white-space:nowrap 的妙用](https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md) - - [《图解HTTP》读书笔记](https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md) - - [jQuery 的 attr 与 prop 的区别](https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md) - - [关于 Glob(gulp) 的学习](https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20(gulp)%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md) - - [《JavaScript（ES5）的面向对象精要》读书笔记](https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md) - - [关于JavaScript单线程的一些事](https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md) - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》](https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md) - - [实现类似 QQ音乐网页版 的单页面总结](https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md) + +更多原创文章，可关注 <[博客园 刘健超-J.c][30]> or <[segmentfault 刘健超_Jc][31]> + - [Flex 学习][32] + - [《CSS 揭秘》读书笔记][33] + - [《JavaScript模式》读书笔记][34] + - [white-space:nowrap 的妙用][35] + - [《图解HTTP》读书笔记][36] + - [jQuery 的 attr 与 prop 的区别][37] + - [关于 Glob(gulp) 的学习][38] + - [《JavaScript（ES5）的面向对象精要》读书笔记][39] + - [关于JavaScript单线程的一些事][40] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][41] + - [实现类似 QQ音乐网页版 的单页面总结][42] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c](http://www.jobbole.com/members/q574805242/) - - - [JavaScript 模块【Part 1】：初学者指南](https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md) - - [JavaScript 模块【Part 2】：模块打包](https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md) - - [用Mocha和Chai对JavaScript进行单元测试](https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md) - - [7 个基本的 JS 函数](https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md) - - [Web应用上线之前，每个程序员应该了解的技术细节](https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md) - - [其实闭包并不高深莫测](https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md) - - [如何成为一个JavaScript 大牛？](https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md) - - [脱离jQuery，使用原生Ajax](https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md) + +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][43]。 + + - [JavaScript 模块【Part 1】：初学者指南][44] + - [JavaScript 模块【Part 2】：模块打包][45] + - [用Mocha和Chai对JavaScript进行单元测试][46] + - [7 个基本的 JS 函数][47] + - [Web应用上线之前，每个程序员应该了解的技术细节][48] + - [其实闭包并不高深莫测][49] + - [如何成为一个JavaScript 大牛？][50] + - [脱离jQuery，使用原生Ajax][51] + + [1]: https://github.com/JChehe/blog/issues/7 + [2]: https://github.com/JChehe/blog/issues/4 + [3]: https://github.com/JChehe/blog/issues/14 + [4]: https://github.com/JChehe/blog/issues/8 + [5]: https://github.com/JChehe/blog/issues/29 + [6]: https://github.com/JChehe/blog/issues/28 + [7]: https://github.com/JChehe/blog/issues/27 + [8]: https://github.com/JChehe/blog/issues/18 + [9]: https://github.com/JChehe/blog/issues/15 + [10]: https://github.com/JChehe/blog/issues/11 + [11]: https://github.com/JChehe/blog/issues/2 + [12]: https://github.com/JChehe/blog/issues/13 + [13]: https://github.com/JChehe/blog/issues/12 + [14]: https://github.com/JChehe/blog/issues/9 + [15]: https://github.com/JChehe/blog/issues/3 + [16]: https://github.com/JChehe/blog/issues/20 + [17]: https://github.com/JChehe/blog/issues/19 + [18]: https://github.com/JChehe/blog/issues/17 + [19]: https://github.com/JChehe/blog/issues/16 + [20]: https://github.com/JChehe/blog/issues/6 + [21]: https://github.com/JChehe/blog/issues/31 + [22]: https://github.com/JChehe/blog/issues/30 + [23]: https://github.com/JChehe/blog/issues/26 + [24]: https://github.com/JChehe/blog/issues/25 + [25]: https://github.com/JChehe/blog/issues/24 + [26]: https://github.com/JChehe/blog/issues/23 + [27]: https://github.com/JChehe/blog/issues/22 + [28]: https://github.com/JChehe/blog/issues/21 + [29]: https://github.com/JChehe/blog/issues/10 + [30]: http://www.cnblogs.com/Jccc/ + [31]: https://segmentfault.com/u/jc + [32]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [33]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [34]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [35]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [36]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [37]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [38]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [40]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [43]: http://www.jobbole.com/members/q574805242/ + [44]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [45]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [46]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [47]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [48]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [49]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [50]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [51]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md \ No newline at end of file From d517b745972d0bed809cb8efa9aa18a83dde16fd Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Sun, 14 Oct 2018 22:32:30 +0800 Subject: [PATCH 10/36] =?UTF-8?q?Update=20=E5=85=B6=E5=AE=9E=E9=97=AD?= =?UTF-8?q?=E5=8C=85=E5=B9=B6=E4=B8=8D=E9=AB=98=E6=B7=B1=E8=8E=AB=E6=B5=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" "b/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" index 60f8d95..2028988 100644 --- "a/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" +++ "b/translation/\345\205\266\345\256\236\351\227\255\345\214\205\345\271\266\344\270\215\351\253\230\346\267\261\350\216\253\346\265\213.md" @@ -226,7 +226,7 @@ dogsCounter.increment(); // Number of dogs: 2 dogsCounter.decrement(); // Number of dogs: 1 -`display()`与`increment()`和 `decrement()` 函数看起来非常相似，然而这是大相径庭的。我们没有在结果对象里返回它！这意味着以下代码将会调用失败： +尽管 `display()`与`increment()`、`decrement()` 函数看似大同小异，但由于我们没有在返回对象里包含它，意味着以下代码将会调用失败： var dogsCounter = createCounter("dogs"); From bfd8029e7ff81f40710034079c24bc05cac865f4 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Wed, 24 Oct 2018 11:57:46 +0800 Subject: [PATCH 11/36] Update README.md --- README.md | 123 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 63 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 3756fe7..9304387 100644 --- a/README.md +++ b/README.md @@ -35,21 +35,22 @@ - [【译】使用 Fullscreen API 全屏展示内容][18] - [【译】Grid 完整指南][19] - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][20] + - [【译】Electron 的本质][21] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][21] - - [【译】催眠方块—Hypnotic Squares][22] - - [【译】圆形填充—Circle Packing][23] - - [【译】一二三—Un Deux Trois][24] - - [【译】三角网格—Triangular mesh][25] - - [【译】无序方块—Cubic Disarray][26] - - [【译】欢乐分队—Joy Division][27] - - [【译】瓷砖线—Tiled Lines][28] + - [【译】皮特·蒙德里安—Piet Mondrian][22] + - [【译】催眠方块—Hypnotic Squares][23] + - [【译】圆形填充—Circle Packing][24] + - [【译】一二三—Un Deux Trois][25] + - [【译】三角网格—Triangular mesh][26] + - [【译】无序方块—Cubic Disarray][27] + - [【译】欢乐分队—Joy Division][28] + - [【译】瓷砖线—Tiled Lines][29] ### 读书笔记 - - [《Web API 的设计与开发》读书笔记][29] + - [《Web API 的设计与开发》读书笔记][30] ## 关于本博客 @@ -84,31 +85,32 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][30]> or <[segmentfault 刘健超_Jc][31]> - - [Flex 学习][32] - - [《CSS 揭秘》读书笔记][33] - - [《JavaScript模式》读书笔记][34] - - [white-space:nowrap 的妙用][35] - - [《图解HTTP》读书笔记][36] - - [jQuery 的 attr 与 prop 的区别][37] - - [关于 Glob(gulp) 的学习][38] - - [《JavaScript（ES5）的面向对象精要》读书笔记][39] - - [关于JavaScript单线程的一些事][40] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][41] - - [实现类似 QQ音乐网页版 的单页面总结][42] +更多原创文章，可关注 <[博客园 刘健超-J.c][31]> or <[segmentfault 刘健超_Jc][32]> + - [Flex 学习][33] + - [《CSS 揭秘》读书笔记][34] + - [《JavaScript模式》读书笔记][35] + - [white-space:nowrap 的妙用][36] + - [《图解HTTP》读书笔记][37] + - [jQuery 的 attr 与 prop 的区别][38] + - [关于 Glob(gulp) 的学习][39] + - [《JavaScript（ES5）的面向对象精要》读书笔记][40] + - [关于JavaScript单线程的一些事][41] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][42] + - [实现类似 QQ音乐网页版 的单页面总结][43] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][43]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][44]。 + + - [JavaScript 模块【Part 1】：初学者指南][45] + - [JavaScript 模块【Part 2】：模块打包][46] + - [用Mocha和Chai对JavaScript进行单元测试][47] + - [7 个基本的 JS 函数][48] + - [Web应用上线之前，每个程序员应该了解的技术细节][49] + - [其实闭包并不高深莫测][50] + - [如何成为一个JavaScript 大牛？][51] + - [脱离jQuery，使用原生Ajax][52] - - [JavaScript 模块【Part 1】：初学者指南][44] - - [JavaScript 模块【Part 2】：模块打包][45] - - [用Mocha和Chai对JavaScript进行单元测试][46] - - [7 个基本的 JS 函数][47] - - [Web应用上线之前，每个程序员应该了解的技术细节][48] - - [其实闭包并不高深莫测][49] - - [如何成为一个JavaScript 大牛？][50] - - [脱离jQuery，使用原生Ajax][51] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 @@ -130,34 +132,35 @@ [18]: https://github.com/JChehe/blog/issues/17 [19]: https://github.com/JChehe/blog/issues/16 [20]: https://github.com/JChehe/blog/issues/6 - [21]: https://github.com/JChehe/blog/issues/31 - [22]: https://github.com/JChehe/blog/issues/30 - [23]: https://github.com/JChehe/blog/issues/26 - [24]: https://github.com/JChehe/blog/issues/25 - [25]: https://github.com/JChehe/blog/issues/24 - [26]: https://github.com/JChehe/blog/issues/23 - [27]: https://github.com/JChehe/blog/issues/22 - [28]: https://github.com/JChehe/blog/issues/21 - [29]: https://github.com/JChehe/blog/issues/10 - [30]: http://www.cnblogs.com/Jccc/ - [31]: https://segmentfault.com/u/jc - [32]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [33]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [34]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [35]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [36]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [37]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [38]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [40]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [43]: http://www.jobbole.com/members/q574805242/ - [44]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [45]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [46]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [21]: https://github.com/JChehe/blog/issues/5 + [22]: https://github.com/JChehe/blog/issues/31 + [23]: https://github.com/JChehe/blog/issues/30 + [24]: https://github.com/JChehe/blog/issues/26 + [25]: https://github.com/JChehe/blog/issues/25 + [26]: https://github.com/JChehe/blog/issues/24 + [27]: https://github.com/JChehe/blog/issues/23 + [28]: https://github.com/JChehe/blog/issues/22 + [29]: https://github.com/JChehe/blog/issues/21 + [30]: https://github.com/JChehe/blog/issues/10 + [31]: http://www.cnblogs.com/Jccc/ + [32]: https://segmentfault.com/u/jc + [33]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [34]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [35]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [36]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [38]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [39]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [44]: http://www.jobbole.com/members/q574805242/ + [45]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [46]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md [47]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [48]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [49]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [50]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [51]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md \ No newline at end of file + [48]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [49]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [50]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [51]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [52]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From bc4fbdd20cb1c02fd5b3178d2030bb00c763a90a Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 1 Nov 2018 17:23:26 +0800 Subject: [PATCH 12/36] Update README.md --- README.md | 206 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 106 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index 9304387..ee2e93b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +### 应聘/求职 +中高级前端开发/中初级Node.js开发 +期望地：深圳/广州/东莞 +简历已准备好，摩拳擦掌👊 + ### 项目总结 - [XCel 项目总结 - Electron 与 Vue 的性能优化][1] @@ -10,47 +15,49 @@ ### 动效动画 - - [正态分布 — 更真实地还原动画][5] - - [【译】叶子——可互动的 Web 玩具][6] - - [【译】使用 CSS 分层动画实现曲线运动][7] - - [动画：从 AE 到 Web][8] - - [【译】隧道动画][9] - - [【译】探索基于 WebGL 的动画与交互（案例学习）][10] - - [CSS 3D Panorama - 淘宝造物节技术剖析][11] + - [曲线（路径）运动的那些事][5] + - [正态分布 — 更真实地还原动画][6] + - [【译】叶子——可互动的 Web 玩具][7] + - [【译】使用 CSS 分层动画实现曲线运动][8] + - [动画：从 AE 到 Web][9] + - [【译】隧道动画][10] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][11] + - [CSS 3D Panorama - 淘宝造物节技术剖析][12] ### Web 小试验 - - [这里有你对 Web 游戏的疑问吗？][12] - - [用 Web 技术实现移动监测][13] - - [实现一个简单但有趣的AR效果（Web）][14] - - [浅谈 WebVR][15] + - [这里有你对 Web 游戏的疑问吗？][13] + - [用 Web 技术实现移动监测][14] + - [实现一个简单但有趣的AR效果（Web）][15] + - [浅谈 WebVR][16] ### 框架 - - [【译】基于 Vue-router 实现用户认证][16] - - [【译】如何更好地组织 React 项目][17] + - [【译】基于 Vue-router 实现用户认证][17] + - [【译】如何更好地组织 React 项目][18] ### API 与 技巧 - - [【译】使用 Fullscreen API 全屏展示内容][18] - - [【译】Grid 完整指南][19] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][20] - - [【译】Electron 的本质][21] + - [【译】使用 Fullscreen API 全屏展示内容][19] + - [【译】Grid 完整指南][20] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][21] + - [【译】Electron 的本质][22] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][22] - - [【译】催眠方块—Hypnotic Squares][23] - - [【译】圆形填充—Circle Packing][24] - - [【译】一二三—Un Deux Trois][25] - - [【译】三角网格—Triangular mesh][26] - - [【译】无序方块—Cubic Disarray][27] - - [【译】欢乐分队—Joy Division][28] - - [【译】瓷砖线—Tiled Lines][29] + - [【译】皮特·蒙德里安—Piet Mondrian][23] + - [【译】催眠方块—Hypnotic Squares][24] + - [【译】圆形填充—Circle Packing][25] + - [【译】一二三—Un Deux Trois][26] + - [【译】三角网格—Triangular mesh][27] + - [【译】无序方块—Cubic Disarray][28] + - [【译】欢乐分队—Joy Division][29] + - [【译】瓷砖线—Tiled Lines][30] ### 读书笔记 - - [《Web API 的设计与开发》读书笔记][30] + - [《啊哈！算法》速读笔记][31] + - [《Web API 的设计与开发》读书笔记][32] ## 关于本博客 @@ -58,7 +65,7 @@ 要说翻译的好处，主要有三点： -1. 锻炼英语阅读能力（尽管英语能力依然很水）。 +1. 锻炼英语阅读能力。 2. 伯乐在线对译文的格式和内容要求严格，有利于形成良好的写作习惯。 3. 伯乐在线每月前 5 名有赠书名额（之前的奖励）。 @@ -67,10 +74,7 @@ 1. 记录和总结，方便自己回顾的同时，为社区做出微薄贡献。 2. ... -两者的共同好处： - - 1. 为自己和读者负责，尽可能保证内容的正确性。在这过程中，需要不断搜索资料和验证，提升能力。 - 2. 提升影响力？？？ +两者的共同好处：为自己和读者负责，尽可能保证内容的正确性。在这过程中，需要不断搜索资料和验证，提升能力。 ## 关于版权 @@ -85,82 +89,84 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][31]> or <[segmentfault 刘健超_Jc][32]> - - [Flex 学习][33] - - [《CSS 揭秘》读书笔记][34] - - [《JavaScript模式》读书笔记][35] - - [white-space:nowrap 的妙用][36] - - [《图解HTTP》读书笔记][37] - - [jQuery 的 attr 与 prop 的区别][38] - - [关于 Glob(gulp) 的学习][39] - - [《JavaScript（ES5）的面向对象精要》读书笔记][40] - - [关于JavaScript单线程的一些事][41] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][42] - - [实现类似 QQ音乐网页版 的单页面总结][43] +更多原创文章，可关注 <[博客园 刘健超-J.c][33]> or <[segmentfault 刘健超_Jc][34]> + - [Flex 学习][35] + - [《CSS 揭秘》读书笔记][36] + - [《JavaScript模式》读书笔记][37] + - [white-space:nowrap 的妙用][38] + - [《图解HTTP》读书笔记][39] + - [jQuery 的 attr 与 prop 的区别][40] + - [关于 Glob(gulp) 的学习][41] + - [《JavaScript（ES5）的面向对象精要》读书笔记][42] + - [关于JavaScript单线程的一些事][43] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][44] + - [实现类似 QQ音乐网页版 的单页面总结][45] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][44]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][46]。 - - [JavaScript 模块【Part 1】：初学者指南][45] - - [JavaScript 模块【Part 2】：模块打包][46] - - [用Mocha和Chai对JavaScript进行单元测试][47] - - [7 个基本的 JS 函数][48] - - [Web应用上线之前，每个程序员应该了解的技术细节][49] - - [其实闭包并不高深莫测][50] - - [如何成为一个JavaScript 大牛？][51] - - [脱离jQuery，使用原生Ajax][52] + - [JavaScript 模块【Part 1】：初学者指南][47] + - [JavaScript 模块【Part 2】：模块打包][48] + - [用Mocha和Chai对JavaScript进行单元测试][49] + - [7 个基本的 JS 函数][50] + - [Web应用上线之前，每个程序员应该了解的技术细节][51] + - [其实闭包并不高深莫测][52] + - [如何成为一个JavaScript 大牛？][53] + - [脱离jQuery，使用原生Ajax][54] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 [3]: https://github.com/JChehe/blog/issues/14 [4]: https://github.com/JChehe/blog/issues/8 - [5]: https://github.com/JChehe/blog/issues/29 - [6]: https://github.com/JChehe/blog/issues/28 - [7]: https://github.com/JChehe/blog/issues/27 - [8]: https://github.com/JChehe/blog/issues/18 - [9]: https://github.com/JChehe/blog/issues/15 - [10]: https://github.com/JChehe/blog/issues/11 - [11]: https://github.com/JChehe/blog/issues/2 - [12]: https://github.com/JChehe/blog/issues/13 - [13]: https://github.com/JChehe/blog/issues/12 - [14]: https://github.com/JChehe/blog/issues/9 - [15]: https://github.com/JChehe/blog/issues/3 - [16]: https://github.com/JChehe/blog/issues/20 - [17]: https://github.com/JChehe/blog/issues/19 - [18]: https://github.com/JChehe/blog/issues/17 - [19]: https://github.com/JChehe/blog/issues/16 - [20]: https://github.com/JChehe/blog/issues/6 - [21]: https://github.com/JChehe/blog/issues/5 - [22]: https://github.com/JChehe/blog/issues/31 - [23]: https://github.com/JChehe/blog/issues/30 - [24]: https://github.com/JChehe/blog/issues/26 - [25]: https://github.com/JChehe/blog/issues/25 - [26]: https://github.com/JChehe/blog/issues/24 - [27]: https://github.com/JChehe/blog/issues/23 - [28]: https://github.com/JChehe/blog/issues/22 - [29]: https://github.com/JChehe/blog/issues/21 - [30]: https://github.com/JChehe/blog/issues/10 - [31]: http://www.cnblogs.com/Jccc/ - [32]: https://segmentfault.com/u/jc - [33]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [34]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [35]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [36]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [38]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [39]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [44]: http://www.jobbole.com/members/q574805242/ - [45]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [46]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [47]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [48]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [49]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [50]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [51]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [52]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [5]: https://github.com/JChehe/blog/issues/33 + [6]: https://github.com/JChehe/blog/issues/29 + [7]: https://github.com/JChehe/blog/issues/28 + [8]: https://github.com/JChehe/blog/issues/27 + [9]: https://github.com/JChehe/blog/issues/18 + [10]: https://github.com/JChehe/blog/issues/15 + [11]: https://github.com/JChehe/blog/issues/11 + [12]: https://github.com/JChehe/blog/issues/2 + [13]: https://github.com/JChehe/blog/issues/13 + [14]: https://github.com/JChehe/blog/issues/12 + [15]: https://github.com/JChehe/blog/issues/9 + [16]: https://github.com/JChehe/blog/issues/3 + [17]: https://github.com/JChehe/blog/issues/20 + [18]: https://github.com/JChehe/blog/issues/19 + [19]: https://github.com/JChehe/blog/issues/17 + [20]: https://github.com/JChehe/blog/issues/16 + [21]: https://github.com/JChehe/blog/issues/6 + [22]: https://github.com/JChehe/blog/issues/5 + [23]: https://github.com/JChehe/blog/issues/31 + [24]: https://github.com/JChehe/blog/issues/30 + [25]: https://github.com/JChehe/blog/issues/26 + [26]: https://github.com/JChehe/blog/issues/25 + [27]: https://github.com/JChehe/blog/issues/24 + [28]: https://github.com/JChehe/blog/issues/23 + [29]: https://github.com/JChehe/blog/issues/22 + [30]: https://github.com/JChehe/blog/issues/21 + [31]: https://github.com/JChehe/blog/issues/32 + [32]: https://github.com/JChehe/blog/issues/10 + [33]: http://www.cnblogs.com/Jccc/ + [34]: https://segmentfault.com/u/jc + [35]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [36]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [38]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [40]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [46]: http://www.jobbole.com/members/q574805242/ + [47]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [48]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [49]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [50]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [51]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [52]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [53]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [54]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From 35b7574759269d7a5540cbc117fa00d264d422f3 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Sat, 3 Nov 2018 16:57:56 +0800 Subject: [PATCH 13/36] =?UTF-8?q?Update=20=E5=86=8D=E6=AC=A1=E9=98=85?= =?UTF-8?q?=E8=AF=BB=E3=80=8A=E7=B2=BE=E9=80=9ACSS-=E9=AB=98=E7=BA=A7Web?= =?UTF-8?q?=E6=A0=87=E5=87=86=E8=A7=A3=E5=86=B3=E6=96=B9=E6=A1=88=EF=BC=88?= =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E7=89=88=EF=BC=89=E3=80=8B.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4\344\272\214\347\211\210\357\274\211\343\200\213.md" | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git "a/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" "b/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" index e184204..b1230ae 100644 --- "a/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" +++ "b/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" @@ -78,7 +78,7 @@ IE6的混杂模式下，拥有类似box-sizing:border-box的特性，即指定 只有普通文档流中，块框的垂直外边距才回发生叠加。行内框、浮动框或绝对（个人认为包括绝对定位和固定定位）定位框之间的外边距不会发生叠加。 -####可视化格式模型 +#### 可视化格式模型 CSS中有3种基本的定位机制：普通流、浮动和绝对定位。 @@ -173,7 +173,12 @@ a:hover, a:focus, a:active{text-decoration:underline}
表格标题
-　一个table里，tbody 、tfooter只能使用一个，而tbody可以将复杂的表格划分为多个部分。 +　一个table里，thead 、tfooter只能使用一个，而tbody可以将复杂的表格划分为多个部分。 + +> 这里有三个注意点： +1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。 +2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。 +3）thead、tbody和tfoot里面都必须使用tr标签。 CSS的border-spacing属性可以控制单元格之间的距离。但IE7及以下不支持。因此需要老式但可靠的cellspacing属性（支持IE6和IE7）。严格来说，该属性是表现性的。 From c76a4a3e720e1afd132e47e5baab3f94f579e23b Mon Sep 17 00:00:00 2001 From: Jianchao Liu Date: Mon, 5 Nov 2018 16:21:39 +0800 Subject: [PATCH 14/36] =?UTF-8?q?fix:=20=E4=B8=83=E7=89=9B=E5=9B=BE?= =?UTF-8?q?=E5=BA=8A=E8=BF=81=E7=A7=BB=E5=88=B0=E8=85=BE=E8=AE=AF=E4=BA=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "posts/Flex \345\255\246\344\271\240.md" | 6 ++-- ...ap\347\232\204\345\246\231\347\224\250.md" | 10 +++---- ...73\344\271\246\347\254\224\350\256\260.md" | 2 +- ...73\344\271\246\347\254\224\350\256\260.md" | 14 ++++----- ...73\344\271\246\347\254\224\350\256\260.md" | 30 +++++++++---------- ...14\347\211\210\357\274\211\343\200\213.md" | 22 +++++++------- ...25\345\205\203\346\265\213\350\257\225.md" | 6 ++-- 7 files changed, 45 insertions(+), 45 deletions(-) diff --git "a/posts/Flex \345\255\246\344\271\240.md" "b/posts/Flex \345\255\246\344\271\240.md" index 17ae37a..c448f41 100644 --- "a/posts/Flex \345\255\246\344\271\240.md" +++ "b/posts/Flex \345\255\246\344\271\240.md" @@ -175,6 +175,6 @@ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 au [2]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [3]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html [4]: http://zhoon.github.io/css3/2014/08/23/flex.html - [5]: http://7xq7nb.com1.z0.glb.clouddn.com/flex.png - [6]: http://7xq7nb.com1.z0.glb.clouddn.com/justify-content.png - [7]: http://7xq7nb.com1.z0.glb.clouddn.com/align-content.png + [5]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/flex.png + [6]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/justify-content.png + [7]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/align-content.png diff --git "a/posts/white-space:nowrap\347\232\204\345\246\231\347\224\250.md" "b/posts/white-space:nowrap\347\232\204\345\246\231\347\224\250.md" index 124f5d7..6af4dcc 100644 --- "a/posts/white-space:nowrap\347\232\204\345\246\231\347\224\250.md" +++ "b/posts/white-space:nowrap\347\232\204\345\246\231\347\224\250.md" @@ -81,12 +81,12 @@ IE5上的效果，IE6应该也一样。 - [1]: http://7xq7nb.com1.z0.glb.clouddn.com/nowrap-baseline.jpg - [2]: http://7xq7nb.com1.z0.glb.clouddn.com/nowrap-jianxi.jpg - [3]: http://7xq7nb.com1.z0.glb.clouddn.com/nowrap-inlineORinline-block.jpg + [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/nowrap-baseline.jpg + [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/nowrap-jianxi.jpg + [3]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/nowrap-inlineORinline-block.jpg [4]: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ [5]: http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html - [6]: http://7xq7nb.com1.z0.glb.clouddn.com/nowrap-GIF.gif - [7]: http://7xq7nb.com1.z0.glb.clouddn.com/nowrap-GIF-IE56.gif + [6]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/nowrap-GIF.gif + [7]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/nowrap-GIF-IE56.gif [8]: https://github.com/JChehe/blog [9]: http://jchehe.github.io/resume/ diff --git "a/posts/\343\200\212CSS \346\217\255\347\247\230\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212CSS \346\217\255\347\247\230\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 53ff17f..cb53e14 100644 --- "a/posts/\343\200\212CSS \346\217\255\347\247\230\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212CSS \346\217\255\347\247\230\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -366,4 +366,4 @@ li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{ 完！ - [1]: http://7xq7nb.com1.z0.glb.clouddn.com/%E6%B8%90%E5%8F%98%E8%A7%92%E5%BA%A6.jpg + [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/%E6%B8%90%E5%8F%98%E8%A7%92%E5%BA%A6.jpg diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 45e7765..6a8d372 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -1161,10 +1161,10 @@ JavaScipt 对象的所有属性都是公有的，没有显式的方法指定某 ## 总结 看了两天的书，做了两天的笔记。当然这只是ES5的。过几天 ES6 新书又来了。最后感谢 [异步社区](http://www.epubit.com.cn/) 送我这本好书 [《JavaScript面向对象精要》](http://www.epubit.com.cn/book/details/1798)，让我的前端根基更加稳固，希望自己的前端之路越走越顺。 - [1]: http://7xq7nb.com1.z0.glb.clouddn.com/Object_hash.jpg - [2]: http://7xq7nb.com1.z0.glb.clouddn.com/copy_obj.jpg - [3]: http://7xq7nb.com1.z0.glb.clouddn.com/prototype.jpg - [4]: http://7xq7nb.com1.z0.glb.clouddn.com/%E6%97%A0%E6%A0%87%E9%A2%98.jpg - [5]: http://7xq7nb.com1.z0.glb.clouddn.com/obj_constructor_prototype.jpg - [6]: http://7xq7nb.com1.z0.glb.clouddn.com/%E5%AF%B9%E8%B1%A1%E7%BB%A7%E6%89%BF.jpg - [7]: http://7xq7nb.com1.z0.glb.clouddn.com/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF.jpg + [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/Object_hash.jpg + [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/copy_obj.jpg + [3]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/prototype.jpg + [4]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/%E6%97%A0%E6%A0%87%E9%A2%98.jpg + [5]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/obj_constructor_prototype.jpg + [6]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/%E5%AF%B9%E8%B1%A1%E7%BB%A7%E6%89%BF.jpg + [7]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF.jpg diff --git "a/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 5f1da25..cbc302c 100644 --- "a/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -563,25 +563,25 @@ HTTP不具备必要的安全功能，就拿远程登录时会用到的SSH协议 Github地址：[《图解HTTP》读书笔记][24] - [1]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-9.jpg - [2]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-10.jpg - [3]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-12.jpg - [4]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-13.jpg - [5]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-14.jpg + [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-9.jpg + [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-10.jpg + [3]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-12.jpg + [4]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-13.jpg + [5]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-14.jpg [6]: http://fanyi.jobbole.com/14191/ - [7]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-18.jpg - [8]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-24.jpg - [9]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-25.jpg - [10]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-34.jpg - [11]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-35.jpg - [12]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-36.jpg + [7]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-18.jpg + [8]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-24.jpg + [9]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-25.jpg + [10]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-34.jpg + [11]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-35.jpg + [12]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-36.jpg [13]: https://datatracker.ietf.org/doc/rfc2616/ - [14]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-68.jpg - [15]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-%E4%BB%A3%E7%90%86.png - [16]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-184.jpg + [14]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-68.jpg + [15]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-%E4%BB%A3%E7%90%86.png + [16]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-184.jpg [17]: https://github.com/fex-team/http2-spec/blob/master/HTTP2%E4%B8%AD%E8%8B%B1%E5%AF%B9%E7%85%A7%E7%89%88%2806-29%29.md [18]: https://www.zhihu.com/question/34074946 - [19]: http://7xq7nb.com1.z0.glb.clouddn.com/graphical-http-15.jpg + [19]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/graphical-http-15.jpg [20]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model [21]: http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html [22]: http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers/417184 diff --git "a/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" "b/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" index b1230ae..cd89485 100644 --- "a/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" +++ "b/posts/\345\206\215\346\254\241\351\230\205\350\257\273\343\200\212\347\262\276\351\200\232CSS-\351\253\230\347\272\247Web\346\240\207\345\207\206\350\247\243\345\206\263\346\226\271\346\241\210\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211\343\200\213.md" @@ -342,14 +342,14 @@ CSS被设计成具有很强的向前兼容性。如果浏览器不理解某个 Reset CSS ：http://meyerweb.com/eric/tools/css/reset/ - [1]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122142212655-260430037.jpg - [2]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122142226390-963867854.jpg - [3]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122161707983-603474969.jpg - [4]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122162756624-498882882.jpg - [5]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122164038233-621267712.jpg - [6]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151122164048999-1126569143.jpg - [7]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151123214534686-1472015437.jpg - [8]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151123214541967-166102166.jpg - [9]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151123222336264-1720178800.jpg - [10]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151123232532967-1416854027.jpg - [11]: http://7xq7nb.com1.z0.glb.clouddn.com/615180-20151124111613202-673126870.jpg + [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122142212655-260430037.jpg + [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122142226390-963867854.jpg + [3]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122161707983-603474969.jpg + [4]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122162756624-498882882.jpg + [5]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122164038233-621267712.jpg + [6]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151122164048999-1126569143.jpg + [7]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151123214534686-1472015437.jpg + [8]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151123214541967-166102166.jpg + [9]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151123222336264-1720178800.jpg + [10]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151123232532967-1416854027.jpg + [11]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/615180-20151124111613202-673126870.jpg diff --git "a/translation/\347\224\250Mocha\345\222\214Chai\345\257\271JavaScript\350\277\233\350\241\214\345\215\225\345\205\203\346\265\213\350\257\225.md" "b/translation/\347\224\250Mocha\345\222\214Chai\345\257\271JavaScript\350\277\233\350\241\214\345\215\225\345\205\203\346\265\213\350\257\225.md" index 82d429c..11df406 100644 --- "a/translation/\347\224\250Mocha\345\222\214Chai\345\257\271JavaScript\350\277\233\350\241\214\345\215\225\345\205\203\346\265\213\350\257\225.md" +++ "b/translation/\347\224\250Mocha\345\222\214Chai\345\257\271JavaScript\350\277\233\350\241\214\345\215\225\345\205\203\346\265\213\350\257\225.md" @@ -405,10 +405,10 @@ OK，让我们将 `1` 改回 `0`，确保测试通过。 [11]: https://zh.wikipedia.org/wiki/%E8%A2%AB%E6%B5%8B%E7%B3%BB%E7%BB%9F [12]: http://chaijs.com/api/assert/ [13]: http://chaijs.com/api/bdd/ - [14]: http://7xq7nb.com1.z0.glb.clouddn.com/1mocha-test-results.jpg - [15]: http://7xq7nb.com1.z0.glb.clouddn.com/2mochatest-error.jpg + [14]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/1mocha-test-results.jpg + [15]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/2mochatest-error.jpg [16]: https://en.wikipedia.org/wiki/Test-driven_development [17]: http://www.sitepoint.com/understanding-module-exports-exports-node-js/ - [18]: http://7xq7nb.com1.z0.glb.clouddn.com/3running-mocha-in-the-terminal.png + [18]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/3running-mocha-in-the-terminal.png [19]: http://codeutopia.net/blog/h/subscribe [20]: http://codeutopia.net/blog/h/subscribe From d52ed488b095d2464eb43c24644080ee1ebc164a Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Mon, 5 Nov 2018 18:17:28 +0800 Subject: [PATCH 15/36] =?UTF-8?q?Update=20=E3=80=8A=E5=9B=BE=E8=A7=A3HTTP?= =?UTF-8?q?=E3=80=8B=E8=AF=BB=E4=B9=A6=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index cbc302c..e68c166 100644 --- "a/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212\345\233\276\350\247\243HTTP\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -412,7 +412,7 @@ expires：一旦Cookie从服务器端发送至客户端，服务器端就不存 path：用来指定cookie被发送到服务器的哪一个目录路径下（即被服务器哪个路径接收cookie），其中"/"指的是站点根目录，可在同一台服务器（即使有多个应用）内共享该cookie。 ## 第七章 确保Web安全的HTTPS -### HTTP的确定 +### HTTP的缺点 - 通信使用明文可能会被窃听 - 不验证通信方的身份就可能遭受伪装 From 9ad37ea5e79af7e5d1d9c8a67dd8109b8b2e68c9 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 6 Nov 2018 23:00:39 +0800 Subject: [PATCH 16/36] Update README.md --- README.md | 145 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 74 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index ee2e93b..21933f6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ ### 应聘/求职 -中高级前端开发/中初级Node.js开发 + +中高级前端开发 期望地：深圳/广州/东莞 简历已准备好，摩拳擦掌👊 @@ -38,26 +39,27 @@ ### API 与 技巧 - - [【译】使用 Fullscreen API 全屏展示内容][19] - - [【译】Grid 完整指南][20] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][21] - - [【译】Electron 的本质][22] + - [【译】以案例阐述 Debounce 和 Throttle][19] + - [【译】使用 Fullscreen API 全屏展示内容][20] + - [【译】Grid 完整指南][21] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][22] + - [【译】Electron 的本质][23] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][23] - - [【译】催眠方块—Hypnotic Squares][24] - - [【译】圆形填充—Circle Packing][25] - - [【译】一二三—Un Deux Trois][26] - - [【译】三角网格—Triangular mesh][27] - - [【译】无序方块—Cubic Disarray][28] - - [【译】欢乐分队—Joy Division][29] - - [【译】瓷砖线—Tiled Lines][30] + - [【译】皮特·蒙德里安—Piet Mondrian][24] + - [【译】催眠方块—Hypnotic Squares][25] + - [【译】圆形填充—Circle Packing][26] + - [【译】一二三—Un Deux Trois][27] + - [【译】三角网格—Triangular mesh][28] + - [【译】无序方块—Cubic Disarray][29] + - [【译】欢乐分队—Joy Division][30] + - [【译】瓷砖线—Tiled Lines][31] ### 读书笔记 - - [《啊哈！算法》速读笔记][31] - - [《Web API 的设计与开发》读书笔记][32] + - [《啊哈！算法》速读笔记][32] + - [《Web API 的设计与开发》读书笔记][33] ## 关于本博客 @@ -89,31 +91,31 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][33]> or <[segmentfault 刘健超_Jc][34]> - - [Flex 学习][35] - - [《CSS 揭秘》读书笔记][36] - - [《JavaScript模式》读书笔记][37] - - [white-space:nowrap 的妙用][38] - - [《图解HTTP》读书笔记][39] - - [jQuery 的 attr 与 prop 的区别][40] - - [关于 Glob(gulp) 的学习][41] - - [《JavaScript（ES5）的面向对象精要》读书笔记][42] - - [关于JavaScript单线程的一些事][43] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][44] - - [实现类似 QQ音乐网页版 的单页面总结][45] +更多原创文章，可关注 <[博客园 刘健超-J.c][34]> or <[segmentfault 刘健超_Jc][35]> + - [Flex 学习][36] + - [《CSS 揭秘》读书笔记][37] + - [《JavaScript模式》读书笔记][38] + - [white-space:nowrap 的妙用][39] + - [《图解HTTP》读书笔记][40] + - [jQuery 的 attr 与 prop 的区别][41] + - [关于 Glob(gulp) 的学习][42] + - [《JavaScript（ES5）的面向对象精要》读书笔记][43] + - [关于JavaScript单线程的一些事][44] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][45] + - [实现类似 QQ音乐网页版 的单页面总结][46] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][46]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][47]。 - - [JavaScript 模块【Part 1】：初学者指南][47] - - [JavaScript 模块【Part 2】：模块打包][48] - - [用Mocha和Chai对JavaScript进行单元测试][49] - - [7 个基本的 JS 函数][50] - - [Web应用上线之前，每个程序员应该了解的技术细节][51] - - [其实闭包并不高深莫测][52] - - [如何成为一个JavaScript 大牛？][53] - - [脱离jQuery，使用原生Ajax][54] + - [JavaScript 模块【Part 1】：初学者指南][48] + - [JavaScript 模块【Part 2】：模块打包][49] + - [用Mocha和Chai对JavaScript进行单元测试][50] + - [7 个基本的 JS 函数][51] + - [Web应用上线之前，每个程序员应该了解的技术细节][52] + - [其实闭包并不高深莫测][53] + - [如何成为一个JavaScript 大牛？][54] + - [脱离jQuery，使用原生Ajax][55] [1]: https://github.com/JChehe/blog/issues/7 @@ -134,39 +136,40 @@ [16]: https://github.com/JChehe/blog/issues/3 [17]: https://github.com/JChehe/blog/issues/20 [18]: https://github.com/JChehe/blog/issues/19 - [19]: https://github.com/JChehe/blog/issues/17 - [20]: https://github.com/JChehe/blog/issues/16 - [21]: https://github.com/JChehe/blog/issues/6 - [22]: https://github.com/JChehe/blog/issues/5 - [23]: https://github.com/JChehe/blog/issues/31 - [24]: https://github.com/JChehe/blog/issues/30 - [25]: https://github.com/JChehe/blog/issues/26 - [26]: https://github.com/JChehe/blog/issues/25 - [27]: https://github.com/JChehe/blog/issues/24 - [28]: https://github.com/JChehe/blog/issues/23 - [29]: https://github.com/JChehe/blog/issues/22 - [30]: https://github.com/JChehe/blog/issues/21 - [31]: https://github.com/JChehe/blog/issues/32 - [32]: https://github.com/JChehe/blog/issues/10 - [33]: http://www.cnblogs.com/Jccc/ - [34]: https://segmentfault.com/u/jc - [35]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [36]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [38]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [40]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [41]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [42]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [46]: http://www.jobbole.com/members/q574805242/ - [47]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [48]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [49]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [19]: https://github.com/JChehe/blog/issues/34 + [20]: https://github.com/JChehe/blog/issues/17 + [21]: https://github.com/JChehe/blog/issues/16 + [22]: https://github.com/JChehe/blog/issues/6 + [23]: https://github.com/JChehe/blog/issues/5 + [24]: https://github.com/JChehe/blog/issues/31 + [25]: https://github.com/JChehe/blog/issues/30 + [26]: https://github.com/JChehe/blog/issues/26 + [27]: https://github.com/JChehe/blog/issues/25 + [28]: https://github.com/JChehe/blog/issues/24 + [29]: https://github.com/JChehe/blog/issues/23 + [30]: https://github.com/JChehe/blog/issues/22 + [31]: https://github.com/JChehe/blog/issues/21 + [32]: https://github.com/JChehe/blog/issues/32 + [33]: https://github.com/JChehe/blog/issues/10 + [34]: http://www.cnblogs.com/Jccc/ + [35]: https://segmentfault.com/u/jc + [36]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [38]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [39]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [41]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [43]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [47]: http://www.jobbole.com/members/q574805242/ + [48]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [49]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md [50]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [51]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [52]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [53]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [54]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [51]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [52]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [53]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [54]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [55]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From 6516e2185ab30802e0ef22b6b628adb1fed6d354 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 8 Nov 2018 17:24:00 +0800 Subject: [PATCH 17/36] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 21933f6..ad0e704 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ### 应聘/求职 -中高级前端开发 +中级前端开发 期望地：深圳/广州/东莞 简历已准备好，摩拳擦掌👊 From 2afb1458c8e3f5d6627847bba06f5ff0a5c3b4cf Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Mon, 12 Nov 2018 20:49:46 +0800 Subject: [PATCH 18/36] Update README.md --- README.md | 94 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index ad0e704..3789f6e 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,9 @@ ### 读书笔记 - - [《啊哈！算法》速读笔记][32] - - [《Web API 的设计与开发》读书笔记][33] + - [《JavaScript 设计模式与开发实践》读书笔记][32] + - [《啊哈！算法》速读笔记][33] + - [《Web API 的设计与开发》读书笔记][34] ## 关于本博客 @@ -91,31 +92,31 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][34]> or <[segmentfault 刘健超_Jc][35]> - - [Flex 学习][36] - - [《CSS 揭秘》读书笔记][37] - - [《JavaScript模式》读书笔记][38] - - [white-space:nowrap 的妙用][39] - - [《图解HTTP》读书笔记][40] - - [jQuery 的 attr 与 prop 的区别][41] - - [关于 Glob(gulp) 的学习][42] - - [《JavaScript（ES5）的面向对象精要》读书笔记][43] - - [关于JavaScript单线程的一些事][44] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][45] - - [实现类似 QQ音乐网页版 的单页面总结][46] +更多原创文章，可关注 <[博客园 刘健超-J.c][35]> or <[segmentfault 刘健超_Jc][36]> + - [Flex 学习][37] + - [《CSS 揭秘》读书笔记][38] + - [《JavaScript模式》读书笔记][39] + - [white-space:nowrap 的妙用][40] + - [《图解HTTP》读书笔记][41] + - [jQuery 的 attr 与 prop 的区别][42] + - [关于 Glob(gulp) 的学习][43] + - [《JavaScript（ES5）的面向对象精要》读书笔记][44] + - [关于JavaScript单线程的一些事][45] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][46] + - [实现类似 QQ音乐网页版 的单页面总结][47] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][47]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][48]。 - - [JavaScript 模块【Part 1】：初学者指南][48] - - [JavaScript 模块【Part 2】：模块打包][49] - - [用Mocha和Chai对JavaScript进行单元测试][50] - - [7 个基本的 JS 函数][51] - - [Web应用上线之前，每个程序员应该了解的技术细节][52] - - [其实闭包并不高深莫测][53] - - [如何成为一个JavaScript 大牛？][54] - - [脱离jQuery，使用原生Ajax][55] + - [JavaScript 模块【Part 1】：初学者指南][49] + - [JavaScript 模块【Part 2】：模块打包][50] + - [用Mocha和Chai对JavaScript进行单元测试][51] + - [7 个基本的 JS 函数][52] + - [Web应用上线之前，每个程序员应该了解的技术细节][53] + - [其实闭包并不高深莫测][54] + - [如何成为一个JavaScript 大牛？][55] + - [脱离jQuery，使用原生Ajax][56] [1]: https://github.com/JChehe/blog/issues/7 @@ -149,27 +150,28 @@ [29]: https://github.com/JChehe/blog/issues/23 [30]: https://github.com/JChehe/blog/issues/22 [31]: https://github.com/JChehe/blog/issues/21 - [32]: https://github.com/JChehe/blog/issues/32 - [33]: https://github.com/JChehe/blog/issues/10 - [34]: http://www.cnblogs.com/Jccc/ - [35]: https://segmentfault.com/u/jc - [36]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [37]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [38]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [39]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [41]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [42]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [43]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [47]: http://www.jobbole.com/members/q574805242/ - [48]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [49]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [50]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [32]: https://github.com/JChehe/blog/issues/35 + [33]: https://github.com/JChehe/blog/issues/32 + [34]: https://github.com/JChehe/blog/issues/10 + [35]: http://www.cnblogs.com/Jccc/ + [36]: https://segmentfault.com/u/jc + [37]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [38]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [40]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [41]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [42]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [44]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [47]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [48]: http://www.jobbole.com/members/q574805242/ + [49]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [50]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md [51]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [52]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [53]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [54]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [55]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [52]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [53]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [54]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [55]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [56]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From 5111d51b2716bbe4c359fb6c9fbd2a64fcbabf45 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 15 Nov 2018 00:01:58 +0800 Subject: [PATCH 19/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\347\232\204\344\270\200\344\272\233\344\272\213.md" | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index 9a79226..f88bf3a 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -14,6 +14,7 @@ > 进程和线程都是操作系统的概念。进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过程中能够申请创建和使用系统资源（如独立的内存区域等），这些资源也会随着进程的终止而被销毁。而线程则是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资源的，所以在多线程的情况下，需要特别注意对临界资源的访问控制。在系统创建进程之后就开始启动执行进程的主线程，而进程的生命周期和这个主线程的生命周期一致，主线程的退出也就意味着进程的终止和销毁。主线程是由系统进程所创建的，同时用户也可以自主创建其它线程，这一系列的线程都会并发地运行于同一个进程中。 + 显然，在多线程操作下可以实现应用的**并行处理**，从而以更高的 CPU 利用率提高整个应用程序的性能和吞吐量。特别是现在很多语言都支持多核并行处理技术，然而 JavaScript 却以单线程执行，为什么呢？ 其实这与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。若以多线程的方式操作这些 DOM，则可能出现操作的冲突。假设有两个线程同时操作一个 DOM 元素，线程 1 要求浏览器删除 DOM，而线程 2 却要求修改 DOM 样式，这时浏览器就无法决定采用哪个线程的操作。当然，我们可以为浏览器引入“锁”的机制来解决这些冲突，但这会大大提高复杂性，所以 JavaScript 从诞生开始就选择了单线程执行。 @@ -264,7 +265,7 @@ var counter = 0; 1. JavaScript 引擎线程 JavaScript 引擎是基于事件驱动单线程执行的，JavaScript 引擎一直等待着任务队列中任务的到来，然后加以处理。 2. GUI 渲染线程 GUI 渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行。但需要注意 GUI 渲染线程与 JavaScript 引擎是互斥的，当 JavaScript 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JavaScript 引擎空闲时立即被执行。 - 3. 浏览器事件触发线程事件触发线程，当一个事件被触发时该线程会把事件添加到“任务队列”的队尾，等待 JavaScript 引擎的处理。这些事件可来自 JavaScript 引擎当前执行的代码块如 setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX 异步请求等，但由于 JavaScript 是单线程执行的，所有这些事件都得排队等待 JavaScript 引擎处理。 + 3. 浏览器事件触发线程事件触发线程，当一个事件被触发时该线程会把事件添加到“任务队列”的队尾，等待 JavaScript 引擎的处理。这些事件可来自 JavaScript 引擎当前执行的代码块如 setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax 异步请求等，但由于 JavaScript 是单线程执行的，所有这些事件都得排队等待 JavaScript 引擎处理。 在 Chrome 浏览器中，为了防止因一个标签页奔溃而影响整个浏览器，其每个标签页都是一个**进程（Renderer Process）**。当然，对于同一域名下的标签页是能够相互通讯的，具体可看 [浏览器跨标签通讯](http://web.jobbole.com/82225/)。在 Chrome 设计中存在很多的进程，并利用进程间通讯来完成它们之间的同步，因此这也是 Chrome 快速的法宝之一。对于 Ajax 的请求也需要特殊线程来执行，当需要发送一个 Ajax 请求时，浏览器会开辟一个新的线程来执行 HTTP 的请求，它并不会阻塞 JavaScript 线程的执行，当 HTTP 请求状态变更时，相应事件会被作为回调放入到“任务队列”中等待被执行。 @@ -299,3 +300,8 @@ JavaScript 为了避免复杂性，而实现单线程执行。而如今 JavaScri [1]: http://images.51cto.com/files/uploadimg/20090804/1503300.jpg [2]: https://developer.mozilla.org/files/4617/default.svg + + + + + From 7e92e0b6908beb30aae78164b22bf82a3f28c63a Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 15 Nov 2018 11:35:48 +0800 Subject: [PATCH 20/36] =?UTF-8?q?Update=20=E3=80=8AJavaScript=E9=9D=A2?= =?UTF-8?q?=E5=90=91=E5=AF=B9=E8=B1=A1=E7=B2=BE=E8=A6=81=E3=80=8B=E8=AF=BB?= =?UTF-8?q?=E4=B9=A6=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...73\344\271\246\347\254\224\350\256\260.md" | 1602 +++++++++-------- 1 file changed, 893 insertions(+), 709 deletions(-) diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 6a8d372..96f4483 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -4,125 +4,153 @@ --- -2016年1月16日-17日两天看完了《JavaScript面向对象精要》（参加异步社区的活动送的），这本书虽然不够100页，但都是精华，不愧是《JavaScript高级程序设计》作者 Nicholas C.Zakas 的最新力作。 +2016年1月16日-17日两天看完了《JavaScript 面向对象精要》（参加异步社区的活动送的），这本书虽然不够100页，但都是精华，不愧是《JavaScript 高级程序设计》作者 Nicholas C.Zakas 的最新力作。 下面是我的读书笔记（ES5）： ## 1.原始类型和引用类型 + ### 1.1 什么是类型 + **原始类型** 保存为简单数据值。 **引用类型** 保存为对象，其本质是指向内存位置的引用。 -为了让开发者能够把原始类型和引用类型按相同的方式处理，JavaScript花费了很大的努力来保证语言的一致性。 +为了让开发者能够把原始类型和引用类型按相同的方式处理，JavaScript 花费了很大的努力来保证语言的一致性。 -其他编程语言用栈存原始类型，用对存储引用类型。而JavaScript则完全不同：它使用一个变量对象追踪变量的生存期。原始值被直接保存在变量对象内，而引用值则作为一个指针保存在变量对象内，该指针指向实际对象在内存中的存储位置。 +其他编程语言用栈存原始类型，用对存储引用类型。而 JavaScript 则完全不同：它使用一个变量对象追踪变量的生存期。原始值被直接保存在变量对象内，而引用值则作为一个指针保存在变量对象内，该指针指向实际对象在内存中的存储位置。 ### 1.2 原始类型 原始类型代表照原样保存的一些简单数据。 -JavaScript共有 **5** 种原始类型： +JavaScript 共有 **5** 种原始类型： - boolean 布尔，值为 `true` or `false` - number 数字，值为任何整型或浮点数值 - string 字符串，值为由单引号或双引号括住的单个字符或连续字符 - null 空类型，仅有一个值：null - - undefined 未定义，只有一个值：undefined（undefined会被赋给一个还没有初始化的变量） + - undefined 未定义，只有一个值：undefined（undefined 会被赋给一个还没有初始化的变量） + +JavaScript 和许多其他语言一样，原始类型的变量直接保存原始值（而不是一个指向对象的指针）。 + +```js +var color1 = "red"; +var color2 = color1; + +console.log(color1); // "red" +console.log(color2); // "red" + +color1 = "blue"; + +console.log(color1); // "blue" +console.log(color2); // "red" +``` -JavaScript和许多其他语言一样，原始类型的变量直接保存原始值（而不是一个指向对象的指针）。 - - var color1 = "red"; - var color2 = color1; - - console.log(color1); // "red" - console.log(color2); // "red" - - color1 = "blue"; - - console.log(color1); // "blue" - console.log(color2); // "red" - #### 鉴别原始类型 + 鉴别原始类型的最佳方式是使用 `typeof` 操作符。 - - console.log(typeof "Nicholas"); // "string" - console.log(typeof 10); // "number" - console.log(typeof true); // "boolean" - console.log(typeof undefined); // "undefined" + +```js +console.log(typeof "Nicholas"); // "string" +console.log(typeof 10); // "number" +console.log(typeof true); // "boolean" +console.log(typeof undefined); // "undefined" +``` 至于空类型（null）则有些棘手。 + +```js +console.log(typeof null); // "object" +``` - console.log(typeof null); // "object" - -对于 typeof null，结果是"object"。（其实这已被设计和维护JavaScript的委员会TC39认定是一个错误。在逻辑上，你可以认为 `null` 是一个空的对象指针，所以结果为"object"，但这还是很令人困惑。） +对于 typeof null，结果是"object"。（其实这已被设计和维护 JavaScript 的委员会 TC39 认定是一个错误。在逻辑上，你可以认为 `null` 是一个空的对象指针，所以结果为"object"，但这还是很令人困惑。） 判断一个值是否为空类型（null）的最佳方式是直接和 `null` 比较： - console.log(value === null); // true or false +```js +console.log(value === null); // true or false +``` -> **注意：以上这段代码使用了三等号（全等===）**，因为三等号（全等）不会将变量强制转换为另一种类型。 +> **注意：以上这段代码使用了三等号（全等 ===）**，因为三等号（全等）不会将变量强制转换为另一种类型。 - console.log("5" == 5); // true - console.log("5" === 5); // false - - console.log(undefined == null); // true - console.log(undefined === null); // false +```js +console.log("5" == 5); // true +console.log("5" === 5); // false + +console.log(undefined == null); // true +console.log(undefined === null); // false +``` #### 原始方法 -虽然字符串、数字和布尔值是原始类型，但是它们也拥有方法（null和undefined没有方法）。 - - var name = "Nicholas"; - var lowercaseName = name.toLowerCase(); // 转为小写 - - var count = 10; - var fixedCount = count.toFixed(2); // 转为10.00 - - var flag = true; - var stringFlag = flag.toString(); // 转为"true" - - console.log("YIBU".charAt(0)); // 输出"Y" - -> 尽管原始类型拥有方法，但它们不是对象。JavaScript使它们看上去像对象一样，以此来提高语言上的一致性体验。 +虽然字符串、数字和布尔值是原始类型，但是它们也拥有方法（null 和 undefined 没有方法）。 + +```js +var name = "Nicholas"; +var lowercaseName = name.toLowerCase(); // 转为小写 + +var count = 10; +var fixedCount = count.toFixed(2); // 转为10.00 + +var flag = true; +var stringFlag = flag.toString(); // 转为"true" + +console.log("YIBU".charAt(0)); // 输出"Y" +``` + +> 尽管原始类型拥有方法，但它们不是对象。JavaScript 使它们看上去像对象一样，以此来提高语言上的一致性体验。 ### 1.3 引用类型 -引用类型是指JavaScript中的对象，同时也是你在该语言中能找到最接近类的东西。 + +引用类型是指 JavaScript 中的对象，同时也是你在该语言中能找到最接近类的东西。 引用值是引用类型的实例，也是对象的同义词（后面将用对象指代引用值）。对象是属性的无序列表。属性包含键（始终是字符串）和值。如果一个属性的值是函数，它就被称为方法。除了函数可以运行以外，一个包含数组的属性和一个包含函数的属性没有什么区别。 #### 创建对象 -有时候，把JavaScript对象想象成哈希表可以帮助你更好地理解对象结构。 -![Object][1] +有时候，把 JavaScript 对象想象成哈希表可以帮助你更好地理解对象结构。 + +![Object][1] JavaScript 有好几种方法可以创建对象，或者说实例化对象。第一种是使用 `new` 操作符和构造函数。 -构造函数就是通过 `new` 操作符来创建对象的函数——任何函数都可以是构造函数。根据命名规范，JavaScript中的构造函数用**首字母大写**来跟非构造函数进行区分。 - - var object = new Object(); +构造函数就是通过 `new` 操作符来创建对象的函数——任何函数都可以是构造函数。根据命名规范，JavaScript 中的构造函数用**首字母大写**来跟非构造函数进行区分。 + +```js +var object = new Object(); +``` 因为引用类型不再变量中直接保存对象，所以本例中的 `object` 变量实际上并**不包含对象的实例，而是一个指向内存中实际对象所在位置的指针（或者说引用）**。这是对象和原始值之间的一个基本差别，原始值是直接保存在变量中。 当你将一个对象赋值给变量时，实际是赋值给这个变量一个指针。这意味着，将一个变量赋值给另外一个变量时，两个变量各获得了一份指针的拷贝，指向内存中的同一个对象。 - var obj1 = new Object(); - var obj2 = obj1; +```js +var obj1 = new Object(); +var obj2 = obj1; +``` -![copy_obj][2] +![copy_obj][2] #### 对象引用解除 -JavaScript语言有垃圾收集的功能，因此当你使用引用类型时无需担心内存分配。**但最好在不使用对象时将其引用解除，让垃圾收集器对那块内存进行释放。解除引用的最佳手段是将对象变量设置为 `null`。** - var obj1 = new Object(); - // dosomething - obj1 = null; // dereference +JavaScript 语言有垃圾收集的功能，因此当你使用引用类型时无需担心内存分配。**但最好在不使用对象时将其引用解除，让垃圾收集器对那块内存进行释放。解除引用的最佳手段是将对象变量设置为 `null`。** + +```js +var obj1 = new Object(); +// dosomething +obj1 = null; // dereference +``` #### 添加删除属性 -在JavaScript中，你可以随时添加和删除其属性。 - var obj1 = new Object(); - var obj2 = obj1; - - obj1.myCustomProperty = "Awsome!"; - console.log(obj2.myCustomProperty); // "Awsome!" 因为obj1和obj2指向同一个对象。 +在 JavaScript 中，你可以随时添加和删除其属性。 + +```js +var obj1 = new Object(); +var obj2 = obj1; + +obj1.myCustomProperty = "Awsome!"; +console.log(obj2.myCustomProperty); // "Awsome!" 因为 obj1 和 obj2 指向同一个对象。 +``` ### 1.4 内建类型实例化 + 内建类型如下： - Array 数组类型，以数字为索引的一组值的有序列表 @@ -133,211 +161,253 @@ JavaScript语言有垃圾收集的功能，因此当你使用引用类型时无 - RegExp 正则表达式类型 可使用 `new` 来实例化每一个内建引用类型： - - var items = new Array(); - var new = new Date(); - var error = new Error("Something bad happened."); - var func = new Function("console.log('HI');"); - var object = new Object(); - var re = new RegExp(); + +```js +var items = new Array(); +var now = new Date(); +var error = new Error("Something bad happened."); +var func = new Function("console.log('HI');"); +var object = new Object(); +var re = new RegExp(); +``` #### 字面形式 + 内建引用类型有字面形式。字面形式允许你在不需要使用 `new` 操作符和构造函数显示创建对象的情况下生成引用值。属性的**键**可以是标识符或字符串（若含有空格或其他特殊字符） - - var book = { - name: "Book_name", - year: 2016 - } + +```js +var book = { + name: "Book_name", + year: 2016 +} +``` 上面代码与下面这段代码等价： - var book = new Object(); - book.name = "Book_name"; - book.year = 2016; - +```js +var book = new Object(); +book.name = "Book_name"; +book.year = 2016; +``` + +> 虽然使用字面形式并没有调用 new Object()，但是 JavaScript 引擎背后做的工作和 new Object() 一样，除了没有调用构造函数。其他引用类型的字面形式也是如此。 + -> 虽然使用字面形式并没有调用 new Object()，但是JavaScript引擎背后做的工作和 new Object()一样，除了没有调用构造函数。其他引用类型的字面形式也是如此。 - ### 1.5 访问属性 + 可通过 `.` 和 `中括号` 访问对象的属性。 -中括号`[]`在需要动态决定访问哪个属性时，特别有用。因为你可以用**变量**而不是字符串字面形式来指定访问的属性。 +中括号 `[]` 在需要动态决定访问哪个属性时，特别有用。因为你可以用**变量**而不是字符串字面形式来指定访问的属性。 ### 1.6 鉴别引用类型 + 函数是最容易鉴别的引用类型，因为对函数使用 `typeof` 操作符时，返回"function"。 - - function reflect(value){ - return value; - } - console.log(typeof reflect); // "function" + +```js +function reflect(value){ + return value; +} +console.log(typeof reflect); // "function" +``` 对其他引用类型的鉴别则较为棘手，因为对于所有非函数的引用类型，`typeof` 返回 `object`。为了更方便地鉴别引用类型，可以使用 JavaScript 的 `instanceof` 操作符。 - - var items = []; - var obj = {}; - function reflect(value){ - return value; - } - - console.log(items instanceof Array); // true; - console.log(obj instanceof Object); // true; - console.log(reflect instanceof Function); // true; - + +```js +var items = []; +var obj = {}; +function reflect(value){ + return value; +} + +console.log(items instanceof Array); // true; +console.log(obj instanceof Object); // true; +console.log(reflect instanceof Function); // true; +``` + `instanceof` 操作符可鉴别继承类型。这意味着所有对象都是 `Oject` 的实例，因为所有引用类型都继承自 `Object`。 -> 虽然 instanceof 可以鉴别对象类型（如数组），但是有一个列外。JavaScript 的值可以在同一个网页的不用框架之间传来传去。由于每个网页拥有它自己的全局上下文——Object、Array以及其他内建类型的版本。所以当你把一个对象（如数组）从一个框架传到另外一个框架时，instanceof就无法识别它。 +> 虽然 instanceof 可以鉴别对象类型（如数组），但是有一个列外。JavaScript 的值可以在同一个网页的不用框架之间传来传去。由于每个网页拥有它自己的全局上下文—— Object、Array 以及其他内建类型的版本。所以当你把一个对象（如数组）从一个框架传到另外一个框架时，instanceof 就无法识别它。 ### 1.8 原始封装类型 + 原始封装类型有 `3` 种：String、Number 和 Boolean。 当读取字符串、数字或布尔值时，原始封装类型将被自动创建。 - - var name = "Nicholas"; - var firstChar = name.charAt(0); // "N" +```js +var name = "Nicholas"; +var firstChar = name.charAt(0); // "N" +``` 这在背后发生的事情如下： - var name = "Nichola"; - var temp = new String(name); - var firstChar = temp.charAt(0); - temp = null; +```js +var name = "Nichola"; +var temp = new String(name); +var firstChar = temp.charAt(0); +temp = null; +``` + +由于第二行把字符串当成对象使用，JavaScript 引擎创建了一个字符串的实体让 `charAt(0)` 可以工作。字符串对象的存在仅用于该语句并在随后销毁（一种被称为自动打包的过程）。为了测试这一点，试着给字符串添加一个属性看看它是不是对象。 + +```js +var name = "Nicholas"; +name.last = "Zakas"; + +console.log(name.last); // undefined; +``` + +下面是在 JavaScript 引擎中实际发生的事情： + +```js +var name = "Nicholas"; +var temp = new String(name); +temp.last = "Zakas"; +temp = null; // temporary object destroyed + +var temp = new String(name); +console.log(temp.last); +temp = null; +``` -由于第二行把字符串当成对象使用，JavaScript引擎创建了一个字符串的实体让 `charAt(0)` 可以工作。字符串对象的存在仅用于该语句并在随后销毁（一种被称为自动打包的过程）。为了测试这一点，试着给字符串添加一个属性看看它是不是对象。 - - var name = "Nicholas"; - name.last = "Zakas"; - - console.log(name.last); // undefined; - -下面是在JavaScript引擎中实际发生的事情： - - var name = "Nicholas"; - var temp = new String(name); - temp.last = "Zakas"; - temp = null; // temporary object destroyed - - var temp = new String(name); - console.log(temp.last); - temp = null; - 新属性 `last` 实际上是在一个立刻就被销毁的临时对象上而不是字符串上添加。之后当你试图访问该属性时，另一个不同的临时对象被创建，而新属性并不存在。 虽然原始封装类型会被自动创建，在这些值上进行 `instanceof` 检查对应类型的返回值却是 `false`。 这是因为**临时对象仅在值被读取时创建**。`instanceof` 操作符并没有真的读取任何东西，也就没有临时对象的创建。 当然你也可以手动创建原始封装类型。 - - var str = new String("me"); - str.age = 18; - - console.log(typeof str); // object - console.log(str.age); // 18 + +```js +var str = new String("me"); +str.age = 18; + +console.log(typeof str); // object +console.log(str.age); // 18 +``` 如你所见，手动创建原始封装类型实际会创建出一个 `object`。这意味着 `typeof` 无法鉴别出你实际保存的数据的类型。 另外，手动创建原始封装类型和使用原始值是有一定区别的。所以尽量避免使用。 - - var found = new Boolean(false); - if(found){ - console.log("Found"); // 执行到了，尽管对象的值为 false - } - + +```js +var found = new Boolean(false); +if(found){ + console.log("Found"); // 执行到了，尽管对象的值为 false +} +``` + 这是因为一个对象(如 `{}` )在条件判断语句中总被认为是 `true`; -> MDN:Any object whose value is not undefined or null, including a Boolean oject whose value is false, evaluates to true when passed to a conditional statement. +> MDN: Any object whose value is not undefined or null, including a Boolean oject whose value is false, evaluates to true when passed to a conditional statement. ### 1.9 总结 + 第一章的东西都是我们一些比较熟悉的知识。但是也有一些需要注意的地方： - 正确区分原始类型和引用类型 - - 对于 `5` 种原始类型都可以用typeof来鉴别，而空类型必须直接跟 `null` 进行全等比较。 - - 函数也是对象，可用 `typeof` 鉴别。其它引用类型，可用 `instanceof` 和一个构造函数来鉴别。（当然可以用 `Object.prototype.toString.call()` 鉴别，它会返回[object Array]之类的）。 + - 对于 `5` 种原始类型都可以用 typeof 来鉴别，而空类型必须直接跟 `null` 进行全等比较。 + - 函数也是对象，可用 `typeof` 鉴别。其它引用类型，可用 `instanceof` 和一个构造函数来鉴别。（当然可以用 `Object.prototype.toString.call()` 鉴别，它会返回 [object Array]之类的）。 - 为了让原始类型看上去更像引用类型，JavaScript提供了 `3` 种封装类型。JavaScript会在背后创建这些对象使得你能够像使用普通对象那样使用原始值。但这些临时对象在使用它们的语句结束时就立刻被销毁。虽然可手动创建，但不建议。 ## 2. 函数 -函数也是对象，使对象不同于其它对象的决定性特点是函数存在一个被称为 `[[Call]]` 的内部属性。 + +函数也是对象，使对象不同于其它对象的决定性特点是函数存在一个被称为 `[[Call]]` 的内部属性。 **内部属性无法通过代码访问而是定义了代码执行时的行为**。ECMAScript为JavaScript的对象定义了多种内部属性，这些**内部属性都用双重中括号来标注**。 -**[[Call]]属性是函数独有的，表明该对象可以被执行。由于仅函数拥有该属性，ECMAScript 定义typeof操作符对任何具有[[Call]]属性的对象返回"function"**。过去因某些浏览器曾在正则表达式中包含 `[[Call]]` 属性，导致正则表达式被错误鉴别为函数。 +**[[Call]] 属性是函数独有的，表明该对象可以被执行。由于仅函数拥有该属性，ECMAScript 定义 typeof 操作符对任何具有 [[Call]] 属性的对象返回 "function"**。过去因某些浏览器曾在正则表达式中包含 `[[Call]]` 属性，导致正则表达式被错误鉴别为函数。 ### 2.1 声明还是表达式 + 两者的一个重要区别是：函数声明会被提升至上下文（要么是该函数被声明时所在的函数范围，要么是全局范围）的顶部。 ### 2.2 函数就是值 -可以像使用对象一样使用函数（因为函数本来就是对象，Function构造函数更加容易说明）。 + +可以像使用对象一样使用函数（因为函数本来就是对象，Function 构造函数更加容易说明）。 ### 2.3 参数 -函数参数保存在类数组对象 `argument` （`Array.isArray(arguments)` 返回 `false`）中。可以接收任意数量的参数。 + +函数参数保存在类数组对象 `arguments` （`Array.isArray(arguments)` 返回 `false`）中。可以接收任意数量的参数。 函数的 `length` 属性表明其期望的参数个数。 ### 2.4 重载 + 大多数面向对象语言支持函数重载，它能让一个函数具有多个签名。函数签名由函数的名字、参数的个数及其类型组成。 -而JavaScript可以接收任意数量的参数且参数类型完全没有限制。这说明JavaScript函数根本就没有签名，因此也不存在重载。 - - function sayMessage(message){ - console.log(message); - } - function sayMessage(){ - console.log("Default Message"); - } - - sayMessage("Hello!"); // 输出"Default Message"; - -在Javscript里，当你试图定义多个同名的函数时，只有最后的定义有效，之前的函数声明被完全删除（函数也是对象，变量只是存指针)。 +而 JavaScript 可以接收任意数量的参数且参数类型完全没有限制。这说明 JavaScript 函数根本就没有签名，因此也不存在重载。 - var sayMessage = new Function("message", "console.log(message)"); - var sayMessage = new Function("console.log(\"Default Message\");"); - - sayMessage("Hello!"); +```js +function sayMessage(message){ + console.log(message); +} +function sayMessage(){ + console.log("Default Message"); +} + +sayMessage("Hello!"); // 输出"Default Message"; +``` + +在 JavaScript 里，当你试图定义多个同名的函数时，只有最后的定义有效，之前的函数声明被完全删除（函数也是对象，变量只是存指针)。 + +```js +var sayMessage = new Function("message", "console.log(message)"); +var sayMessage = new Function("console.log(\"Default Message\");"); + +sayMessage("Hello!"); +``` 当然，你可以根据传入参数的数量来模仿重载。 ### 2.5 对象方法 + 对象的值是函数，则该属性被称为方法。 -#### 2.5.1 this对象 -JavaScript 所有的函数作用域内都有一个 `this` 对象代表调用该函数的对象。在全局作用域中，`this` 代表全局对象（浏览器里的window）。当一个函数作为对象的方法调用时，默认 `this` 的值等于该对象。 +#### 2.5.1 this 对象 + +JavaScript 所有的函数作用域内都有一个 `this` 对象代表调用该函数的对象。在全局作用域中，`this` 代表全局对象（浏览器里的 window）。当一个函数作为对象的方法调用时，默认 `this` 的值等于该对象。 **this在函数调用时才被设置。** - function sayNameForAll(){ - console.log(this.name); - } - - var person1 = { - name: "Nicholas", - sayName: sayNameForAll - } - - var name = "Jack"; +```js +function sayNameForAll(){ + console.log(this.name); +} + +var person1 = { + name: "Nicholas", + sayName: sayNameForAll +} + +var name = "Jack"; - person1.sayName(); // 输出 "Nicholas" - sayNameforAll(); // 输出 "Jack" +person1.sayName(); // 输出 "Nicholas" +sayNameforAll(); // 输出 "Jack" +``` + +#### 2.5.2 改变 this -#### 2.5.2 改变this 有 `3` 种函数方法运行你改变 `this` 值。 1. fun.call(thisArg[, arg1[, arg2[, ...]]]); 2. fun.apply(thisArg, [argsArray]); 3. fun.bind(thisArg[, arg1[, arg2[, ...]]]) -使用 `call` 或 `apply` 方法，就不需要将函数加入每个对象——你显示地指定了 `this` 的值而不是让JavaScript引擎自动指定。 +使用 `call` 或 `apply` 方法，就不需要将函数加入每个对象——你显示地指定了 `this` 的值而不是让 JavaScript 引擎自动指定。 `call` 与 `apply` 的不同地方是，`call` 需要把所有参数一个个列出来，而 `apply` 的参数需要一个数组或者类似数组的对象（如 `arguments` 对象）。 -`bind` 是ECMAScript 5 新增的，它会创建一个新函数返回。其参数与 `call` 类似，而且其所有参数代表需要被**永久**设置在新函数中的命名参数（绑定了的参数（没绑定的参数依然可以传入），就算调用时再传入其它参数，也不会影响这些绑定的参数）。 +`bind` 是 ECMAScript 5 新增的，它会创建一个新函数返回。其参数与 `call` 类似，而且其所有参数代表需要被**永久**设置在新函数中的命名参数（绑定了的参数（没绑定的参数依然可以传入），就算调用时再传入其它参数，也不会影响这些绑定的参数）。 - function sayNameForAll(label){ - console.log(label + ":" + this.name); - } - var person = { - name: "Nicholas" - } - - var sayNameForPerson = sayNameForAll.bind(person); - sayNameForPerson("Person"); // 输出"Person:Nicholas" - - var sayName = sayNameForAll.bind(person, "Jc"); - - sayName("change"); // 输出"Jc:Nicholas" 因为绑定的形参，会忽略调用时再传入参数 +```js +function sayNameForAll(label){ + console.log(label + ":" + this.name); +} +var person = { + name: "Nicholas" +} + +var sayNameForPerson = sayNameForAll.bind(person); +sayNameForPerson("Person"); // 输出"Person:Nicholas" + +var sayName = sayNameForAll.bind(person, "Jc"); + +sayName("change"); // 输出"Jc:Nicholas" 因为绑定的形参，会忽略调用时再传入参数 +``` ### 2.6 总结 @@ -347,28 +417,33 @@ JavaScript 所有的函数作用域内都有一个 `this` 对象代表调用该 - 函数是对象，所以存在一个 `Function` 构造函数。但这会使你的代码难以理解和调试，除非函数的真实形式要直到运行时才能确定的时候才会利用它。 ## 理解对象 -JavaScript中的对象是动态的，可在代码执行的任意时刻发生改变。基于类的语言会根据类的定义锁定对象。 + +JavaScript 中的对象是动态的，可在代码执行的任意时刻发生改变。基于类的语言会根据类的定义锁定对象。 ### 3.1 定义属性 -当一个属性第一次被添加到对象时，JavaScript会在对象上调用一个名为 `[[Put]]` 的内部方法。`[[Put]]` 方法会在对象上创建一个新节点来保存属性。 + +当一个属性第一次被添加到对象时，JavaScript 会在对象上调用一个名为 `[[Put]]` 的内部方法。`[[Put]]` 方法会在对象上创建一个新节点来保存属性。 当一个已有的属性被赋予一个新值时，调用的是一个名为 `[[Set]]` 的方法。 ### 3.2 属性探测 -检查对象是否已有一个属性。JavaScript开发新手错误地使用以下模式检测属性是否存在。 - - if(person.age){ - // do something with ag - } - -上面的问题在于JavaScript的类型强制会影响该模式的输出结果。 -当if判断中的值如下时，会判断为**真**： + +检查对象是否已有一个属性。JavaScript 开发新手错误地使用以下模式检测属性是否存在。 + +```js +if(person.age){ + // do something with ag +} +``` + +上面的问题在于 JavaScript 的类型强制会影响该模式的输出结果。 +当 if 判断中的值如下时，会判断为**真**： - 对象 - 非空字符串 - 非零 - true -当if判断中的值如下时，会判断为**假**： +当 if 判断中的值如下时，会判断为**假**： - null - undefined @@ -381,88 +456,102 @@ JavaScript中的对象是动态的，可在代码执行的任意时刻发生改 `in` 操作符会检查**自有属性和原型属性**。 所有的对象都拥有的 `hasOwnProperty()` 方法（其实是 `Object.prototype` 原型对象的），该方法在给定的属性存在且为**自有属性**时返回 `true`。 - var person = { - name: "Nicholas" - } - - console.log("name" in person); // true - console.log(person.hasOwnpropert("name")); // true - - console.log("toString" in person); // true - console.log(person.hasOwnproperty("toString")); // false +```js +var person = { + name: "Nicholas" +} + +console.log("name" in person); // true +console.log(person.hasOwnpropert("name")); // true + +console.log("toString" in person); // true +console.log(person.hasOwnproperty("toString")); // false +``` ### 3.3 删除属性 + 设置一个属性的值为 `null` 并不能从对象中彻底移除那个属性，这只是调用 `[[Set]]` 将 `null` 值替换了该属性原来的值而已。 `delete` 操作符针对单个对象属性调用名为 `[[Delete]]` 的内部方法。删除成功时，返回 `true`。 - var person = { - name: "Nicholas" - } - - person.name = null; - console.log("name" in person); // true - delete person.name; - console.log(person.name); // undefined 访问一个不存在的属性将返回 undefined - console.log("name" in person); // false - +```js +var person = { + name: "Nicholas" +} + +person.name = null; +console.log("name" in person); // true +delete person.name; +console.log(person.name); // undefined 访问一个不存在的属性将返回 undefined +console.log("name" in person); // false +``` + ### 3.4 属性枚举 + 所有人为添加的属性默认都是可枚举的。可枚举的内部特征 `[[Enumerable]]` 都被设置为 `true`。 `for-in` 循环会枚举一个对象所有的可枚举属性。 -> 我的备注：在Chrome中，对象属性会按ASCII表排序，而不是定义时的顺序。 +> 我的备注：在 Chrome 中，对象属性会按 ASCII 表排序，而不是定义时的顺序。 ECMAScript 5 的 Object() 方法可以获取可枚举属性的名字的数组。 - var person = { - name: "Ljc", - age: 18 - } - - Object.keys(person); // ["name", "age"]; +```js +var person = { + name: "Ljc", + age: 18 +} + +Object.keys(person); // ["name", "age"]; +``` `for-in` 与 `Object.keys()` 的一个区别是：前者也会遍历原型属性，而后者返回自有(实例)属性。 实际上，对象的大部分原生方法的 `[[Enumerable]]` 特征都被设置为 `false`。可用 `propertyIsEnumerable()` 方法检查一个属性是否为可枚举的。 - var arr = ["abc", 2]; - console.log(arr.propertyIsEnumerable("length")); // false +```js +var arr = ["abc", 2]; +console.log(arr.propertyIsEnumerable("length")); // false +``` ### 3.5 属性类型 + 属性有两种类型：**数据属性**和**访问器属性**。 数据属性包含一个值。`[[Put]]` 方法的默认行为是创建**数据属性**。 -访问器属性不包含值而是定义了一个当属性被读取时调用的函数（称为`getter`）和一个当属性被写入时调用的函数（称为`setter`）。访问器属性仅需要 `getter` 或 `setter` 两者中的任意一个，当然也可以两者。 - - // 对象字面形式中定义访问器属性有特殊的语法： - var person = { - _name: "Nicholas", - - get name(){ - console.log("Reading name"); - return this._name; - }, - set name(value){ - console.log("Setting name to %s", value); - this._name = value; - } - }; - - console.log(person.name); // "Reading name" 然后输出 "Nicholas" - - person.name = "Greg"; - console.log(person.name); // "Setting name to Greg" 然后输出 "Greg" +访问器属性不包含值而是定义了一个当属性被读取时调用的函数（称为 `getter`）和一个当属性被写入时调用的函数（称为 `setter`）。访问器属性仅需要 `getter` 或 `setter` 两者中的任意一个，当然也可以两者。 + +```js +// 对象字面形式中定义访问器属性有特殊的语法： +var person = { + _name: "Nicholas", + + get name(){ + console.log("Reading name"); + return this._name; + }, + set name(value){ + console.log("Setting name to %s", value); + this._name = value; + } +}; +console.log(person.name); // "Reading name" 然后输出 "Nicholas" -> 前置下划线_ 是一个约定俗成的命名规范，表示该属性是私有的，实际上它还是公开的。 +person.name = "Greg"; +console.log(person.name); // "Setting name to Greg" 然后输出 "Greg" +``` + +> 前置下划线 _ 是一个约定俗成的命名规范，表示该属性是私有的，实际上它还是公开的。 访问器就是定义了我们在对象读取或设置属性时，触发的动作（函数），`_name` 相当于一个内部变量。 当你希望赋值（读取）操作会触发一些行为，访问器就会非常有用。 -> 当只定义getter或setter其一时，该属性就会变成只读或只写。 +> 当只定义 getter 或 setter 其一时，该属性就会变成只读或只写。 ### 3.6 属性特征 -在ECMAScript 5 之前没有办法指定一个属性是否可枚举。实际上根本没有方法访问属性的任何内部特征。为了改变这点，ECMAScript 5引入了多种方法来和属性特征值直接互动。 + +在 ECMAScript 5 之前没有办法指定一个属性是否可枚举。实际上根本没有方法访问属性的任何内部特征。为了改变这点，ECMAScript 5 引入了多种方法来和属性特征值直接互动。 #### 3.6.1 通用特征 + 数据属性和访问器属性均由以下两个属性特制： `[[Enumerable]]` 决定了是否可以遍历该属性； `[[Configurable]]` 决定了该属性是否可配置。 @@ -471,156 +560,176 @@ ECMAScript 5 的 Object() 方法可以获取可枚举属性的名字的数组。 可以用 `Object.defineProperty()` 方法改变属性特征。 其参数有三：拥有该属性的对象、属性名和包含需要设置的特性的属性描述对象。 - - var person = { - name: "Nicholas" - } - Object.defineProperty(person, "name", { - enumerable: false - }) - - console.log("name" in person); // true - console.log(person.propertyIsEnumerable("name")); // false - - var properties = Object.keys(person); - console.log(properties.length); // 0 - - Object.defineProperty(person, "name",{ - configurable: false - }) - - delete person.name; // false - console.log("name" in person); // true - - Object.defineProperty(person, "name",{ // error! - // 在 chrome：Uncaught TypeError: Cannot redefine property: name - configurable: true - }) - + +```js +var person = { + name: "Nicholas" +} +Object.defineProperty(person, "name", { + enumerable: false +}) + +console.log("name" in person); // true +console.log(person.propertyIsEnumerable("name")); // false + +var properties = Object.keys(person); +console.log(properties.length); // 0 + +Object.defineProperty(person, "name",{ + configurable: false +}) + +delete person.name; // false +console.log("name" in person); // true + +Object.defineProperty(person, "name",{ // error! + // 在 chrome：Uncaught TypeError: Cannot redefine property: name + configurable: true +}) +``` > 无法将一个不可配置的属性变为可配置，相反则可以。 #### 3.6.2 数据属性特征 + 数据属性额外拥有两个访问器属性不具备的特征。 `[[Value]]` 包含属性的值(哪怕是函数)。 `[[Writable]]` 布尔值，指示该属性是否可写入。所有属性默认都是可写的。 - var person = {}; - - Object.defineProperty(person, "name", { - value: "Nicholas", - enumerable: true, - configurable: true, - writable: true - }) - +```js +var person = {}; + +Object.defineProperty(person, "name", { + value: "Nicholas", + enumerable: true, + configurable: true, + writable: true +}) +``` + 在 `Object.defineProperty()` 被调用时，如果属性本来就有，则会按照新定义属性特征值去覆盖默认属性特征（`enumberable`、`configurable` 和 `writable` 均为 `true`）。但如果用该方法定义新的属性时，没有为所有的特征值指定一个值，则所有布尔值的特征值会被默认设置为 `false`。即不可枚举、不可配置、不可写的。 当你用 `Object.defineProperty()` 改变一个已有的属性时，只有你指定的特征会被改变。 #### 3.6.3 访问器属性特征 + 访问器属性额外拥有两个特征。`[[Get]]` 和 `[[Set]]`，内含 `getter` 和 `setter` 函数。 使用访问其属性特征比使用对象字面形式定义访问器属性的优势在于：可以为已有的对象定义这些属性。而后者只能在创建时定义访问器属性。 - var person = { - _name: "Nicholas" - }; - - Object.defineProperty(person, "name", { - get: function(){ - return this._name; - }, - set: function(value){ - this._name = value; - }, - enumerable: true, - configurable: true - }) - - for(var x in person){ - console.log(x); // _name \n(换行) name（访问器属性） - } - +```js +var person = { + _name: "Nicholas" +}; + +Object.defineProperty(person, "name", { + get: function(){ + return this._name; + }, + set: function(value){ + this._name = value; + }, + enumerable: true, + configurable: true +}) + +for(var x in person){ + console.log(x); // _name \n(换行) name（访问器属性） +} +``` 设置一个不可配置、不可枚举、不可以写的属性： - Object.defineProperty(person, "name",{ - get: function(){ - return this._name; - } - }) - +```js +Object.defineProperty(person, "name",{ + get: function(){ + return this._name; + } +}) +``` + 对于一个新的访问器属性，没有显示设置值为布尔值的属性，默认为 `false`。 #### 3.6.4 定义多重属性 + `Object.defineProperties()` 方法可以定义任意数量的属性，甚至可以同时改变已有的属性并创建新属性。 - - var person = {}; - - Object.defineProperties(person, { - - // data property to store data - _name: { - value: "Nicholas", - enumerable: true, - configurable: true, - writable: true - }, - - // accessor property - name: { - get: function(){ - return this._name; - }, - set: function(value){ - this._name = value; - } - } - }) + +```js +var person = {}; + +Object.defineProperties(person, { + + // data property to store data + _name: { + value: "Nicholas", + enumerable: true, + configurable: true, + writable: true + }, + + // accessor property + name: { + get: function(){ + return this._name; + }, + set: function(value){ + this._name = value; + } + } +}) +``` #### 3.6.5 获取属性特征 -`Object.getOwnPropertyDescriptor()` 方法。该方法接受两个参数：对象和属性名。如果属性存在，它会返回一个属性描述对象，内涵`4`个属性：`configurable` 和 `enumerable`，另外两个属性则根据属性类型决定。 - var person = { - name: "Nicholas" - } - - var descriptor = Object.getOwnPropertyDescriptor(person, "name"); - - console.log(descriptor.enumerable); // true - console.log(descriptor.configuable); // true - console.log(descriptor.value); // "Nicholas" - console.log(descriptor.wirtable); // true - +`Object.getOwnPropertyDescriptor()` 方法。该方法接受两个参数：对象和属性名。如果属性存在，它会返回一个属性描述对象，内涵 `4` 个属性：`configurable` 和 `enumerable`，另外两个属性则根据属性类型决定。 + +```js +var person = { + name: "Nicholas" +} + +var descriptor = Object.getOwnPropertyDescriptor(person, "name"); + +console.log(descriptor.enumerable); // true +console.log(descriptor.configuable); // true +console.log(descriptor.value); // "Nicholas" +console.log(descriptor.wirtable); // true +``` + ### 3.7 禁止修改对象 + 对象和属性一样具有指导其行为的内部特性。其中， `[[Extensible]]` 是布尔值，指明该对象本身是否可以被修改。默认是 `true`。当值为 `false` 时，就能禁止新属性的添加。 > 建议在 "use strict"; 严格模式下进行。 #### 3.7.1 禁止扩展 + `Object.preventExtensions()` 创建一个不可扩展的对象（即**不能添加新属性**）。 `Object.isExtensible()` 检查 `[[Extensible]]` 的值。 - var person = { - name: "Nocholas" - } - - Object.preventExtensions(person); - - person.sayName = function(){ - console.log(this.name) - } - - console.log("sayName" in person); // false - +```js +var person = { + name: "Nocholas" +} + +Object.preventExtensions(person); + +person.sayName = function(){ + console.log(this.name) +} + +console.log("sayName" in person); // false +``` + #### 3.7.2 对象封印 + 一个被封印的对象是不可扩展的且其所有属性都是不可配置的（即不能添加、删除属性或修改其属性类型（从数据属性变成访问器属性或相反））。**只能读写它的属性**。 Object.seal()。调用此方法后，该对象的 `[[Extensible]]` 特征被设置为 `false`，其所有属性的 `[[configurable]]` 特征被设置为 `false`。 `Object.isSealed()` 判断一个对象是否被封印。 #### 3.7.3 对象冻结 被冻结的对象不能添加或删除属性，不能修改属性类型，也不能写入任何数据属性。简言而之，被冻结对象是一个**数据属性都为只读**的被封印对象。 -`Object.freeze()` 冻结对象。 -`Object.isFrozen()` 判断对象是否被冻结。 + + - `Object.freeze()` 冻结对象。 + - `Object.isFrozen()` 判断对象是否被冻结。 ### 3.8 总结 @@ -632,30 +741,36 @@ Object.seal()。调用此方法后，该对象的 `[[Extensible]]` 特征被设 ## 4. 构造函数和原型对象 -由于JavaScript(ES5)缺乏类，但可用构造函数和原型对象给对象带来与类相似的功能。 + +由于 JavaScript(ES5) 缺乏类，但可用构造函数和原型对象给对象带来与类相似的功能。 ### 4.1 构造函数 + 构造函数的函数名首字母应大写，以此区分其他函数。 当没有需要给构造函数传递参数，可忽略小括号： - - var Person = { - // 故意留空 - } - var person = new Person; + +```js +var Person = { + // 故意留空 +} +var person = new Person; +``` 尽管 Person 构造函数没有显式返回任何东西，但 new 操作符会自动创建给定类型的对象并返回它们。 每个对象在创建时都自动拥有一个构造函数属性（constructor，其实是它们的原型对象上的属性），其中包含了一个指向其构造函数的引用。 -通过对象字面量形式（{}）或Object构造函数创建出来的泛用对象，其构造函数属性（constructor）指向 Object；而那些通过自定义构造函数创建出来的对象，其构造函数属性指向创建它的构造函数。 - - console.log(person.constructor === Person); // true - console.log(({}).constructor === Object); // true - console.log(([1,2,3]).constructor === Object); // true - - // 证明 constructor是在原型对象上 - console.log(person.hasOwnPrototype("constructor")); // false - console.log(person.constructor.prototype.hasOwnPrototype("constructor")); // true - +通过对象字面量形式（{}）或 Object 构造函数创建出来的泛用对象，其构造函数属性（constructor）指向 Object；而那些通过自定义构造函数创建出来的对象，其构造函数属性指向创建它的构造函数。 + +```js +console.log(person.constructor === Person); // true +console.log(({}).constructor === Object); // true +console.log(([1,2,3]).constructor === Object); // true + +// 证明 constructor 是在原型对象上 +console.log(person.hasOwnPrototype("constructor")); // false +console.log(person.constructor.prototype.hasOwnPrototype("constructor")); // true +``` + 尽管对象实例及其构造函数之间存在这样的关系，但还是建议使用 `instanceof` 来检查对象类型。这是因为构造函数属性可以被覆盖。（person.constructor = ""）。 当你调用构造函数时，new 会自动自动创建 this 对象，且其类型就是构造函数的类型（构造函数就好像类，相当于一种数据类型）。 @@ -664,170 +779,197 @@ Object.seal()。调用此方法后，该对象的 `[[Extensible]]` 特征被设 始终确保要用 new 调用构造函数；否则，你就是在冒着改变全局对象的风险，而不是创建一个新的对象。 - var person = Person("Nicholas"); // 缺少 new - - console.log(person instanceof Person); // false - console.log(person); // undefined，因为没用 new，就相当于一个普通函数，默认返回 undefined - console.log(name); // "Nicholas" +```js +var person = Person("Nicholas"); // 缺少 new + +console.log(person instanceof Person); // false +console.log(person); // undefined，因为没用 new，就相当于一个普通函数，默认返回 undefined +console.log(name); // "Nicholas" +``` -当Person不是被 new 调用时，构造函数中的 this 对象等于全局 this 对象。 +当 Person 不是被 new 调用时，构造函数中的 this 对象等于全局 this 对象。 > 在严格模式下，会报错。因为严格模式下，并没有为全局对象设置 this，this 保持为 undefined。 以下代码，通过 new 实例化 100 个对象，则会有 100 个函数做相同的事。因此可用 `prototype` 共享同一个方法会更高效。 - var person = { - name: "Nicholas", - sayName: function(){ - console.log(this.name); - } - } +```js +var person = { + name: "Nicholas", + sayName: function(){ + console.log(this.name); + } +} +``` ### 4.2 原型对象 -可以把原型对象看作是对象的基类。几乎所有的函数（除了一些内建函数）都有一个名为 prototype 的属性，该属性是一个原型对象用来创建新的对象实例。所有创建的对象实例（同一构造函数，当然，可能访问上层的原型对象）**共享**该原型对象，且这些对象实例可以访问原型对象的属性。例如，hasOwnProperty()定义在 Object 的原型对象中，但却可被任何对象当作自己的属性访问。 - var book = { - title : "book_name" - } - - "hasOwnProperty" in book; // true - book.hasOwnProperty("hasOwnProperty"); // false - Object.property.hasOwnProperty("hasOwnProperty"); // true - +可以把原型对象看作是对象的基类。几乎所有的函数（除了一些内建函数）都有一个名为 prototype 的属性，该属性是一个原型对象用来创建新的对象实例。所有创建的对象实例（同一构造函数，当然，可能访问上层的原型对象）**共享**该原型对象，且这些对象实例可以访问原型对象的属性。例如，hasOwnProperty() 定义在 Object 的原型对象中，但却可被任何对象当作自己的属性访问。 + +```js +var book = { + title : "book_name" +} + +"hasOwnProperty" in book; // true +book.hasOwnProperty("hasOwnProperty"); // false +Object.property.hasOwnProperty("hasOwnProperty"); // true +``` **鉴别一个原型属性** - - function hasPrototypeProperty(object, name){ - return name in object && !object.hasOwnProperty(name); - } + +```js +function hasPrototypeProperty(object, name){ + return name in object && !object.hasOwnProperty(name); +} +``` #### 4.2.1 [[Prototype]] 属性 + 一个对象实例通过内部属性 [[Prototype]] 跟踪其原型对象。该属性是一个指向该实例使用的原型对象的指针。当你用 new 创建一个新的对象时，构造函数的原型对象就会被赋给该对象的 [[Prototype]] 属性。 -![prototype][3] +![prototype][3] 由上图可以看出，[[Prototype]] 属性是如何让多个对象实例引用同一个原型对象来减少重复代码。 Object.getPrototypeOf() 方法可读取 [[Prototype]] 属性的值。 - - var obj = {}; - var prototype = Object.getPrototypeOf(Object); - - console.log(prototype === Object.prototype); // true -> 大部分JavaScript引擎在所有对象上都支持一个名为 `__proto__` 的属性。该属性使你可以直接读写 [[Prototype]] 属性。 +```js +var obj = {}; +var prototype = Object.getPrototypeOf(Object); + +console.log(prototype === Object.prototype); // true +``` + +> 大部分 JavaScript 引擎在所有对象上都支持一个名为 `__proto__` 的属性。该属性使你可以直接读写 [[Prototype]] 属性。 isPrototypeOf() 方法会检查某个对象是否是另一个对象的原型对象，该方法包含在所有对象中。 - var obj = {} - console.log(Object.prototype.isPrototypeOf(obj)); // true - +```js +var obj = {} +console.log(Object.prototype.isPrototypeOf(obj)); // true +``` + 当读取一个对象的属性时，JavaScript 引擎首先在该对象的自有属性查找属性名。如果找到则返回。否则会搜索 [[Prototype]] 中的对象，找到则返回，找不到则返回 undefined。 - var obj = new Object(); - console.log(obj.toString()); // "[object Object]" - - obj.toString = function(){ - return "[object Custom]"; - } - console.log(obj.toString()); // "[object Custom]" - - delete obj.toString; // true - console.log(obj.toString()); // "[object Object]" - - delete obj.toString; // 无效，delete不能删除一个对象从原型继承而来的属性 - cconsole.log(obj.toString()); // // "[object Object]" +```js +var obj = new Object(); +console.log(obj.toString()); // "[object Object]" + +obj.toString = function(){ + return "[object Custom]"; +} +console.log(obj.toString()); // "[object Custom]" + +delete obj.toString; // true +console.log(obj.toString()); // "[object Object]" + +delete obj.toString; // 无效，delete不能删除一个对象从原型继承而来的属性 +cconsole.log(obj.toString()); // // "[object Object]" +``` > MDN：delete 操作符不能删除的属性有：①显式声明的全局变量不能被删除,该属性不可配置（not configurable）； ②内置对象的内置属性不能被删除； ③不能删除一个对象从原型继承而来的属性(不过你可以从原型上直接删掉它)。 一个重要概念：无法给一个对象的原型属性赋值。但我们可以通过 `obj.constructor.prototype.sayHi = function(){console.log("Hi!")}` 向原型对象添加属性。 -![此处输入图片的描述][4] -（图片中间可以看出，为对象obj添加的toString属性代替了原型属性） +![此处输入图片的描述][4] +（图片中间可以看出，为对象 obj 添加的 toString 属性代替了原型属性） #### 4.2.2 在构造函数中使用原型对象 + ##### 在原型对象上定义公用方法 + ##### 在原型对象上定义数据类型 + 开发中需要注意原型对象的数据是否共享。 - function Person(name){ - this.name = name - } +```js +function Person(name){ + this.name = name +} - Person.prototype.sayName = function(){ - console.log(this.name); - } +Person.prototype.sayName = function(){ + console.log(this.name); +} - Person.prototype.position = "school"; - Person.prototype.arr = []; +Person.prototype.position = "school"; +Person.prototype.arr = []; - var person1 = new Person("xiaoming"); - var person2 = new Person("Jc"); +var person1 = new Person("xiaoming"); +var person2 = new Person("Jc"); - console.log("原始类型") - console.log(person1.position); // "school" - console.log(person2.position); // "school" +console.log("原始类型") +console.log(person1.position); // "school" +console.log(person2.position); // "school" - person1.position = 2; // 这是在当前属性设置position，引用类型同理 - console.log(person1.hasOwnProperty("position")); // true - console.log(person2.hasOwnProperty("position")); // false +person1.position = 2; // 这是在当前属性设置position，引用类型同理 +console.log(person1.hasOwnProperty("position")); // true +console.log(person2.hasOwnProperty("position")); // false - console.log("引用类型"); - person1.arr.push("pizza"); // 这是在原型对象上设置，而不是直接在对象上 - person2.arr.push("quinoa"); // 这是在原型对象上设置 - console.log(person1.hasOwnProperty("arr")); // false - console.log(person2.hasOwnProperty("arr")); // false - console.log(person1.arr); // ["pizza", "quinoa"] - console.log(person2.arr); // ["pizza", "quinoa"] +console.log("引用类型"); +person1.arr.push("pizza"); // 这是在原型对象上设置，而不是直接在对象上 +person2.arr.push("quinoa"); // 这是在原型对象上设置 +console.log(person1.hasOwnProperty("arr")); // false +console.log(person2.hasOwnProperty("arr")); // false +console.log(person1.arr); // ["pizza", "quinoa"] +console.log(person2.arr); // ["pizza", "quinoa"] +``` 上面是在原型对象上一一添加属性，下面一种更简洁的方式：以一个对象字面形式替换原型对象 - function Person(name){ - this.name - } - - Person.prototype = { - sayName: function(){ - console.log(this.name); - }, - toString: function(){ - return "[Person ]" + this.name + "]"; - } - } +```js +function Person(name){ + this.name = name +} + +Person.prototype = { + sayName: function(){ + console.log(this.name); + }, + toString: function(){ + return "[Person ]" + this.name + "]"; + } +} +``` 这种方式有一种副作用：因为原型对象上具有一个 `constructor` 属性，这是其他对象实例所没有的。当一个函数被创建时，它的 `prototype` 属性也会被创建，且该原型对象的 `constructor` 属性指向该函数。当使用字面量时，因没显式设置原型对象的 `constructor` 属性，因此其 `constructor` 属性是指向 `Object` 的。 因此，当通过此方式设置原型对象时，可手动设置 `constructor` 属性。 - - function Person(name){ - this.name - } - - // 建议第一个属性就是设置其 constructor 属性。 - Person.prototype = { - constructor: Person, - - sayName: function(){ - console.log(this.name); - }, - toString: function(){ - return "[Person ]" + this.name + "]"; - } - } + +```js +function Person(name){ + this.name = name +} + +// 建议第一个属性就是设置其 constructor 属性。 +Person.prototype = { + constructor: Person, + + sayName: function(){ + console.log(this.name); + }, + toString: function(){ + return "[Person ]" + this.name + "]"; + } +} +``` 构造函数、原型对象和对象实例之间的关系最有趣的一方面也许是： 对象实例和构造函数直接没有直接联系。（对象实例只有 `[[Prototype]]` 属性指向其相应的原型对象，而原型对象的 `constructor` 属性指向构造函数，而构造函数的 `prototype` 指向原型对象） ![obj_constructor_prototype][5] #### 4.2.3 改变原型对象 + 因为每个对象的 `[[Prototype]]` 只是一个指向原型对象的指针，所以原型对象的改动会立刻反映到所有引用它的对象。 当对一个对象使用封印 `Object.seal()` 或冻结 `Object.freeze()` 时，完全是在操作对象的自有属性，但任然可以通过在原型对象上添加属性来扩展这些对象实例。 #### 4.2.4 内建对象（如Array、String）的原型对象 - String.prototype.capitalize = function(){ - return this.charAt(0).toUpperCase() + this.substring(1); - } - +```js +String.prototype.capitalize = function(){ + return this.charAt(0).toUpperCase() + this.substring(1); +} +``` + ### 总结 - 构造函数就是用 `new` 操作符调用的普通函数。可用过 `instanceof` 操作符或直接访问 `constructor`(实际上是原型对象的属性) 来鉴别对象是被哪个构造函数所创建的。 @@ -837,13 +979,16 @@ isPrototypeOf() 方法会检查某个对象是否是另一个对象的原型对 ## 5. 继承 + ### 5.1 原型对象链和 Object.prototype -JavaScript内建的继承方法被称为 原型对象链（又叫原型对象继承）。 + +JavaScript 内建的继承方法被称为 原型对象链（又叫原型对象继承）。 原型对象的属性可经由对象实例访问，这就是继承的一种形式。对象实例继承了原型对象的属性，而原型对象也是一个对象，它也有自己的原型对象并继承其属性，以此类推。这就是原型对象链。 - + 所有对象（包括自义定的）都自动继承自 `Object`，除非你另有指定。更确切地说，所有对象都继承自 `Object.prototype`。任何以对象字面量形式定义的对象，其 `[[Prototype]]` 的值都被设为 `Object.prototype`，这意味着它继承 `Object.prototype` 的属性。 #### 5.1.1 继承自 Object.prototype 的方法 + Object.prototype 一般有以下几个方法 - hasOwnProperty() 检测是否存在一个给定名字的自有属性 @@ -856,310 +1001,349 @@ Object.prototype 一般有以下几个方法 因为所有对象都默认继承自 `Object.prototype`，所以改变它就会影响所有的对象。所以不建议。 ### 5.2 继承 + 对象继承是最简单的继承类型。你唯需要做的是指定哪个对象是新对象的 `[[Prototype]]`。对象字面量形式会隐式指定 `Object.prototype` 为其 `[[Protoype]]`。当然我们可以用 ES5 的 `Object.create()` 方法显式指定。该方法接受两个参数，第一个是新对象的的 `[[Prototype]]` 所指向的对象。第二个参数是可选的一个属性描述对象，其格式与 `Object.definePrototies()`一样。 - var obj = { - name: "Ljc" - }; - - // 等同于 - var obj = Object.create(Object.prototype, { - name: { - value: "Ljc", - configurable: true, - enumberable: true, - writable: true - } - }); - +```js +var obj = { + name: "Ljc" +}; + +// 等同于 +var obj = Object.create(Object.prototype, { + name: { + value: "Ljc", + configurable: true, + enumberable: true, + writable: true + } +}); +``` + 下面是继承其它对象： - - var person = { - name: "Jack", - sayName: function(){ - console.log(this.name); - } - } - - var student = Object.create(person, { - name:{ - value: "Ljc" - }, - grade: { - value: "fourth year of university", - enumerable: true, - configurable: true, - writable: true - } - }); - - person.sayName(); // "Jack" - student.sayName(); // "Ljc" - - console.log(person.hasOwnProperty("sayName")); // true - console.log(person.isPrototypeOf(student)); // true - console.log(student.hasOwnProperty("sayName")); // false - console.log("sayName" in student); // true - + +```js +var person = { + name: "Jack", + sayName: function(){ + console.log(this.name); + } +} + +var student = Object.create(person, { + name:{ + value: "Ljc" + }, + grade: { + value: "fourth year of university", + enumerable: true, + configurable: true, + writable: true + } +}); + +person.sayName(); // "Jack" +student.sayName(); // "Ljc" + +console.log(person.hasOwnProperty("sayName")); // true +console.log(person.isPrototypeOf(student)); // true +console.log(student.hasOwnProperty("sayName")); // false +console.log("sayName" in student); // true +``` + ![对象继承][6] -当访问一个对象属性时，JavaScript引擎会执行一个搜索过程。如果在对象实例存在该自有属性，则返回，否则，根据其私有属性 `[[Protoype]]` 所指向的原型对象进行搜索，找到返回，否则继承上述操作，知道继承链末端。末端通常是 `Object.prototype`，其 `[[Prototype]]` 是 `null`。 +当访问一个对象属性时，JavaScript 引擎会执行一个搜索过程。如果在对象实例存在该自有属性，则返回，否则，根据其私有属性 `[[Protoype]]` 所指向的原型对象进行搜索，找到返回，否则继承上述操作，知道继承链末端。末端通常是 `Object.prototype`，其 `[[Prototype]]` 是 `null`。 当然，也可以用 `Object.create()` 常见一个 `[[Prototype]]` 为 `null` 的对象。 - - var obj = Object.create(null); - - console.log("toString" in obj); // false - + +```js +var obj = Object.create(null); + +console.log("toString" in obj); // false +``` + 该对象是一个没有原型对象链的对象，即是一个没有预定义属性的白板。 ### 5.3 构造函数继承 + JavaScript 中的对象继承也是构造函数继承的基础。 第四章提到，几乎所有函数都有 `prototype` 属性，它可被修改或替换。该 `prototype` 属性被自动设置为一个新的继承自 `Object.prototype` 的泛用对象，该对象(原型对象)有一个自有属性 `constructor`。实际上，JavaScript 引擎为你做了下面的事情。 - // 你写成这样 - function YourConstructor(){ - // initialization - } - - // JavaScript引擎在背后为你做了这些处理 - YourConstructor.prototype = Object.create(Object.prototype, { - constructor: { - configurable: true, - enumerable: true, - value: YourConstructor, - writable: true - } - }) +```js +// 你写成这样 +function YourConstructor(){ + // initialization +} + +// JavaScript引擎在背后为你做了这些处理 +YourConstructor.prototype = Object.create(Object.prototype, { + constructor: { + configurable: true, + enumerable: true, + value: YourConstructor, + writable: true + } +}) +``` 你不需要做额外的工作，这段代码帮你把构造函数的 `prototype` 属性设置为一个继承自 `Object.prototype` 的对象。这意味着 `YourConstructor` 创建出来的任何对象都继承自 `Object.prototype`。 由于 prototype 可写，你可以通过改变它来改变原型对象链。 -> MDN:instanceof 运算符可以用来判断某个构造函数的 prototype 属性是否存在另外一个要检测对象的原型链上。 - function Rectangle(length, width){ - this.length = length; - this.width = width - } +> MDN：instanceof 运算符可以用来判断某个构造函数的 prototype 属性是否存在另外一个要检测对象的原型链上。 - Rectangle.prototype.getArea = function(){ - return this.length * this.width - } +```js +function Rectangle(length, width){ + this.length = length; + this.width = width +} - Rectangle.prototype.toString = function(){ - return "[Rectangle " + this.length + "x" + this.width + "]"; - } +Rectangle.prototype.getArea = function(){ + return this.length * this.width +} +Rectangle.prototype.toString = function(){ + return "[Rectangle " + this.length + "x" + this.width + "]"; +} - // inherits from Rectangle - function Square(size){ - this.length = size; - this.width = size; - } +// inherits from Rectangle +function Square(size){ + this.length = size; + this.width = size; +} - Square.prototype = new Rectangle(); // 尽管是 Square.prototype 是指向了 Rectangle 的对象实例，即Square的实例对象也能访问该实例的属性（如果你提前声明了该对象，且给该对象新增属性）。 - // Square.prototype = Rectangle.prototype; // 这种实现没有上面这种好，因为Square.prototype 指向了 Rectangle.prototype，导致修改Square.prototype时，实际就是修改Rectangle.prototype。 - console.log(Square.prototype.constructor); // 输出 Rectangle 构造函数 +Square.prototype = new Rectangle(); // 尽管是 Square.prototype 是指向了 Rectangle 的对象实例，即Square的实例对象也能访问该实例的属性（如果你提前声明了该对象，且给该对象新增属性）。 +// Square.prototype = Rectangle.prototype; // 这种实现没有上面这种好，因为Square.prototype 指向了 Rectangle.prototype，导致修改Square.prototype时，实际就是修改Rectangle.prototype。 +console.log(Square.prototype.constructor); // 输出 Rectangle 构造函数 - Square.prototype.constructor = Square; // 重置回 Square 构造函数 - console.log(Square.prototype.constructor); // 输出 Square 构造函数 +Square.prototype.constructor = Square; // 重置回 Square 构造函数 +console.log(Square.prototype.constructor); // 输出 Square 构造函数 - Square.prototype.toString = function(){ - return "[Square " + this.length + "x" + this.width + "]"; - } +Square.prototype.toString = function(){ + return "[Square " + this.length + "x" + this.width + "]"; +} - var rect = new Rectangle(5, 10); - var square = new Square(6); +var rect = new Rectangle(5, 10); +var square = new Square(6); - console.log(rect.getArea()); // 50 - console.log(square.getArea()); // 36 +console.log(rect.getArea()); // 50 +console.log(square.getArea()); // 36 - console.log(rect.toString()); // "[Rectangle 5 * 10]", 但如果是Square.prototype = Rectangle.prototype，则这里会"[Square 5 * 10]" - console.log(square.toString()); // "[Square 6 * 6]" +console.log(rect.toString()); // "[Rectangle 5 * 10]", 但如果是Square.prototype = Rectangle.prototype，则这里会"[Square 5 * 10]" +console.log(square.toString()); // "[Square 6 * 6]" - console.log(square instanceof Square); // true - console.log(square instanceof Rectangle); // true - console.log(square instanceof Object); // true +console.log(square instanceof Square); // true +console.log(square instanceof Rectangle); // true +console.log(square instanceof Object); // true +``` -![构造函数继承][7] +![构造函数继承][7] `Square.prototype` 并不真的需要被改成为一个 `Rectangle` 对象。事实上，是 `Square.prototype` 需要指向 `Rectangle.prototype` 使得继承得以实现。这意味着可以用 `Object.create()` 简化例子。 - // inherits from Rectangle - function Square(size){ - this.length = size; - this.width = size; - } - - Square.prototype= Object.create(Rectangle.prototype, { - constructor: { - configurable: true, - enumerable: true, - value: Square, - writable: true - } - }) +```js +// inherits from Rectangle +function Square(size){ + this.length = size; + this.width = size; +} + +Square.prototype= Object.create(Rectangle.prototype, { + constructor: { + configurable: true, + enumerable: true, + value: Square, + writable: true + } +}) +``` > 在对原型对象添加属性前要确保你已经改成了原型对象，否则在改写时会丢失之前添加的方法（因为继承是将被继承对象赋值给需要继承的原型对象，相当于重写了需要继承的原型对象）。 ### 5.4 构造函数窃取 -由于JavaScript中的继承是通过原型对象链来实现的，因此不需要调用对象的父类的构造函数。如果确实需要在子类构造函数中调用父类构造函数，那就可以在子类的构造函数中利用 `call`、`apply`方法调用父类的构造函数。 - - // 在上面的代码基础上作出修改 - // inherits from Rectangle - function Square(size){ - Rectangle.call(this, size, size); - - // optional: add new properties or override existing ones here - } -一般来说，需要修改 `prototyp` 来继承方法并用构造函数窃取来设置属性，由于这种做法模仿了那些基于类的语言的类继承，所以这通常被称为伪类继承。 +由于 JavaScript 中的继承是通过原型对象链来实现的，因此不需要调用对象的父类的构造函数。如果确实需要在子类构造函数中调用父类构造函数，那就可以在子类的构造函数中利用 `call`、`apply` 方法调用父类的构造函数。 + +```js +// 在上面的代码基础上作出修改 +// inherits from Rectangle +function Square(size){ + Rectangle.call(this, size, size); + + // optional: add new properties or override existing ones here +} +``` + +一般来说，需要修改 `prototype` 来继承方法并用构造函数窃取来设置属性，由于这种做法模仿了那些基于类的语言的类继承，所以这通常被称为伪类继承。 ### 5.5 访问父类方法 + 其实也是通过指定 `call` 或 `apply` 的子对象调用父类方法。 ## 6 对象模式 -###6.1 私有成员和特权成员 -JavaScipt 对象的所有属性都是公有的，没有显式的方法指定某个属性不能被外界访问。 + +### 6.1 私有成员和特权成员 + +JavaScript 对象的所有属性都是公有的，没有显式的方法指定某个属性不能被外界访问。 #### 6.1.1 模块模式 + 模块模式是一种用于创建**拥有私有数据的单件对象**的模式。 基本做法是使用立即调用函数表达式（IIFE）来返回一个对象。原理是利用闭包。 - - var yourObj = (function(){ - // private data variables - - return { - // public methods and properties - } - }()); - + +```js +var yourObj = (function(){ + // private data variables + + return { + // public methods and properties + } +}()); +``` + 模块模式还有一个变种叫暴露模块模式，它将所有的变量和方法都放在 `IIFE` 的头部，然后将它们设置到需要被返回的对象上。 - // 一般写法 - var yourObj = (function(){ - var age = 25; - - return { - name: "Ljc", - - getAge: function(){ - return agel - } - } - }()); - - // 暴露模块模式 - var yourObj = (function(){ - var age = 25; - function getAge(){ - return agel - }; - return { - name: "Ljc", - getAge: getAge - } - }()); +```js +// 一般写法 +var yourObj = (function(){ + var age = 25; + + return { + name: "Ljc", + + getAge: function(){ + return age; + } + } +}()); + + +// 暴露模块模式 +var yourObj = (function(){ + var age = 25; + function getAge(){ + return age; + }; + return { + name: "Ljc", + getAge: getAge + } +}()); +``` #### 6.1.2 构造函数的私有成员（不能通过对象直接访问） + 模块模式在定义单个对象的私有属性十分有效，但对于那些同样需要私有属性的自定义类型呢？你可以在构造函数中使用类似的模式来创建每个实例的私有数据。 - function Person(name){ - // define a variable only accessible inside of the Person constructor - var age = 22; - - this.name = name; - this.getAge = function(){ - return age; - }; - this.growOlder = function(){ - age++; - } - } - - var person = new Person("Ljc"); - - console.log(person.age); // undefined - person.age = 100; - console.log(person.getAge()); // 22 - - person.growOlder(); - console.log(person.getAge()); // 23 - +```js +function Person(name){ + // define a variable only accessible inside of the Person constructor + var age = 22; + + this.name = name; + this.getAge = function(){ + return age; + }; + this.growOlder = function(){ + age++; + } +} + +var person = new Person("Ljc"); + +console.log(person.age); // undefined +person.age = 100; +console.log(person.getAge()); // 22 + +person.growOlder(); +console.log(person.getAge()); // 23 +``` + 这里有个问题：如果你需要**对象实例**拥有私有数据，就不能将相应方法放在 `prototype` 上。 如果你需要所有实例共享私有数据。则可结合模块模式和构造函数，如下： - - var Person = (function(){ - var age = 22; - function InnerPerson(name){ - this.name = name; - } +```js +var Person = (function(){ + var age = 22; + + function InnerPerson(name){ + this.name = name; + } - InnerPerson.prototype.getAge = function(){ - return age; - } - InnerPerson.prototype.growOlder = function(){ - age++; - }; + InnerPerson.prototype.getAge = function(){ + return age; + } + InnerPerson.prototype.growOlder = function(){ + age++; + }; - return InnerPerson; - }()); + return InnerPerson; +}()); - var person1 = new Person("Nicholash"); - var person2 = new Person("Greg"); +var person1 = new Person("Nicholash"); +var person2 = new Person("Greg"); - console.log(person1.name); // "Nicholash" - console.log(person1.getAge()); // 22 +console.log(person1.name); // "Nicholash" +console.log(person1.getAge()); // 22 - console.log(person2.name); // "Greg" - console.log(person2.getAge()); // 22 +console.log(person2.name); // "Greg" +console.log(person2.getAge()); // 22 - person1.growOlder(); - console.log(person1.getAge()); // 23 - console.log(person2.getAge()); // 23 +person1.growOlder(); +console.log(person1.getAge()); // 23 +console.log(person2.getAge()); // 23 +``` ### 6.2 混入 + 这是一种伪继承。一个对象在不改变原型对象链的情况下得到了另外一个对象的属性被称为“混入”。因此，和继承不同，混入让你在创建对象后无法检查属性来源。 纯函数实现： - - function mixin(receiver, supplier){ - for(var property in supplier){ - if(supplier.hasOwnProperty(property)){ - receiver[property] = supplier[property]; - } - } + +```js +function mixin(receiver, supplier){ + for(var property in supplier){ + if(supplier.hasOwnProperty(property)){ + receiver[property] = supplier[property]; } + } +} +``` 这是浅拷贝，如果属性的值是一个引用，那么两者将指向同一个对象。 ### 6.3 作用域安全的构造函数 + 构造函数也是函数，所以不用 new 也能调用它们来改变 `this` 的值。在非严格模式下， `this` 被强制指向全局对象。而在严格模式下，构造函数会抛出一个错误（因为严格模式下没有为全局对象设置 `this`，`this` 保持为 `undefined`）。 而很多内建构造函数，例如 `Array`、`RegExp` 不需要 `new` 也能正常工作，这是因为它们被设计为作用域安全的构造函数。 当用 `new` 调用一个函数时，`this` 指向的新创建的对象是属于该构造函数所代表的自定义类型。因此，可在函数内用 `instanceof` 检查自己是否被 `new` 调用。 - function Person(name){ - if(this instanceof Person){ - // called with "new" - }else{ - // called without "new" - } - } +```js +function Person(name){ + if(this instanceof Person){ + // called with "new" + }else{ + // called without "new" + } +} +``` 具体案例： - - function Person(name){ - if(this instanceof Person){ - this.name = name; - }else{ - return new Person(name); - } - } +```js +function Person(name){ + if(this instanceof Person){ + this.name = name; + }else{ + return new Person(name); + } +} +``` ## 总结 -看了两天的书，做了两天的笔记。当然这只是ES5的。过几天 ES6 新书又来了。最后感谢 [异步社区](http://www.epubit.com.cn/) 送我这本好书 [《JavaScript面向对象精要》](http://www.epubit.com.cn/book/details/1798)，让我的前端根基更加稳固，希望自己的前端之路越走越顺。 + +看了两天的书，做了两天的笔记。当然这只是 ES5 的。过几天 ES6 新书又来了。最后感谢 [异步社区](http://www.epubit.com.cn/) 送我这本好书 [《JavaScript面向对象精要》](http://www.epubit.com.cn/book/details/1798)，让我的前端根基更加稳固，希望自己的前端之路越走越顺。 [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/Object_hash.jpg [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/copy_obj.jpg From 92301c82a07b11e5dff972ebbda68610440b22fb Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 15 Nov 2018 11:36:39 +0800 Subject: [PATCH 21/36] =?UTF-8?q?Update=20=E3=80=8AJavaScript=E9=9D=A2?= =?UTF-8?q?=E5=90=91=E5=AF=B9=E8=B1=A1=E7=B2=BE=E8=A6=81=E3=80=8B=E8=AF=BB?= =?UTF-8?q?=E4=B9=A6=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 96f4483..06fb1b2 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -1343,7 +1343,7 @@ function Person(name){ ## 总结 -看了两天的书，做了两天的笔记。当然这只是 ES5 的。过几天 ES6 新书又来了。最后感谢 [异步社区](http://www.epubit.com.cn/) 送我这本好书 [《JavaScript面向对象精要》](http://www.epubit.com.cn/book/details/1798)，让我的前端根基更加稳固，希望自己的前端之路越走越顺。 +看了两天的书，做了两天的笔记。当然这只是 ES5 的。过几天 ES6 新书又来了。最后感谢 [异步社区](http://www.epubit.com.cn/) 送我这本好书 [《JavaScript 面向对象精要》](http://www.epubit.com.cn/book/details/1798)，让我的前端根基更加稳固，希望自己的前端之路越走越顺。 [1]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/Object_hash.jpg [2]: https://blog-1251477229.cos.ap-chengdu.myqcloud.com/others/copy_obj.jpg From 2dbb2e370f98a69bd76d897e6e62813bd5a63a1f Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 15 Nov 2018 11:46:11 +0800 Subject: [PATCH 22/36] =?UTF-8?q?Update=20=E3=80=8AJavaScript=E9=9D=A2?= =?UTF-8?q?=E5=90=91=E5=AF=B9=E8=B1=A1=E7=B2=BE=E8=A6=81=E3=80=8B=E8=AF=BB?= =?UTF-8?q?=E4=B9=A6=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...00\213\350\257\273\344\271\246\347\254\224\350\256\260.md" | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 06fb1b2..53b80e9 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -1002,7 +1002,9 @@ Object.prototype 一般有以下几个方法 ### 5.2 继承 -对象继承是最简单的继承类型。你唯需要做的是指定哪个对象是新对象的 `[[Prototype]]`。对象字面量形式会隐式指定 `Object.prototype` 为其 `[[Protoype]]`。当然我们可以用 ES5 的 `Object.create()` 方法显式指定。该方法接受两个参数，第一个是新对象的的 `[[Prototype]]` 所指向的对象。第二个参数是可选的一个属性描述对象，其格式与 `Object.definePrototies()`一样。 +对象继承是最简单的继承类型。你唯需要做的是指定哪个对象是新对象的 `[[Prototype]]`。对象字面量形式会隐式指定 `Object.prototype` 为其 `[[Protoype]]`。当然我们可以用 ES5 的 `Object.create()` 方法显式指定。该方法接受两个参数，第一个是新对象的 `[[Prototype]]` 所指向的对象。第二个参数是可选的一个属性描述对象，其格式与 `Object.definePrototies()`一样。 + +> Object.create 与 new 创建对象的区别：http://frontendnotes.net/what-the-difference-between-object-create-and-new-keyword/ ```js var obj = { From c11fef73c591b9faaad0289a8497c900062da893 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 15 Nov 2018 20:51:22 +0800 Subject: [PATCH 23/36] Update README.md --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index 3789f6e..cdf0654 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,3 @@ -### 应聘/求职 - -中级前端开发 -期望地：深圳/广州/东莞 -简历已准备好，摩拳擦掌👊 ### 项目总结 From 94a7fe44dae5649b6eda3e147fddf95bbb40359f Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Fri, 16 Nov 2018 12:50:36 +0800 Subject: [PATCH 24/36] =?UTF-8?q?Update=20=E5=85=B3=E4=BA=8EJavaScript?= =?UTF-8?q?=E5=8D=95=E7=BA=BF=E7=A8=8B=E7=9A=84=E4=B8=80=E4=BA=9B=E4=BA=8B?= =?UTF-8?q?.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\347\232\204\344\270\200\344\272\233\344\272\213.md" | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" index f88bf3a..89c7afa 100644 --- "a/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" +++ "b/posts/\345\205\263\344\272\216JavaScript\345\215\225\347\272\277\347\250\213\347\232\204\344\270\200\344\272\233\344\272\213.md" @@ -6,6 +6,14 @@ 首发地址：[码农网《细说JavaScript单线程的一些事》](http://www.codeceo.com/article/javascript-threaded.html) +## 建议 + +建议不要看本文，看以下三篇文章： + + - [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.im/post/59e85eebf265da430d571f89) + - [Chrome: Multi-process Architecture](https://blog.chromium.org/2008/09/multi-process-architecture.html) + - [Is multithreading concurrent or parallel?](https://www.quora.com/Is-multithreading-concurrent-or-parallel) + 最近被同学问道 JavaScript 单线程的一些事，我竟回答不上。好吧，感觉自己的 JavaScript 白学了。下面是我这几天整理的一些关于 JavaScript 单线程的一些事。 ## 首先，说下为什么 JavaScript 是单线程？ From e368fb048398fb380e2ba011be05c65e1f90aae5 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Sun, 17 Mar 2019 23:49:37 +0800 Subject: [PATCH 25/36] Update README.md --- README.md | 214 +++++++++++++++++++++++++++--------------------------- 1 file changed, 108 insertions(+), 106 deletions(-) diff --git a/README.md b/README.md index cdf0654..cc2c642 100644 --- a/README.md +++ b/README.md @@ -3,59 +3,60 @@ - [XCel 项目总结 - Electron 与 Vue 的性能优化][1] - [我的第一次移动端页面制作 — 总结与思考][2] + - [我的第一次小程序制作 — 总结与思考][3] ### 归纳分享 - - [Three.js 现学现卖][3] - - [“等一下，我碰！”——常见的2D碰撞检测][4] + - [Three.js 现学现卖][4] + - [“等一下，我碰！”——常见的2D碰撞检测][5] ### 动效动画 - - [曲线（路径）运动的那些事][5] - - [正态分布 — 更真实地还原动画][6] - - [【译】叶子——可互动的 Web 玩具][7] - - [【译】使用 CSS 分层动画实现曲线运动][8] - - [动画：从 AE 到 Web][9] - - [【译】隧道动画][10] - - [【译】探索基于 WebGL 的动画与交互（案例学习）][11] - - [CSS 3D Panorama - 淘宝造物节技术剖析][12] + - [曲线（路径）运动的那些事][6] + - [正态分布 — 更真实地还原动画][7] + - [【译】叶子——可互动的 Web 玩具][8] + - [【译】使用 CSS 分层动画实现曲线运动][9] + - [动画：从 AE 到 Web][10] + - [【译】隧道动画][11] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][12] + - [CSS 3D Panorama - 淘宝造物节技术剖析][13] ### Web 小试验 - - [这里有你对 Web 游戏的疑问吗？][13] - - [用 Web 技术实现移动监测][14] - - [实现一个简单但有趣的AR效果（Web）][15] - - [浅谈 WebVR][16] + - [这里有你对 Web 游戏的疑问吗？][14] + - [用 Web 技术实现移动监测][15] + - [实现一个简单但有趣的AR效果（Web）][16] + - [浅谈 WebVR][17] ### 框架 - - [【译】基于 Vue-router 实现用户认证][17] - - [【译】如何更好地组织 React 项目][18] + - [【译】基于 Vue-router 实现用户认证][18] + - [【译】如何更好地组织 React 项目][19] ### API 与 技巧 - - [【译】以案例阐述 Debounce 和 Throttle][19] - - [【译】使用 Fullscreen API 全屏展示内容][20] - - [【译】Grid 完整指南][21] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][22] - - [【译】Electron 的本质][23] + - [【译】以案例阐述 Debounce 和 Throttle][20] + - [【译】使用 Fullscreen API 全屏展示内容][21] + - [【译】Grid 完整指南][22] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][23] + - [【译】Electron 的本质][24] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][24] - - [【译】催眠方块—Hypnotic Squares][25] - - [【译】圆形填充—Circle Packing][26] - - [【译】一二三—Un Deux Trois][27] - - [【译】三角网格—Triangular mesh][28] - - [【译】无序方块—Cubic Disarray][29] - - [【译】欢乐分队—Joy Division][30] - - [【译】瓷砖线—Tiled Lines][31] + - [【译】皮特·蒙德里安—Piet Mondrian][25] + - [【译】催眠方块—Hypnotic Squares][26] + - [【译】圆形填充—Circle Packing][27] + - [【译】一二三—Un Deux Trois][28] + - [【译】三角网格—Triangular mesh][29] + - [【译】无序方块—Cubic Disarray][30] + - [【译】欢乐分队—Joy Division][31] + - [【译】瓷砖线—Tiled Lines][32] ### 读书笔记 - - [《JavaScript 设计模式与开发实践》读书笔记][32] - - [《啊哈！算法》速读笔记][33] - - [《Web API 的设计与开发》读书笔记][34] + - [《JavaScript 设计模式与开发实践》读书笔记][33] + - [《啊哈！算法》速读笔记][34] + - [《Web API 的设计与开发》读书笔记][35] ## 关于本博客 @@ -87,86 +88,87 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][35]> or <[segmentfault 刘健超_Jc][36]> - - [Flex 学习][37] - - [《CSS 揭秘》读书笔记][38] - - [《JavaScript模式》读书笔记][39] - - [white-space:nowrap 的妙用][40] - - [《图解HTTP》读书笔记][41] - - [jQuery 的 attr 与 prop 的区别][42] - - [关于 Glob(gulp) 的学习][43] - - [《JavaScript（ES5）的面向对象精要》读书笔记][44] - - [关于JavaScript单线程的一些事][45] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][46] - - [实现类似 QQ音乐网页版 的单页面总结][47] +更多原创文章，可关注 <[博客园 刘健超-J.c][36]> or <[segmentfault 刘健超_Jc][37]> + - [Flex 学习][38] + - [《CSS 揭秘》读书笔记][39] + - [《JavaScript模式》读书笔记][40] + - [white-space:nowrap 的妙用][41] + - [《图解HTTP》读书笔记][42] + - [jQuery 的 attr 与 prop 的区别][43] + - [关于 Glob(gulp) 的学习][44] + - [《JavaScript（ES5）的面向对象精要》读书笔记][45] + - [关于JavaScript单线程的一些事][46] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][47] + - [实现类似 QQ音乐网页版 的单页面总结][48] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][48]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][49]。 - - [JavaScript 模块【Part 1】：初学者指南][49] - - [JavaScript 模块【Part 2】：模块打包][50] - - [用Mocha和Chai对JavaScript进行单元测试][51] - - [7 个基本的 JS 函数][52] - - [Web应用上线之前，每个程序员应该了解的技术细节][53] - - [其实闭包并不高深莫测][54] - - [如何成为一个JavaScript 大牛？][55] - - [脱离jQuery，使用原生Ajax][56] + - [JavaScript 模块【Part 1】：初学者指南][50] + - [JavaScript 模块【Part 2】：模块打包][51] + - [用Mocha和Chai对JavaScript进行单元测试][52] + - [7 个基本的 JS 函数][53] + - [Web应用上线之前，每个程序员应该了解的技术细节][54] + - [其实闭包并不高深莫测][55] + - [如何成为一个JavaScript 大牛？][56] + - [脱离jQuery，使用原生Ajax][57] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 - [3]: https://github.com/JChehe/blog/issues/14 - [4]: https://github.com/JChehe/blog/issues/8 - [5]: https://github.com/JChehe/blog/issues/33 - [6]: https://github.com/JChehe/blog/issues/29 - [7]: https://github.com/JChehe/blog/issues/28 - [8]: https://github.com/JChehe/blog/issues/27 - [9]: https://github.com/JChehe/blog/issues/18 - [10]: https://github.com/JChehe/blog/issues/15 - [11]: https://github.com/JChehe/blog/issues/11 - [12]: https://github.com/JChehe/blog/issues/2 - [13]: https://github.com/JChehe/blog/issues/13 - [14]: https://github.com/JChehe/blog/issues/12 - [15]: https://github.com/JChehe/blog/issues/9 - [16]: https://github.com/JChehe/blog/issues/3 - [17]: https://github.com/JChehe/blog/issues/20 - [18]: https://github.com/JChehe/blog/issues/19 - [19]: https://github.com/JChehe/blog/issues/34 - [20]: https://github.com/JChehe/blog/issues/17 - [21]: https://github.com/JChehe/blog/issues/16 - [22]: https://github.com/JChehe/blog/issues/6 - [23]: https://github.com/JChehe/blog/issues/5 - [24]: https://github.com/JChehe/blog/issues/31 - [25]: https://github.com/JChehe/blog/issues/30 - [26]: https://github.com/JChehe/blog/issues/26 - [27]: https://github.com/JChehe/blog/issues/25 - [28]: https://github.com/JChehe/blog/issues/24 - [29]: https://github.com/JChehe/blog/issues/23 - [30]: https://github.com/JChehe/blog/issues/22 - [31]: https://github.com/JChehe/blog/issues/21 - [32]: https://github.com/JChehe/blog/issues/35 - [33]: https://github.com/JChehe/blog/issues/32 - [34]: https://github.com/JChehe/blog/issues/10 - [35]: http://www.cnblogs.com/Jccc/ - [36]: https://segmentfault.com/u/jc - [37]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [38]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [40]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [41]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [42]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [43]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [44]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [45]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [47]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [48]: http://www.jobbole.com/members/q574805242/ - [49]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [50]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [51]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [3]: https://github.com/JChehe/blog/issues/36 + [4]: https://github.com/JChehe/blog/issues/14 + [5]: https://github.com/JChehe/blog/issues/8 + [6]: https://github.com/JChehe/blog/issues/33 + [7]: https://github.com/JChehe/blog/issues/29 + [8]: https://github.com/JChehe/blog/issues/28 + [9]: https://github.com/JChehe/blog/issues/27 + [10]: https://github.com/JChehe/blog/issues/18 + [11]: https://github.com/JChehe/blog/issues/15 + [12]: https://github.com/JChehe/blog/issues/11 + [13]: https://github.com/JChehe/blog/issues/2 + [14]: https://github.com/JChehe/blog/issues/13 + [15]: https://github.com/JChehe/blog/issues/12 + [16]: https://github.com/JChehe/blog/issues/9 + [17]: https://github.com/JChehe/blog/issues/3 + [18]: https://github.com/JChehe/blog/issues/20 + [19]: https://github.com/JChehe/blog/issues/19 + [20]: https://github.com/JChehe/blog/issues/34 + [21]: https://github.com/JChehe/blog/issues/17 + [22]: https://github.com/JChehe/blog/issues/16 + [23]: https://github.com/JChehe/blog/issues/6 + [24]: https://github.com/JChehe/blog/issues/5 + [25]: https://github.com/JChehe/blog/issues/31 + [26]: https://github.com/JChehe/blog/issues/30 + [27]: https://github.com/JChehe/blog/issues/26 + [28]: https://github.com/JChehe/blog/issues/25 + [29]: https://github.com/JChehe/blog/issues/24 + [30]: https://github.com/JChehe/blog/issues/23 + [31]: https://github.com/JChehe/blog/issues/22 + [32]: https://github.com/JChehe/blog/issues/21 + [33]: https://github.com/JChehe/blog/issues/35 + [34]: https://github.com/JChehe/blog/issues/32 + [35]: https://github.com/JChehe/blog/issues/10 + [36]: http://www.cnblogs.com/Jccc/ + [37]: https://segmentfault.com/u/jc + [38]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [41]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [43]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [47]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [48]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [49]: http://www.jobbole.com/members/q574805242/ + [50]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [51]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md [52]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [53]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [54]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [55]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [56]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [53]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [54]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [55]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [56]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [57]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From c58dd49fde69766ff0f47797b9ac4ba818e6e141 Mon Sep 17 00:00:00 2001 From: chinazhonghao <1825547767@qq.com> Date: Thu, 18 Apr 2019 11:00:58 +0800 Subject: [PATCH 26/36] =?UTF-8?q?#fixed=20jQuery=20attr=20VS=20props?= =?UTF-8?q?=E4=B8=AD=E7=89=88=E6=9C=AC=E9=97=AE=E9=A2=98=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E7=BB=93=E6=9E=9C=E4=B8=8D=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...r \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" index a8b8607..463c93b 100644 --- "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" +++ "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" @@ -69,7 +69,7 @@ attributes 与 properties 之间的差异在特定情况下会变得尤为重要 | $(elem).prop("checked") | true (Boolean) | 会随着 checkbox 状态作出相应改变 | | elem.getAttribute("checked") | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 | | $(elem).attr("checked") (1.6) | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 | -| $(elem).attr("checked") (1.6.1+) | "checked" (String) | ~~会随着 checkbox 状态而作出相应改变~~（与jQuery文档描述不一样，我用jQuery 1.12.1 测试，都是返回 “checked”，并不会随着checkbox的改变而改变）。 | +| $(elem).attr("checked") (1.6.1+) | "checked" (String) | ~~会随着 checkbox 状态而作出相应改变（与jQuery文档描述不一样，我用jQuery 1.12.1 测试，都是返回 “checked”，并不会随着checkbox的改变而改变）。~~(此处会随着版本的不同而有所不同，[1.7.1版本，```document.getElementById("check").getAttribute("checked")```不会随着checkbox的改变而改变；```$("#check").attr("checked")```会随着checkbox的改变而改变])| | $(elem).attr("checked") (1.6之前版本) | true (Boolean) | true (Boolean) 会随着 checkbox 状态作出相应改变。 | 根据 W3C forms（表单） 规范，`checked` 是一个值为 boolean 的 attribute，这意味着当该 attribute 存在（无论值是什么），其对应的 property 都是 true。例如，该 attribute 没赋值或设为空字符串，甚至设为 `"false"`。这同样适用于所有值为 boolean 的 attributes。 From 9f424ffee5afd2d0b03c3682591012ecc00d4210 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Sat, 27 Apr 2019 13:06:40 +0800 Subject: [PATCH 27/36] =?UTF-8?q?Update=20jQuery=20=E7=9A=84=20attr=20?= =?UTF-8?q?=E4=B8=8E=20prop=20=E7=9A=84=E5=8C=BA=E5=88=AB.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\344\270\216 prop \347\232\204\345\214\272\345\210\253.md" | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" index 463c93b..fa95fa1 100644 --- "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" +++ "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" @@ -68,9 +68,7 @@ attributes 与 properties 之间的差异在特定情况下会变得尤为重要 | elem.checked | true (Boolean) | 会随着 checkbox 状态作出相应改变 | | $(elem).prop("checked") | true (Boolean) | 会随着 checkbox 状态作出相应改变 | | elem.getAttribute("checked") | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 | -| $(elem).attr("checked") (1.6) | "checked" (String) | checkbox 的初始状态；并且不会随着 checkbox 的状态而改变。 | -| $(elem).attr("checked") (1.6.1+) | "checked" (String) | ~~会随着 checkbox 状态而作出相应改变（与jQuery文档描述不一样，我用jQuery 1.12.1 测试，都是返回 “checked”，并不会随着checkbox的改变而改变）。~~(此处会随着版本的不同而有所不同，[1.7.1版本，```document.getElementById("check").getAttribute("checked")```不会随着checkbox的改变而改变；```$("#check").attr("checked")```会随着checkbox的改变而改变])| -| $(elem).attr("checked") (1.6之前版本) | true (Boolean) | true (Boolean) 会随着 checkbox 状态作出相应改变。 | +| $(elem).attr("checked") | "checked" (String) | （与jQuery文档描述不一样，1.9.0 及之后的版本，都是返回 “checked”，并不会随着 checkbox 的改变而改变），即 1.9.0 之前的版本会随着 checkbox 的改变而改变。| 根据 W3C forms（表单） 规范，`checked` 是一个值为 boolean 的 attribute，这意味着当该 attribute 存在（无论值是什么），其对应的 property 都是 true。例如，该 attribute 没赋值或设为空字符串，甚至设为 `"false"`。这同样适用于所有值为 boolean 的 attributes。 From a1d42cfee94720f14a5565e4c8a4dc59c6c6b120 Mon Sep 17 00:00:00 2001 From: LuoHao Date: Tue, 10 Sep 2019 09:40:26 +0800 Subject: [PATCH 28/36] =?UTF-8?q?Update=20=E3=80=8AJavaScript=E9=9D=A2?= =?UTF-8?q?=E5=90=91=E5=AF=B9=E8=B1=A1=E7=B2=BE=E8=A6=81=E3=80=8B=E8=AF=BB?= =?UTF-8?q?=E4=B9=A6=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 53b80e9..915890c 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -462,7 +462,7 @@ var person = { } console.log("name" in person); // true -console.log(person.hasOwnpropert("name")); // true +console.log(person.hasOwnproperty("name")); // true console.log("toString" in person); // true console.log(person.hasOwnproperty("toString")); // false From b8160adf42a77bc286bae977773f9a748fd7ca66 Mon Sep 17 00:00:00 2001 From: LuoHao Date: Tue, 10 Sep 2019 09:53:53 +0800 Subject: [PATCH 29/36] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20hasOwnproperty=20?= =?UTF-8?q?=E4=B8=BA=20hasOwnProperty?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...00\213\350\257\273\344\271\246\347\254\224\350\256\260.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" index 915890c..b5b2270 100644 --- "a/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" +++ "b/posts/\343\200\212JavaScript\351\235\242\345\220\221\345\257\271\350\261\241\347\262\276\350\246\201\343\200\213\350\257\273\344\271\246\347\254\224\350\256\260.md" @@ -462,10 +462,10 @@ var person = { } console.log("name" in person); // true -console.log(person.hasOwnproperty("name")); // true +console.log(person.hasOwnProperty("name")); // true console.log("toString" in person); // true -console.log(person.hasOwnproperty("toString")); // false +console.log(person.hasOwnProperty("toString")); // false ``` ### 3.3 删除属性 From 5f5115883f1afa15606bbe6f378a23b698321507 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Thu, 24 Oct 2019 23:37:19 +0800 Subject: [PATCH 30/36] =?UTF-8?q?fix:=20README=20=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit readme 的《用Mocha和Chai对JavaScript进行单元测试》链接错误 #43 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cc2c642..fadab12 100644 --- a/README.md +++ b/README.md @@ -166,7 +166,7 @@ [49]: http://www.jobbole.com/members/q574805242/ [50]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md [51]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [52]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [52]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md [53]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md [54]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md [55]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md From 24120cacbe759e6b7568abf8012253ae4b5ca714 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Fri, 20 Dec 2019 12:27:44 +0800 Subject: [PATCH 31/36] Update README.md --- README.md | 226 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 119 insertions(+), 107 deletions(-) diff --git a/README.md b/README.md index fadab12..f18b021 100644 --- a/README.md +++ b/README.md @@ -7,56 +7,62 @@ ### 归纳分享 - - [Three.js 现学现卖][4] - - [“等一下，我碰！”——常见的2D碰撞检测][5] + - [《Pro Git 2》思维导图][4] + - [Three.js 现学现卖][5] + - [“等一下，我碰！”——常见的2D碰撞检测][6] ### 动效动画 - - [曲线（路径）运动的那些事][6] - - [正态分布 — 更真实地还原动画][7] - - [【译】叶子——可互动的 Web 玩具][8] - - [【译】使用 CSS 分层动画实现曲线运动][9] - - [动画：从 AE 到 Web][10] - - [【译】隧道动画][11] - - [【译】探索基于 WebGL 的动画与交互（案例学习）][12] - - [CSS 3D Panorama - 淘宝造物节技术剖析][13] + - [【译】基于 Three.js 实现了交互式 3D 人物][7] + - [【译】基于 Three.js 实现 3D 模型换肤][8] + - [曲线（路径）运动的那些事][9] + - [正态分布 — 更真实地还原动画][10] + - [【译】叶子——可互动的 Web 玩具][11] + - [【译】使用 CSS 分层动画实现曲线运动][12] + - [动画：从 AE 到 Web][13] + - [【译】隧道动画][14] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][15] + - [CSS 3D Panorama - 淘宝造物节技术剖析][16] ### Web 小试验 - - [这里有你对 Web 游戏的疑问吗？][14] - - [用 Web 技术实现移动监测][15] - - [实现一个简单但有趣的AR效果（Web）][16] - - [浅谈 WebVR][17] + - [这里有你对 Web 游戏的疑问吗？][17] + - [用 Web 技术实现移动监测][18] + - [实现一个简单但有趣的AR效果（Web）][19] + - [浅谈 WebVR][20] ### 框架 - - [【译】基于 Vue-router 实现用户认证][18] - - [【译】如何更好地组织 React 项目][19] + - [【译】前端开发者们，快带上 Tensorflow.js 拥抱机器学习吧][21] + - [【译】基于 Vue-router 实现用户认证][22] + - [【译】如何更好地组织 React 项目][23] ### API 与 技巧 - - [【译】以案例阐述 Debounce 和 Throttle][20] - - [【译】使用 Fullscreen API 全屏展示内容][21] - - [【译】Grid 完整指南][22] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][23] - - [【译】Electron 的本质][24] + - [try-catch-finally][24] + - [【译】以案例阐述 Debounce 和 Throttle][25] + - [【译】使用 Fullscreen API 全屏展示内容][26] + - [【译】Grid 完整指南][27] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][28] + - [【译】Electron 的本质][29] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][25] - - [【译】催眠方块—Hypnotic Squares][26] - - [【译】圆形填充—Circle Packing][27] - - [【译】一二三—Un Deux Trois][28] - - [【译】三角网格—Triangular mesh][29] - - [【译】无序方块—Cubic Disarray][30] - - [【译】欢乐分队—Joy Division][31] - - [【译】瓷砖线—Tiled Lines][32] + - [【译】皮特·蒙德里安—Piet Mondrian][30] + - [【译】催眠方块—Hypnotic Squares][31] + - [【译】圆形填充—Circle Packing][32] + - [【译】一二三—Un Deux Trois][33] + - [【译】三角网格—Triangular mesh][34] + - [【译】无序方块—Cubic Disarray][35] + - [【译】欢乐分队—Joy Division][36] + - [【译】瓷砖线—Tiled Lines][37] ### 读书笔记 - - [《JavaScript 设计模式与开发实践》读书笔记][33] - - [《啊哈！算法》速读笔记][34] - - [《Web API 的设计与开发》读书笔记][35] + - [《HTML5 + JavaScript 动画基础》读书笔记][38] + - [《JavaScript 设计模式与开发实践》读书笔记][39] + - [《啊哈！算法》速读笔记][40] + - [《Web API 的设计与开发》读书笔记][41] ## 关于本博客 @@ -88,87 +94,93 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][36]> or <[segmentfault 刘健超_Jc][37]> - - [Flex 学习][38] - - [《CSS 揭秘》读书笔记][39] - - [《JavaScript模式》读书笔记][40] - - [white-space:nowrap 的妙用][41] - - [《图解HTTP》读书笔记][42] - - [jQuery 的 attr 与 prop 的区别][43] - - [关于 Glob(gulp) 的学习][44] - - [《JavaScript（ES5）的面向对象精要》读书笔记][45] - - [关于JavaScript单线程的一些事][46] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][47] - - [实现类似 QQ音乐网页版 的单页面总结][48] +更多原创文章，可关注 <[博客园 刘健超-J.c][42]> or <[segmentfault 刘健超_Jc][43]> + - [Flex 学习][44] + - [《CSS 揭秘》读书笔记][45] + - [《JavaScript模式》读书笔记][46] + - [white-space:nowrap 的妙用][47] + - [《图解HTTP》读书笔记][48] + - [jQuery 的 attr 与 prop 的区别][49] + - [关于 Glob(gulp) 的学习][50] + - [《JavaScript（ES5）的面向对象精要》读书笔记][51] + - [关于JavaScript单线程的一些事][52] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][53] + - [实现类似 QQ音乐网页版 的单页面总结][54] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][49]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][55]。 - - [JavaScript 模块【Part 1】：初学者指南][50] - - [JavaScript 模块【Part 2】：模块打包][51] - - [用Mocha和Chai对JavaScript进行单元测试][52] - - [7 个基本的 JS 函数][53] - - [Web应用上线之前，每个程序员应该了解的技术细节][54] - - [其实闭包并不高深莫测][55] - - [如何成为一个JavaScript 大牛？][56] - - [脱离jQuery，使用原生Ajax][57] + - [JavaScript 模块【Part 1】：初学者指南][56] + - [JavaScript 模块【Part 2】：模块打包][57] + - [用Mocha和Chai对JavaScript进行单元测试][58] + - [7 个基本的 JS 函数][59] + - [Web应用上线之前，每个程序员应该了解的技术细节][60] + - [其实闭包并不高深莫测][61] + - [如何成为一个JavaScript 大牛？][62] + - [脱离jQuery，使用原生Ajax][63] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 [3]: https://github.com/JChehe/blog/issues/36 - [4]: https://github.com/JChehe/blog/issues/14 - [5]: https://github.com/JChehe/blog/issues/8 - [6]: https://github.com/JChehe/blog/issues/33 - [7]: https://github.com/JChehe/blog/issues/29 - [8]: https://github.com/JChehe/blog/issues/28 - [9]: https://github.com/JChehe/blog/issues/27 - [10]: https://github.com/JChehe/blog/issues/18 - [11]: https://github.com/JChehe/blog/issues/15 - [12]: https://github.com/JChehe/blog/issues/11 - [13]: https://github.com/JChehe/blog/issues/2 - [14]: https://github.com/JChehe/blog/issues/13 - [15]: https://github.com/JChehe/blog/issues/12 - [16]: https://github.com/JChehe/blog/issues/9 - [17]: https://github.com/JChehe/blog/issues/3 - [18]: https://github.com/JChehe/blog/issues/20 - [19]: https://github.com/JChehe/blog/issues/19 - [20]: https://github.com/JChehe/blog/issues/34 - [21]: https://github.com/JChehe/blog/issues/17 - [22]: https://github.com/JChehe/blog/issues/16 - [23]: https://github.com/JChehe/blog/issues/6 - [24]: https://github.com/JChehe/blog/issues/5 - [25]: https://github.com/JChehe/blog/issues/31 - [26]: https://github.com/JChehe/blog/issues/30 - [27]: https://github.com/JChehe/blog/issues/26 - [28]: https://github.com/JChehe/blog/issues/25 - [29]: https://github.com/JChehe/blog/issues/24 - [30]: https://github.com/JChehe/blog/issues/23 - [31]: https://github.com/JChehe/blog/issues/22 - [32]: https://github.com/JChehe/blog/issues/21 - [33]: https://github.com/JChehe/blog/issues/35 - [34]: https://github.com/JChehe/blog/issues/32 - [35]: https://github.com/JChehe/blog/issues/10 - [36]: http://www.cnblogs.com/Jccc/ - [37]: https://segmentfault.com/u/jc - [38]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [39]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [40]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [41]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [42]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [43]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [44]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [45]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [46]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [47]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [48]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [49]: http://www.jobbole.com/members/q574805242/ - [50]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [51]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [52]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md - [53]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [54]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [55]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [56]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [57]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [4]: https://github.com/JChehe/blog/issues/42 + [5]: https://github.com/JChehe/blog/issues/14 + [6]: https://github.com/JChehe/blog/issues/8 + [7]: https://github.com/JChehe/blog/issues/45 + [8]: https://github.com/JChehe/blog/issues/44 + [9]: https://github.com/JChehe/blog/issues/33 + [10]: https://github.com/JChehe/blog/issues/29 + [11]: https://github.com/JChehe/blog/issues/28 + [12]: https://github.com/JChehe/blog/issues/27 + [13]: https://github.com/JChehe/blog/issues/18 + [14]: https://github.com/JChehe/blog/issues/15 + [15]: https://github.com/JChehe/blog/issues/11 + [16]: https://github.com/JChehe/blog/issues/2 + [17]: https://github.com/JChehe/blog/issues/13 + [18]: https://github.com/JChehe/blog/issues/12 + [19]: https://github.com/JChehe/blog/issues/9 + [20]: https://github.com/JChehe/blog/issues/3 + [21]: https://github.com/JChehe/blog/issues/41 + [22]: https://github.com/JChehe/blog/issues/20 + [23]: https://github.com/JChehe/blog/issues/19 + [24]: https://github.com/JChehe/blog/issues/38 + [25]: https://github.com/JChehe/blog/issues/34 + [26]: https://github.com/JChehe/blog/issues/17 + [27]: https://github.com/JChehe/blog/issues/16 + [28]: https://github.com/JChehe/blog/issues/6 + [29]: https://github.com/JChehe/blog/issues/5 + [30]: https://github.com/JChehe/blog/issues/31 + [31]: https://github.com/JChehe/blog/issues/30 + [32]: https://github.com/JChehe/blog/issues/26 + [33]: https://github.com/JChehe/blog/issues/25 + [34]: https://github.com/JChehe/blog/issues/24 + [35]: https://github.com/JChehe/blog/issues/23 + [36]: https://github.com/JChehe/blog/issues/22 + [37]: https://github.com/JChehe/blog/issues/21 + [38]: https://github.com/JChehe/blog/issues/40 + [39]: https://github.com/JChehe/blog/issues/35 + [40]: https://github.com/JChehe/blog/issues/32 + [41]: https://github.com/JChehe/blog/issues/10 + [42]: http://www.cnblogs.com/Jccc/ + [43]: https://segmentfault.com/u/jc + [44]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [46]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [47]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [48]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [49]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [50]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [52]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [53]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [54]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [55]: http://www.jobbole.com/members/q574805242/ + [56]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [57]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [58]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md + [59]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [60]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [61]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [62]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [63]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From b9b5fa1917b7bc3e9f9d5434185fb8c1c014e13e Mon Sep 17 00:00:00 2001 From: chang-shuai Date: Fri, 10 Jan 2020 10:39:13 +0800 Subject: [PATCH 32/36] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=95=E8=AF=8D?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=8B=BC=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...r \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" index fa95fa1..98cc8e5 100644 --- "a/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" +++ "b/posts/jQuery \347\232\204 attr \344\270\216 prop \347\232\204\345\214\272\345\210\253.md" @@ -19,7 +19,7 @@ 拥有两个 attributes。 -一旦浏览器解析该代码，HTMLInputElement 对象就会被创建，并且该对象会拥有很多 peoperties，如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、ChildNodes、children、classList、className、clientHeight 等等。 +一旦浏览器解析该代码，HTMLInputElement 对象就会被创建，并且该对象会拥有很多 properties，如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、ChildNodes、children、classList、className、clientHeight 等等。 对于某个 DOM 节点对象，properties 是该对象的所有属性，而 attributes 是该对象对应元素(标签)的属性。 From 92f579573d2e2f96ef4f8d0effd945b69a8c6fb5 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Tue, 15 Dec 2020 14:32:19 +0800 Subject: [PATCH 33/36] Update README.md --- README.md | 250 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 130 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index f18b021..bab97bd 100644 --- a/README.md +++ b/README.md @@ -7,62 +7,69 @@ ### 归纳分享 - - [《Pro Git 2》思维导图][4] - - [Three.js 现学现卖][5] - - [“等一下，我碰！”——常见的2D碰撞检测][6] + - [看懂「测试覆盖率报告」][4] + - [《Pro Git 2》思维导图][5] + - [try-catch-finally][6] + - [Three.js 现学现卖][7] + - [“等一下，我碰！”——常见的2D碰撞检测][8] + ### 动效动画 - - [【译】基于 Three.js 实现了交互式 3D 人物][7] - - [【译】基于 Three.js 实现 3D 模型换肤][8] - - [曲线（路径）运动的那些事][9] - - [正态分布 — 更真实地还原动画][10] - - [【译】叶子——可互动的 Web 玩具][11] - - [【译】使用 CSS 分层动画实现曲线运动][12] - - [动画：从 AE 到 Web][13] - - [【译】隧道动画][14] - - [【译】探索基于 WebGL 的动画与交互（案例学习）][15] - - [CSS 3D Panorama - 淘宝造物节技术剖析][16] + - [【译】基于 Three.js 实现了交互式 3D 人物][9] + - [【译】基于 Three.js 实现 3D 模型换肤][10] + - [曲线（路径）运动的那些事][11] + - [正态分布 — 更真实地还原动画][12] + - [【译】叶子——可互动的 Web 玩具][13] + - [【译】使用 CSS 分层动画实现曲线运动][14] + - [动画：从 AE 到 Web][15] + - [【译】隧道动画][16] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][17] + - [CSS 3D Panorama - 淘宝造物节技术剖析][18] ### Web 小试验 - - [这里有你对 Web 游戏的疑问吗？][17] - - [用 Web 技术实现移动监测][18] - - [实现一个简单但有趣的AR效果（Web）][19] - - [浅谈 WebVR][20] + - [这里有你对 Web 游戏的疑问吗？][19] + - [用 Web 技术实现移动监测][20] + - [实现一个简单但有趣的AR效果（Web）][21] + - [浅谈 WebVR][22] ### 框架 - - [【译】前端开发者们，快带上 Tensorflow.js 拥抱机器学习吧][21] - - [【译】基于 Vue-router 实现用户认证][22] - - [【译】如何更好地组织 React 项目][23] + - [【译】前端开发者们，快带上 Tensorflow.js 拥抱机器学习吧][23] + - [【译】基于 Vue-router 实现用户认证][24] + - [【译】如何更好地组织 React 项目][25] + +### API 与技巧 + + - [【译】以案例阐述 Debounce 和 Throttle][26] + - [【译】使用 Fullscreen API 全屏展示内容][27] + - [【译】Grid 完整指南][28] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][29] + - [【译】Electron 的本质][30] -### API 与 技巧 +### 数据库 - - [try-catch-finally][24] - - [【译】以案例阐述 Debounce 和 Throttle][25] - - [【译】使用 Fullscreen API 全屏展示内容][26] - - [【译】Grid 完整指南][27] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][28] - - [【译】Electron 的本质][29] + - [Redis 知识积累][31] + - [【译】MySQL 数据类型【8.0 中文版】][32] ### Generative Artistry - - [【译】皮特·蒙德里安—Piet Mondrian][30] - - [【译】催眠方块—Hypnotic Squares][31] - - [【译】圆形填充—Circle Packing][32] - - [【译】一二三—Un Deux Trois][33] - - [【译】三角网格—Triangular mesh][34] - - [【译】无序方块—Cubic Disarray][35] - - [【译】欢乐分队—Joy Division][36] - - [【译】瓷砖线—Tiled Lines][37] + - [【译】皮特·蒙德里安—Piet Mondrian][33] + - [【译】催眠方块—Hypnotic Squares][34] + - [【译】圆形填充—Circle Packing][35] + - [【译】一二三—Un Deux Trois][36] + - [【译】三角网格—Triangular mesh][37] + - [【译】无序方块—Cubic Disarray][38] + - [【译】欢乐分队—Joy Division][39] + - [【译】瓷砖线—Tiled Lines][40] ### 读书笔记 - - [《HTML5 + JavaScript 动画基础》读书笔记][38] - - [《JavaScript 设计模式与开发实践》读书笔记][39] - - [《啊哈！算法》速读笔记][40] - - [《Web API 的设计与开发》读书笔记][41] + - [《HTML5 + JavaScript 动画基础》读书笔记][41] + - [《JavaScript 设计模式与开发实践》读书笔记][42] + - [《啊哈！算法》速读笔记][43] + - [《Web API 的设计与开发》读书笔记][44] ## 关于本博客 @@ -94,93 +101,96 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][42]> or <[segmentfault 刘健超_Jc][43]> - - [Flex 学习][44] - - [《CSS 揭秘》读书笔记][45] - - [《JavaScript模式》读书笔记][46] - - [white-space:nowrap 的妙用][47] - - [《图解HTTP》读书笔记][48] - - [jQuery 的 attr 与 prop 的区别][49] - - [关于 Glob(gulp) 的学习][50] - - [《JavaScript（ES5）的面向对象精要》读书笔记][51] - - [关于JavaScript单线程的一些事][52] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][53] - - [实现类似 QQ音乐网页版 的单页面总结][54] +更多原创文章，可关注 <[博客园 刘健超-J.c][45]> or <[segmentfault 刘健超_Jc][46]> + - [Flex 学习][47] + - [《CSS 揭秘》读书笔记][48] + - [《JavaScript模式》读书笔记][49] + - [white-space:nowrap 的妙用][50] + - [《图解HTTP》读书笔记][51] + - [jQuery 的 attr 与 prop 的区别][52] + - [关于 Glob(gulp) 的学习][53] + - [《JavaScript（ES5）的面向对象精要》读书笔记][54] + - [关于JavaScript单线程的一些事][55] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][56] + - [实现类似 QQ音乐网页版 的单页面总结][57] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][55]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][58]。 - - [JavaScript 模块【Part 1】：初学者指南][56] - - [JavaScript 模块【Part 2】：模块打包][57] - - [用Mocha和Chai对JavaScript进行单元测试][58] - - [7 个基本的 JS 函数][59] - - [Web应用上线之前，每个程序员应该了解的技术细节][60] - - [其实闭包并不高深莫测][61] - - [如何成为一个JavaScript 大牛？][62] - - [脱离jQuery，使用原生Ajax][63] + - [JavaScript 模块【Part 1】：初学者指南][59] + - [JavaScript 模块【Part 2】：模块打包][60] + - [用Mocha和Chai对JavaScript进行单元测试][61] + - [7 个基本的 JS 函数][62] + - [Web应用上线之前，每个程序员应该了解的技术细节][63] + - [其实闭包并不高深莫测][64] + - [如何成为一个JavaScript 大牛？][65] + - [脱离jQuery，使用原生Ajax][66] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 [3]: https://github.com/JChehe/blog/issues/36 - [4]: https://github.com/JChehe/blog/issues/42 - [5]: https://github.com/JChehe/blog/issues/14 - [6]: https://github.com/JChehe/blog/issues/8 - [7]: https://github.com/JChehe/blog/issues/45 - [8]: https://github.com/JChehe/blog/issues/44 - [9]: https://github.com/JChehe/blog/issues/33 - [10]: https://github.com/JChehe/blog/issues/29 - [11]: https://github.com/JChehe/blog/issues/28 - [12]: https://github.com/JChehe/blog/issues/27 - [13]: https://github.com/JChehe/blog/issues/18 - [14]: https://github.com/JChehe/blog/issues/15 - [15]: https://github.com/JChehe/blog/issues/11 - [16]: https://github.com/JChehe/blog/issues/2 - [17]: https://github.com/JChehe/blog/issues/13 - [18]: https://github.com/JChehe/blog/issues/12 - [19]: https://github.com/JChehe/blog/issues/9 - [20]: https://github.com/JChehe/blog/issues/3 - [21]: https://github.com/JChehe/blog/issues/41 - [22]: https://github.com/JChehe/blog/issues/20 - [23]: https://github.com/JChehe/blog/issues/19 - [24]: https://github.com/JChehe/blog/issues/38 - [25]: https://github.com/JChehe/blog/issues/34 - [26]: https://github.com/JChehe/blog/issues/17 - [27]: https://github.com/JChehe/blog/issues/16 - [28]: https://github.com/JChehe/blog/issues/6 - [29]: https://github.com/JChehe/blog/issues/5 - [30]: https://github.com/JChehe/blog/issues/31 - [31]: https://github.com/JChehe/blog/issues/30 - [32]: https://github.com/JChehe/blog/issues/26 - [33]: https://github.com/JChehe/blog/issues/25 - [34]: https://github.com/JChehe/blog/issues/24 - [35]: https://github.com/JChehe/blog/issues/23 - [36]: https://github.com/JChehe/blog/issues/22 - [37]: https://github.com/JChehe/blog/issues/21 - [38]: https://github.com/JChehe/blog/issues/40 - [39]: https://github.com/JChehe/blog/issues/35 - [40]: https://github.com/JChehe/blog/issues/32 - [41]: https://github.com/JChehe/blog/issues/10 - [42]: http://www.cnblogs.com/Jccc/ - [43]: https://segmentfault.com/u/jc - [44]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [45]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [46]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [47]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [48]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [49]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [50]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [52]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [53]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [54]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [55]: http://www.jobbole.com/members/q574805242/ - [56]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [57]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [58]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md - [59]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [60]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [61]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [62]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [63]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [4]: https://github.com/JChehe/blog/issues/49 + [5]: https://github.com/JChehe/blog/issues/42 + [6]: https://github.com/JChehe/blog/issues/38 + [7]: https://github.com/JChehe/blog/issues/14 + [8]: https://github.com/JChehe/blog/issues/8 + [9]: https://github.com/JChehe/blog/issues/45 + [10]: https://github.com/JChehe/blog/issues/44 + [11]: https://github.com/JChehe/blog/issues/33 + [12]: https://github.com/JChehe/blog/issues/29 + [13]: https://github.com/JChehe/blog/issues/28 + [14]: https://github.com/JChehe/blog/issues/27 + [15]: https://github.com/JChehe/blog/issues/18 + [16]: https://github.com/JChehe/blog/issues/15 + [17]: https://github.com/JChehe/blog/issues/11 + [18]: https://github.com/JChehe/blog/issues/2 + [19]: https://github.com/JChehe/blog/issues/13 + [20]: https://github.com/JChehe/blog/issues/12 + [21]: https://github.com/JChehe/blog/issues/9 + [22]: https://github.com/JChehe/blog/issues/3 + [23]: https://github.com/JChehe/blog/issues/41 + [24]: https://github.com/JChehe/blog/issues/20 + [25]: https://github.com/JChehe/blog/issues/19 + [26]: https://github.com/JChehe/blog/issues/34 + [27]: https://github.com/JChehe/blog/issues/17 + [28]: https://github.com/JChehe/blog/issues/16 + [29]: https://github.com/JChehe/blog/issues/6 + [30]: https://github.com/JChehe/blog/issues/5 + [31]: https://github.com/JChehe/blog/issues/48 + [32]: https://github.com/JChehe/blog/issues/47 + [33]: https://github.com/JChehe/blog/issues/31 + [34]: https://github.com/JChehe/blog/issues/30 + [35]: https://github.com/JChehe/blog/issues/26 + [36]: https://github.com/JChehe/blog/issues/25 + [37]: https://github.com/JChehe/blog/issues/24 + [38]: https://github.com/JChehe/blog/issues/23 + [39]: https://github.com/JChehe/blog/issues/22 + [40]: https://github.com/JChehe/blog/issues/21 + [41]: https://github.com/JChehe/blog/issues/40 + [42]: https://github.com/JChehe/blog/issues/35 + [43]: https://github.com/JChehe/blog/issues/32 + [44]: https://github.com/JChehe/blog/issues/10 + [45]: http://www.cnblogs.com/Jccc/ + [46]: https://segmentfault.com/u/jc + [47]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [48]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [49]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [50]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [52]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [53]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [54]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [55]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [56]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [57]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [58]: http://www.jobbole.com/members/q574805242/ + [59]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [60]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [61]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md + [62]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [63]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [64]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [65]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [66]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From 9babb3ec7ca08a6b5dba18eed72f664639616567 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Mon, 13 Sep 2021 19:55:33 +0800 Subject: [PATCH 34/36] Update README.md --- README.md | 303 +++++++++++++++++++++++++----------------------------- 1 file changed, 139 insertions(+), 164 deletions(-) diff --git a/README.md b/README.md index bab97bd..fcc1e76 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,64 @@ +一切以官方文档为准！ -### 项目总结 +### 前端 - [XCel 项目总结 - Electron 与 Vue 的性能优化][1] - [我的第一次移动端页面制作 — 总结与思考][2] - [我的第一次小程序制作 — 总结与思考][3] + - [try-catch-finally][4] + - [【译】前端开发者们，快带上 Tensorflow.js 拥抱机器学习吧][5] + - [【译】基于 Vue-router 实现用户认证][6] + - [【译】如何更好地组织 React 项目][7] + - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][8] + - [【译】Electron 的本质][9] + - [【译】以案例阐述 Debounce 和 Throttle][10] + - [【译】使用 Fullscreen API 全屏展示内容][11] + - [【译】Grid 完整指南][12] -### 归纳分享 - - [看懂「测试覆盖率报告」][4] - - [《Pro Git 2》思维导图][5] - - [try-catch-finally][6] - - [Three.js 现学现卖][7] - - [“等一下，我碰！”——常见的2D碰撞检测][8] +### 后端 + - [Redis 知识积累][13] + - [《深入浅出 Node.js》读书笔记][14] + - [《Nginx 高性能 Web 服务器详解》读书笔记][15] + - [《Web API 的设计与开发》读书笔记][16] + - [【译】MySQL 数据类型【8.0 中文版】][17] ### 动效动画 - - [【译】基于 Three.js 实现了交互式 3D 人物][9] - - [【译】基于 Three.js 实现 3D 模型换肤][10] - - [曲线（路径）运动的那些事][11] - - [正态分布 — 更真实地还原动画][12] - - [【译】叶子——可互动的 Web 玩具][13] - - [【译】使用 CSS 分层动画实现曲线运动][14] - - [动画：从 AE 到 Web][15] - - [【译】隧道动画][16] - - [【译】探索基于 WebGL 的动画与交互（案例学习）][17] - - [CSS 3D Panorama - 淘宝造物节技术剖析][18] - -### Web 小试验 - - - [这里有你对 Web 游戏的疑问吗？][19] - - [用 Web 技术实现移动监测][20] - - [实现一个简单但有趣的AR效果（Web）][21] - - [浅谈 WebVR][22] - -### 框架 - - - [【译】前端开发者们，快带上 Tensorflow.js 拥抱机器学习吧][23] - - [【译】基于 Vue-router 实现用户认证][24] - - [【译】如何更好地组织 React 项目][25] - -### API 与技巧 - - - [【译】以案例阐述 Debounce 和 Throttle][26] - - [【译】使用 Fullscreen API 全屏展示内容][27] - - [【译】Grid 完整指南][28] - - [【译】Electron 自动更新的完整教程（Windows 和 OSX）][29] - - [【译】Electron 的本质][30] - -### 数据库 - - - [Redis 知识积累][31] - - [【译】MySQL 数据类型【8.0 中文版】][32] - -### Generative Artistry - - - [【译】皮特·蒙德里安—Piet Mondrian][33] - - [【译】催眠方块—Hypnotic Squares][34] - - [【译】圆形填充—Circle Packing][35] - - [【译】一二三—Un Deux Trois][36] - - [【译】三角网格—Triangular mesh][37] - - [【译】无序方块—Cubic Disarray][38] - - [【译】欢乐分队—Joy Division][39] - - [【译】瓷砖线—Tiled Lines][40] - -### 读书笔记 - - - [《HTML5 + JavaScript 动画基础》读书笔记][41] - - [《JavaScript 设计模式与开发实践》读书笔记][42] - - [《啊哈！算法》速读笔记][43] - - [《Web API 的设计与开发》读书笔记][44] - -## 关于本博客 - -之前在伯乐在线翻译了 28 篇文章，择取部分存在该博客中。另外，平时也偶尔写一些技术文章。 - -要说翻译的好处，主要有三点： - -1. 锻炼英语阅读能力。 -2. 伯乐在线对译文的格式和内容要求严格，有利于形成良好的写作习惯。 -3. 伯乐在线每月前 5 名有赠书名额（之前的奖励）。 - -要说自己写技术文章的好处，主要有 2 点： - - 1. 记录和总结，方便自己回顾的同时，为社区做出微薄贡献。 - 2. ... - -两者的共同好处：为自己和读者负责，尽可能保证内容的正确性。在这过程中，需要不断搜索资料和验证，提升能力。 - + - [《HTML5 + JavaScript 动画基础》读书笔记][18] + - [“等一下，我碰！”——常见的2D碰撞检测][19] + - [曲线（路径）运动的那些事][20] + - [正态分布 — 更真实地还原动画][21] + - [动画：从 AE 到 Web][22] + - [Three.js 现学现卖][23] + - [CSS 3D Panorama - 淘宝造物节技术剖析][24] + - [这里有你对 Web 游戏的疑问吗？][25] + - [用 Web 技术实现移动监测][26] + - [实现一个简单但有趣的AR效果（Web）][27] + - [浅谈 WebVR][28] + - [【译】使用 CSS 分层动画实现曲线运动][29] + - [【译】探索基于 WebGL 的动画与交互（案例学习）][30] + - [【译】基于 Three.js 实现了交互式 3D 人物][31] + - [【译】基于 Three.js 实现 3D 模型换肤][32] + - [【译】隧道动画][33] + - [【译】叶子——可互动的 Web 玩具][34] + - [【译】皮特·蒙德里安—Piet Mondrian][35] + - [【译】催眠方块—Hypnotic Squares][36] + - [【译】圆形填充—Circle Packing][37] + - [【译】一二三—Un Deux Trois][38] + - [【译】三角网格—Triangular mesh][39] + - [【译】无序方块—Cubic Disarray][40] + - [【译】欢乐分队—Joy Division][41] + - [【译】瓷砖线—Tiled Lines][42] + + +### 其他 + + - [《JavaScript 设计模式与开发实践》读书笔记][43] + - [看懂「测试覆盖率报告」][44] + - [《Pro Git 2》思维导图][45] + - [《啊哈！算法》速读笔记][46] ## 关于版权 @@ -97,100 +68,104 @@ ## 之前的记录 -健超的 Blog，主要是原创文章和翻译技术文章。 +主要是原创文章和翻译技术文章。 ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][45]> or <[segmentfault 刘健超_Jc][46]> - - [Flex 学习][47] - - [《CSS 揭秘》读书笔记][48] - - [《JavaScript模式》读书笔记][49] - - [white-space:nowrap 的妙用][50] - - [《图解HTTP》读书笔记][51] - - [jQuery 的 attr 与 prop 的区别][52] - - [关于 Glob(gulp) 的学习][53] - - [《JavaScript（ES5）的面向对象精要》读书笔记][54] - - [关于JavaScript单线程的一些事][55] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][56] - - [实现类似 QQ音乐网页版 的单页面总结][57] +更多原创文章，可关注 <[博客园 刘健超-J.c][47]> or <[segmentfault 刘健超_Jc][48]> + - [Flex 学习][49] + - [《CSS 揭秘》读书笔记][50] + - [《JavaScript模式》读书笔记][51] + - [white-space:nowrap 的妙用][52] + - [《图解HTTP》读书笔记][53] + - [jQuery 的 attr 与 prop 的区别][54] + - [关于 Glob(gulp) 的学习][55] + - [《JavaScript（ES5）的面向对象精要》读书笔记][56] + - [关于JavaScript单线程的一些事][57] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][58] + - [实现类似 QQ音乐网页版 的单页面总结][59] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][58]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][60]。 + +> 注：之前在伯乐在线翻译了 28 篇文章，但目前伯乐在线已不运营。 - - [JavaScript 模块【Part 1】：初学者指南][59] - - [JavaScript 模块【Part 2】：模块打包][60] - - [用Mocha和Chai对JavaScript进行单元测试][61] - - [7 个基本的 JS 函数][62] - - [Web应用上线之前，每个程序员应该了解的技术细节][63] - - [其实闭包并不高深莫测][64] - - [如何成为一个JavaScript 大牛？][65] - - [脱离jQuery，使用原生Ajax][66] + - [JavaScript 模块【Part 1】：初学者指南][61] + - [JavaScript 模块【Part 2】：模块打包][62] + - [用Mocha和Chai对JavaScript进行单元测试][63] + - [7 个基本的 JS 函数][64] + - [Web应用上线之前，每个程序员应该了解的技术细节][65] + - [其实闭包并不高深莫测][66] + - [如何成为一个JavaScript 大牛？][67] + - [脱离jQuery，使用原生Ajax][68] [1]: https://github.com/JChehe/blog/issues/7 [2]: https://github.com/JChehe/blog/issues/4 [3]: https://github.com/JChehe/blog/issues/36 - [4]: https://github.com/JChehe/blog/issues/49 - [5]: https://github.com/JChehe/blog/issues/42 - [6]: https://github.com/JChehe/blog/issues/38 - [7]: https://github.com/JChehe/blog/issues/14 - [8]: https://github.com/JChehe/blog/issues/8 - [9]: https://github.com/JChehe/blog/issues/45 - [10]: https://github.com/JChehe/blog/issues/44 - [11]: https://github.com/JChehe/blog/issues/33 - [12]: https://github.com/JChehe/blog/issues/29 - [13]: https://github.com/JChehe/blog/issues/28 - [14]: https://github.com/JChehe/blog/issues/27 - [15]: https://github.com/JChehe/blog/issues/18 - [16]: https://github.com/JChehe/blog/issues/15 - [17]: https://github.com/JChehe/blog/issues/11 - [18]: https://github.com/JChehe/blog/issues/2 - [19]: https://github.com/JChehe/blog/issues/13 - [20]: https://github.com/JChehe/blog/issues/12 - [21]: https://github.com/JChehe/blog/issues/9 - [22]: https://github.com/JChehe/blog/issues/3 - [23]: https://github.com/JChehe/blog/issues/41 - [24]: https://github.com/JChehe/blog/issues/20 - [25]: https://github.com/JChehe/blog/issues/19 - [26]: https://github.com/JChehe/blog/issues/34 - [27]: https://github.com/JChehe/blog/issues/17 - [28]: https://github.com/JChehe/blog/issues/16 - [29]: https://github.com/JChehe/blog/issues/6 - [30]: https://github.com/JChehe/blog/issues/5 - [31]: https://github.com/JChehe/blog/issues/48 - [32]: https://github.com/JChehe/blog/issues/47 - [33]: https://github.com/JChehe/blog/issues/31 - [34]: https://github.com/JChehe/blog/issues/30 - [35]: https://github.com/JChehe/blog/issues/26 - [36]: https://github.com/JChehe/blog/issues/25 - [37]: https://github.com/JChehe/blog/issues/24 - [38]: https://github.com/JChehe/blog/issues/23 - [39]: https://github.com/JChehe/blog/issues/22 - [40]: https://github.com/JChehe/blog/issues/21 - [41]: https://github.com/JChehe/blog/issues/40 - [42]: https://github.com/JChehe/blog/issues/35 - [43]: https://github.com/JChehe/blog/issues/32 - [44]: https://github.com/JChehe/blog/issues/10 - [45]: http://www.cnblogs.com/Jccc/ - [46]: https://segmentfault.com/u/jc - [47]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [48]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [49]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [50]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [52]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [53]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [54]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [55]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [56]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [57]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [58]: http://www.jobbole.com/members/q574805242/ - [59]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [60]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [61]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md - [62]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [63]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [64]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [65]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [66]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [4]: https://github.com/JChehe/blog/issues/38 + [5]: https://github.com/JChehe/blog/issues/41 + [6]: https://github.com/JChehe/blog/issues/20 + [7]: https://github.com/JChehe/blog/issues/19 + [8]: https://github.com/JChehe/blog/issues/6 + [9]: https://github.com/JChehe/blog/issues/5 + [10]: https://github.com/JChehe/blog/issues/34 + [11]: https://github.com/JChehe/blog/issues/17 + [12]: https://github.com/JChehe/blog/issues/16 + [13]: https://github.com/JChehe/blog/issues/48 + [14]: https://github.com/JChehe/blog/issues/51 + [15]: https://github.com/JChehe/blog/issues/50 + [16]: https://github.com/JChehe/blog/issues/10 + [17]: https://github.com/JChehe/blog/issues/47 + [18]: https://github.com/JChehe/blog/issues/40 + [19]: https://github.com/JChehe/blog/issues/8 + [20]: https://github.com/JChehe/blog/issues/33 + [21]: https://github.com/JChehe/blog/issues/29 + [22]: https://github.com/JChehe/blog/issues/18 + [23]: https://github.com/JChehe/blog/issues/14 + [24]: https://github.com/JChehe/blog/issues/2 + [25]: https://github.com/JChehe/blog/issues/13 + [26]: https://github.com/JChehe/blog/issues/12 + [27]: https://github.com/JChehe/blog/issues/9 + [28]: https://github.com/JChehe/blog/issues/3 + [29]: https://github.com/JChehe/blog/issues/27 + [30]: https://github.com/JChehe/blog/issues/11 + [31]: https://github.com/JChehe/blog/issues/45 + [32]: https://github.com/JChehe/blog/issues/44 + [33]: https://github.com/JChehe/blog/issues/15 + [34]: https://github.com/JChehe/blog/issues/28 + [35]: https://github.com/JChehe/blog/issues/31 + [36]: https://github.com/JChehe/blog/issues/30 + [37]: https://github.com/JChehe/blog/issues/26 + [38]: https://github.com/JChehe/blog/issues/25 + [39]: https://github.com/JChehe/blog/issues/24 + [40]: https://github.com/JChehe/blog/issues/23 + [41]: https://github.com/JChehe/blog/issues/22 + [42]: https://github.com/JChehe/blog/issues/21 + [43]: https://github.com/JChehe/blog/issues/35 + [44]: https://github.com/JChehe/blog/issues/49 + [45]: https://github.com/JChehe/blog/issues/42 + [46]: https://github.com/JChehe/blog/issues/32 + [47]: http://www.cnblogs.com/Jccc/ + [48]: https://segmentfault.com/u/jc + [49]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [50]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [52]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [53]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [54]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [55]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [56]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [57]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [58]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [59]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [60]: http://www.jobbole.com/members/q574805242/ + [61]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [62]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [63]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md + [64]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [65]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [66]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [67]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [68]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From de79b504b5aef91faba33a14ff0e994501cfc465 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Mon, 13 Sep 2021 19:58:48 +0800 Subject: [PATCH 35/36] Update README.md --- README.md | 118 +++++++++++++++++++++++------------------------------- 1 file changed, 51 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index fcc1e76..ba3abf0 100644 --- a/README.md +++ b/README.md @@ -43,22 +43,14 @@ - [【译】基于 Three.js 实现 3D 模型换肤][32] - [【译】隧道动画][33] - [【译】叶子——可互动的 Web 玩具][34] - - [【译】皮特·蒙德里安—Piet Mondrian][35] - - [【译】催眠方块—Hypnotic Squares][36] - - [【译】圆形填充—Circle Packing][37] - - [【译】一二三—Un Deux Trois][38] - - [【译】三角网格—Triangular mesh][39] - - [【译】无序方块—Cubic Disarray][40] - - [【译】欢乐分队—Joy Division][41] - - [【译】瓷砖线—Tiled Lines][42] ### 其他 - - [《JavaScript 设计模式与开发实践》读书笔记][43] - - [看懂「测试覆盖率报告」][44] - - [《Pro Git 2》思维导图][45] - - [《啊哈！算法》速读笔记][46] + - [《JavaScript 设计模式与开发实践》读书笔记][35] + - [看懂「测试覆盖率报告」][36] + - [《Pro Git 2》思维导图][37] + - [《啊哈！算法》速读笔记][38] ## 关于版权 @@ -72,33 +64,33 @@ ## 原创文章 -更多原创文章，可关注 <[博客园 刘健超-J.c][47]> or <[segmentfault 刘健超_Jc][48]> - - [Flex 学习][49] - - [《CSS 揭秘》读书笔记][50] - - [《JavaScript模式》读书笔记][51] - - [white-space:nowrap 的妙用][52] - - [《图解HTTP》读书笔记][53] - - [jQuery 的 attr 与 prop 的区别][54] - - [关于 Glob(gulp) 的学习][55] - - [《JavaScript（ES5）的面向对象精要》读书笔记][56] - - [关于JavaScript单线程的一些事][57] - - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][58] - - [实现类似 QQ音乐网页版 的单页面总结][59] +更多原创文章，可关注 <[博客园 刘健超-J.c][39]> or <[segmentfault 刘健超_Jc][40]> + - [Flex 学习][41] + - [《CSS 揭秘》读书笔记][42] + - [《JavaScript模式》读书笔记][43] + - [white-space:nowrap 的妙用][44] + - [《图解HTTP》读书笔记][45] + - [jQuery 的 attr 与 prop 的区别][46] + - [关于 Glob(gulp) 的学习][47] + - [《JavaScript（ES5）的面向对象精要》读书笔记][48] + - [关于JavaScript单线程的一些事][49] + - [再次阅读《精通CSS-高级Web标准解决方案（第二版）》][50] + - [实现类似 QQ音乐网页版 的单页面总结][51] ## 翻译文章 -更多翻译文章，可关注 [伯乐在线 刘健超-J.c][60]。 +更多翻译文章，可关注 [伯乐在线 刘健超-J.c][52]。 > 注：之前在伯乐在线翻译了 28 篇文章，但目前伯乐在线已不运营。 - - [JavaScript 模块【Part 1】：初学者指南][61] - - [JavaScript 模块【Part 2】：模块打包][62] - - [用Mocha和Chai对JavaScript进行单元测试][63] - - [7 个基本的 JS 函数][64] - - [Web应用上线之前，每个程序员应该了解的技术细节][65] - - [其实闭包并不高深莫测][66] - - [如何成为一个JavaScript 大牛？][67] - - [脱离jQuery，使用原生Ajax][68] + - [JavaScript 模块【Part 1】：初学者指南][53] + - [JavaScript 模块【Part 2】：模块打包][54] + - [用Mocha和Chai对JavaScript进行单元测试][55] + - [7 个基本的 JS 函数][56] + - [Web应用上线之前，每个程序员应该了解的技术细节][57] + - [其实闭包并不高深莫测][58] + - [如何成为一个JavaScript 大牛？][59] + - [脱离jQuery，使用原生Ajax][60] [1]: https://github.com/JChehe/blog/issues/7 @@ -135,37 +127,29 @@ [32]: https://github.com/JChehe/blog/issues/44 [33]: https://github.com/JChehe/blog/issues/15 [34]: https://github.com/JChehe/blog/issues/28 - [35]: https://github.com/JChehe/blog/issues/31 - [36]: https://github.com/JChehe/blog/issues/30 - [37]: https://github.com/JChehe/blog/issues/26 - [38]: https://github.com/JChehe/blog/issues/25 - [39]: https://github.com/JChehe/blog/issues/24 - [40]: https://github.com/JChehe/blog/issues/23 - [41]: https://github.com/JChehe/blog/issues/22 - [42]: https://github.com/JChehe/blog/issues/21 - [43]: https://github.com/JChehe/blog/issues/35 - [44]: https://github.com/JChehe/blog/issues/49 - [45]: https://github.com/JChehe/blog/issues/42 - [46]: https://github.com/JChehe/blog/issues/32 - [47]: http://www.cnblogs.com/Jccc/ - [48]: https://segmentfault.com/u/jc - [49]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md - [50]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [51]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [52]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md - [53]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [54]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md - [55]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md - [56]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md - [57]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md - [58]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md - [59]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md - [60]: http://www.jobbole.com/members/q574805242/ - [61]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md - [62]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md - [63]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md - [64]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md - [65]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md - [66]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md - [67]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md - [68]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md + [35]: https://github.com/JChehe/blog/issues/35 + [36]: https://github.com/JChehe/blog/issues/49 + [37]: https://github.com/JChehe/blog/issues/42 + [38]: https://github.com/JChehe/blog/issues/32 + [39]: http://www.cnblogs.com/Jccc/ + [40]: https://segmentfault.com/u/jc + [41]: https://github.com/JChehe/blog/blob/master/posts/Flex%20%E5%AD%A6%E4%B9%A0.md + [42]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8ACSS%20%E6%8F%AD%E7%A7%98%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [43]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E6%A8%A1%E5%BC%8F%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [44]: https://github.com/JChehe/blog/blob/master/posts/white-space:nowrap%E7%9A%84%E5%A6%99%E7%94%A8.md + [45]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [46]: https://github.com/JChehe/blog/blob/master/posts/jQuery%20%E7%9A%84%20attr%20%E4%B8%8E%20prop%20%E7%9A%84%E5%8C%BA%E5%88%AB.md + [47]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8E%20Glob%20%28gulp%29%20%E7%9A%84%E5%AD%A6%E4%B9%A0.md + [48]: https://github.com/JChehe/blog/blob/master/posts/%E3%80%8AJavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0.md + [49]: https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md + [50]: https://github.com/JChehe/blog/blob/master/posts/%E5%86%8D%E6%AC%A1%E9%98%85%E8%AF%BB%E3%80%8A%E7%B2%BE%E9%80%9ACSS-%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%88%E7%AC%AC%E4%BA%8C%E7%89%88%EF%BC%89%E3%80%8B.md + [51]: https://github.com/JChehe/blog/blob/master/posts/%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC%20QQ%E9%9F%B3%E4%B9%90%E7%BD%91%E9%A1%B5%E7%89%88%20%E7%9A%84%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%80%BB%E7%BB%93.md + [52]: http://www.jobbole.com/members/q574805242/ + [53]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%201%E3%80%91%EF%BC%9A%E5%88%9D%E5%AD%A6%E8%80%85%E6%8C%87%E5%8D%97.md + [54]: https://github.com/JChehe/blog/blob/master/translation/JavaScript%20%E6%A8%A1%E5%9D%97%E3%80%90Part%202%E3%80%91%EF%BC%9A%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85.md + [55]: https://github.com/JChehe/blog/blob/master/translation/%E7%94%A8Mocha%E5%92%8CChai%E5%AF%B9JavaScript%E8%BF%9B%E8%A1%8C%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.md + [56]: https://github.com/JChehe/blog/blob/master/translation/7%20%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20JS%20%E5%87%BD%E6%95%B0%5B%E8%AF%91%5D.md + [57]: https://github.com/JChehe/blog/blob/master/translation/Web%E5%BA%94%E7%94%A8%E4%B8%8A%E7%BA%BF%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98%E5%BA%94%E8%AF%A5%E4%BA%86%E8%A7%A3%E7%9A%84%E6%8A%80%E6%9C%AF%E7%BB%86%E8%8A%82.md + [58]: https://github.com/JChehe/blog/blob/master/translation/%E5%85%B6%E5%AE%9E%E9%97%AD%E5%8C%85%E5%B9%B6%E4%B8%8D%E9%AB%98%E6%B7%B1%E8%8E%AB%E6%B5%8B.md + [59]: https://github.com/JChehe/blog/blob/master/translation/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AAJavaScript%20%E5%A4%A7%E7%89%9B%EF%BC%9F%E3%80%90%E8%AF%91%E3%80%91.md + [60]: https://github.com/JChehe/blog/blob/master/translation/%E8%84%B1%E7%A6%BBjQuery%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9FAjax.md From 513cd899598c707feb09120ed8e4ee9a562cc018 Mon Sep 17 00:00:00 2001 From: "J.c" <574805242@qq.com> Date: Wed, 15 Sep 2021 15:03:24 +0800 Subject: [PATCH 36/36] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ba3abf0..6eaf8d1 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ [14]: https://github.com/JChehe/blog/issues/51 [15]: https://github.com/JChehe/blog/issues/50 [16]: https://github.com/JChehe/blog/issues/10 - [17]: https://github.com/JChehe/blog/issues/47 + [17]: https://jchehe.gitbook.io/mysql_data_types_cn/ [18]: https://github.com/JChehe/blog/issues/40 [19]: https://github.com/JChehe/blog/issues/8 [20]: https://github.com/JChehe/blog/issues/33