忍者秘籍读书笔记

2021-01-21 22:34:30 阅读：189 来源： 互联网

Babel 是编写下一代 JavaScript 的编译器。Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持。

Traceur 是一个来自 Google 的 Javascript 编译器，通过它可以体验一些很新并且有趣的 Javascript 语言特性，这些多数是还没有被当前浏览器实现的 ECMAScript 标准或草案，比如：数组比较、类、模块、迭代器、方法参数默认值、Promise等。

与其它主流语言相比，JS函数式语言的血统更多一些：

这些根本性的差异，包含以下内容：①函数式一等公民（一级对象，创建，传递，共存，返回）②函数闭包（函数主动维护了在函数内部使用的外部变量，则该函数为一个闭包）③作用域（js没有块级作用域下的变量，只能依赖函数级别全局和局部）④基于原型的面向对象

对象，原型，函数，闭包的紧密结合组成了 JavaScript 。理解这些概念的密切联系，才能得到提升。

聚焦JS以下特性：

生成器：一种可以基于一次请求生成多次值的函数，在不同请求之间也能挂起执行。

Promise：更好的控制异步代码。

代理：让我们控制对特定对象的访问。

高级数组方法：书写更优雅的数组处理函数。

Map：用于创建字典集合；Set：处理仅包含不重复项目的集合。

正则表达式：简化用代码写起来的复杂逻辑。

模块：把代码划分为较小的可以自包含的片段，使项目更易于管理。

浏览器环境聚焦：

①文档对象模型（DOM是WEB应用的结构化的UI表现形式）。

②事件（大部分js应用都是事件驱动应用）

③浏览器API

需要做到：精通JavaScript语言，调试技巧，测试，性能分析。

跨平台开发的能力：Node开发服务器端应用和嵌入式应用。

第二章：运行时的页面构建过程

浏览器是否总是会根据给定的HTML来渲染界面呢？

Web应用一次能处理多少个事件？

为什么浏览器使用事件队列来处理事件？

生命周期预览：

从用户的角度来说，浏览器构建了发送至服务器（序号2）的请求，该服务器处理了请求（序号3）并形成了一个通常由 HTML，CSS，JavaScript 代码所组成的响应。当浏览器接收了响应（序号4）时，我们的客户端应用开始了它的生命周期。由于客户端 Web 应用是图形用户界面 (GUI) 应用，其生命周期与其他的 GUI 应用相似（例如标准的桌面应用和移动应用），其执行步骤如下：

1.页面构建——创建用户界面；

2.事件处理——进入循环（序号5）从而等待事件（序号6）的发生，发生后调用事件处理器；

应用的生命周期随着用户关掉或离开页面（序号7）而结束。

2.2 页面构建阶段

页面构建必须根据服务器获取的响应：通常是HTML，CSS，JavaScript；

页面构建的阶段目标是建立web应用的UI，其主要分两步：①解析HTML代码并构建文档对象模型（DOM）②执行JavaScript代码。

步骤①会在浏览器处理HTML节点过程中执行，步骤二会在HTML解析到一种特殊的节点——脚本节点（包含或引用JS代码的节点）时执行。页面构建阶段中，这两个步骤会交替执行多次。

尽管DOM是根据HTML创建的，两者紧密联系，但并不相同。可以把HTML代码看见为初始化浏览器页面UI构建初始DOM的蓝图，浏览器还会修复它发现蓝图中的问题。

HTML的版本是HTML5，DOM则发展相对缓慢，当前的版本是DOM3。

页面构建阶段，如果浏览器遇到特殊类型的HTML元素-脚本元素，该元素用于包含JS代码。每当解析到脚本元素时，DOM构建会停止，并开始执行JS代码。所有包含在脚本元素中的js代码，都由浏览器的JS引擎执行。

列如：Firefox——Spidermonkey 引擎

Chroom，Opera——V8

Edge，IE——Chakra

由于代码的主要目的是提供动态界面，故而浏览器通过全局对象提供一个API使JS引擎可以与之交互并改变页面内容。浏览器暴露给JS引擎的主要全局对象是window，它代表了包含着一个页面的窗口。

全局window对象是获取所有其他全局对象，全局变量和浏览器API的访问途径。全局window对象最重要的属性是document，它代表了当前页面的DOM。通过使用这个对象，JS代码就能在任意程度改变DOM，包括修改或移除现存的节点，以及创建和插入新的节点。

2.3 事件处理

客户端Web应用是一种GUI应用，也就是说这种应用会对不同类型的事件作响应。因此，在页面构建阶段执行的JS代码，除了会影响全局应用状态和修改DOM外，还会注册事件监听器（处理器）。这类监听器会在事件发生时，由浏览器调用执行。

浏览器执行环境的核心思想基于：同一时刻只能执行一个代码片段，即所谓的单线程执行模式。

浏览器事件队列，跟踪已经发生但尚未处理的事件。

所有已经生成的事件（无论用户生成的，例如鼠标键盘；还是服务器生成的，例如Aiax）都会放在同一个事件队列中，以它们被浏览器检测到的顺序排列。

重点注意浏览器在这个过程中的机制，其放置事件的队列是在页面构建阶段和事件处理阶段以外的。这个过程对于决定事件何时发生并将其推入事件队列很重要，这个过程不会参与事件处理线程。

Web常见的事件：

浏览器事件：例如当页面加载完成后或无法加载时；
网络事件：例如来自服务器的响应（Ajax事件和服务器端事件）；
用户事件：例如鼠标单击、鼠标移动和键盘事件；
计时器事件：当timeout时间到期或又触发了一次时间间隔；

事件处理的概念是Web应用的核心。代码的提前建立是为了在之后的某个时间点执行。除了全局代码，页面中的大部分代码将作为某个事件的结果执行。在事件能被处理之前，代码必须要告知浏览器我们要处理特定事件。

注册事件处理器：

事件处理器是当某个特定事件发生后我们希望执行的函数。为了达到这个目标，我们必须告知浏览器我们要处理那个事件。这个过程叫做注册事件处理器。在Web应用中，有两种注册方式：①通过把函数赋给某个特殊属性②通过使用内置 addEventListener 方法。

事件处理的主要思想是：当事件发生时，浏览器调用相应的事件处理器。

第3章定义与参数（新手的第一堂函数课~）

像普通人一样编写代码和像"忍者"一样编写代码的最大差别在于是否把 JavaScript 作为函数式语言（function language）来理解。

回调函数在那种情况下会同步调用，或者异步调用呢？
箭头函数和函数表达式的区别？
你为什么需要在函数中使用默认参数？

函数及函数式概念之所以如此重要，其原因之一在于函数是程序执行过程中的主要单元模块。除了全局 js 代码是在页面构建阶段执行的，我们编写的所有的脚本代码都将在一个函数内执行。

通过强大的构造器能赋予代码很大的灵活性和控制力，利用函数作为第一类对象的特性获益。

3.3.1 函数是第一类对象

js中函数拥有对象的所有能力，也因此函数可以被作为任意其他类型对象来对待。

函数也是对象，唯一的特殊之处在于它是可调用的，即函数会被调用以执行某项动作。

第一类对象的特点之一是，它能够作为参数传入函数。

3.1.2 回调函数

每当我们建立了一个将在随后调用的函数时，无论是在事件处理阶段通过浏览器还是通过其他代码，我们都是在建立一个回调（callback）。这个术语源自于一个这样的事实：

即在执行过程中，我们建立的函数会被其他函数在稍后的某个合适的时间点"再回来调用"。

js的重要特征之一是可以在表达式出现的任意位置创建函数，除此之外这种方式会使代码更紧凑易于理解（把函数定义放在函数使用处附近）

3.3 函数定义

JS提供了四类定义函数的方法：

函数声明（function declarations）和函数表达式（function expression）————最常用，在定义函数上却又微妙不同的两种方式。人们通常不会独立的看待他们，但正如你将看到的，意识到两者的不同能帮我们理解函数何时能被调用。
function myFun ( ) { return 1 ； }
箭头函数（通常被叫作 lambda 函数）————ES6 新增的 JavaScript 标准，能让我们以尽量简洁的语法定义函数。
myArg => myArg*2
函数构造函数————一种不常使用的函数定义方式，能让我们以字符串形式动态构造一个函数，这样得到的函数时动态生成的。这个例子动态地创建了一个函数，其参数为a和b，返回值为两个数的和。
new Function( 'a' ，'b' ，'return a + b' )
生成器函数————ES6 新增功能，能让我们创建不同于普通函数的函数，在应用程序执行过程中，这种函数能够退出再重新进入，在这些再进入之间保留函数内变量的值。我们可以定义生成器版本的函数声明、函数表达式、函数构造函数。
function * myGen ( ) { yield 1 ； }

理解这几种方式的不同很重要，因为函数的创建方式很大程度地影响了函数可被调用的时间、函数的行为以及函数可以在那个对象上被调用。

数字字面量：

var a = 3 ；

myFunction( 4 ) ；

函数字面量：

var a = function(){ } ；

myFunction（ function ( ) { } ）；

这种总是其它函数表达式一部分的函数（作为赋值表达式的右值，或者作为其他函数的参数）叫做函数表达式。函数表达式非常重要，在于它能准确地在我们需要使用的地方定义函数，这个过程能让代码易于理解。

函数声明和函数表达式除了在代码中的位置不同以外，还有一个重要的不同点。对于函数声明来说，函数名是强制性的，而对于函数表达式来说，函数名则完全是可选的。

函数声明必须具有函数名是因为它们是独立语句。一个函数的基本要求是它应该能被调用，所以它必须具有一种被引用的方式，于是唯一的方式就是通过它的名字。

从另一个方面来看，函数表达式也是其它js表达式的一部分，所以我们也就有了调用它们的替代方案。例如：把一个函数表达式赋值给一个变量。或者它是另外一个函数的参数，我们可以在该函数中通过参数名来调用。

3.3.2 箭头函数 (tip:箭头函数是 ES6 新增项)

箭头函数的定义以一串可选参数名列表开头，参数名以逗号分隔。如果没有参数或多于一个参数，参数列表就必须包裹在括号内。但如果只有一孤儿参数，括号就不是必须的。参数列表之后必须跟着一个胖箭头符号，一次像我们和js引擎指示当前处理的是箭头函数。

胖箭头操作符后面有两种可选方式。如果要创建一个简单函数，那么可以把表达式放在这里（可以是数学运算、其它函数调用等），则该函数的返回值即为此表达式的返回值。

标签：忍者,浏览器,函数,秘籍,代码,读书笔记,事件,表达式,页面
来源： https://www.cnblogs.com/goforxiaobo/p/14226364.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

忍者秘籍读书笔记