javascript忍者秘籍(第二版)翻译学习 第一章 JavaScript无处不在

896 阅读12分钟

前言废话(立flag)

《javascript忍者秘籍第二版》这本书据说是JQUERY之父写的,emmm,肯定值得我这种菜狗来学习膜拜,所以打算花时间来把这本书通读记录一便,因为是看的英文版(因为贫穷,所以只好看看英文版的,英文版的免费,所以只好自食其力)所以翻译不当之处烦请指正(我统统接受!)

书籍传送门(需要的自取)

链接:pan.baidu.com/s/1xF3SVjOP… 提取码:847o 复制这段内容后打开百度网盘手机App,操作更方便哦

第一章 JavaScript is everywhere

这章包括三个部分

  1. JavaScript的核心语言功能
  2. JavaScript引擎的核心项
  3. 三个JavaScript开发的最佳实践

1.1 理解JavaScript语言

很多人之前可能用过C++,java等语言,所以会以为JavaScript会也和他们一样,但是其实根本上有很大的不同,与其他语言相比,JavaScript功能上更面向对象。这些不同包括:

  • 函数是一流对象 在JavaScript中,函数也是对象,并且能够和其他对象共存。函数对象可以通过字面量来创建,可以通过变量来引用,可以作为一个函数参数来传递,甚至可以作为函数返回值来返回。我们会花费三章来探索函数作为一流的对象在JavaScript代码中带给我们的好处。
  • 函数闭包

函数闭包的概念其实很多人对他不是很理解,但也无法阻止他成为JavaScript中很重要的一个概念。现在,你只需要知道当闭包就是能够读取其他函数内部变量的函数。如果你现在还没看到闭包的好处,表怕。我们会在第五章中详细解释,我们也会在第三章和第四章中深入了解函数。

  • 作用域

直到最近,JavaScript都没有块级变量的概念(像C语言),为了实现这个功能,我们只能用全局变量和函数级别的变量来代替。

  • 基于原型的面向对象

就是JavaScript不能像主流函数来实现面向对象,所以只能使用原型(prototype)来实现这一功能。所以我们之后会深入研究原型,基于原型的面向对象是如何工作的以及他在JavaScript中的实现方法

JavaScript是由对象,原型,函数和闭包相辅相成的。理解这些概念,才能最大限度的提高JavaScript编程能力。同时,为了接下去阅读的顺畅,需要理解以下一些概念(ES6):

传送门 es6.ruanyifeng.com/

  1. generate
  2. promises
  3. proxies
  4. arrary新增的方法
  5. maps
  6. 正则表达式
  7. modules
  8. class
  9. asyn await
  10. for... of
  11. .....

1.1.1 JavaScript会如何发展

原文就是说ECMAScript委员会每年做一些小的修改,本书会同时研究ES6和ES7的特性,你可以关注以下网址来关注更新动态

kangax.github.io/compat-tabl…

kangax.github.io/compat-tabl…

kangax.github.io/compat-tabl…

1.1.2 编译器让我们能够访问明天的JavaScript

原文就是说 学会使用Babel来支持编译ES6/7,在本书中可以使用Babel来调试代码

1.2 理解浏览器

现在的JavaScript能在很多环境中运行,但是最初的运行环境是浏览器,其他运行环境也是借鉴于浏览器环境。本书将专注与浏览器环境。

如图,node和浏览器运行环境存在差异,我们将主要集中精力放在DOM,events,timer,和浏览器api上

  • dom (文档对象模型) DOM 是Web应用的结构化的UI表现形式,至少最初由Web应用的HTML代码构成。为开发大型应用,你不仅需要深入理解JavaScript 的核心机制,还要学习 DOM 是如何构成的(第2章)以及如何书写有效的DOM操作代码(第12章)。你将学会如何创造高级的、动态的UI
  • events(事件)大部分JavaScript应用都是事件驱动的应用,这表示大部分代码执行在对某个特殊事件响应的上下文中。这样的事件例如网络事件、计时器、用户生成事件例如点击、鼠标移动、键盘按压事件等。因此,第13章中我们将完整探索事件机制。我们特别关注计时器,计时器通常像个谜团一样,但它能帮我们处理复杂编码任务:例如长期执行的计算和流畅的动画。
  • 浏览器api 帮助我们与世界交互,浏览器提供获取设备的信息、存储本地数据或与远程浏览器交互的API。本书我们会探索其中的一些API。 完善编程技能并对浏览器提供的API有深入理解能让你走得更远。但是迟早,你将会遇到浏览器的不一致性等问题。在完美的世界中,所有浏览器都应该没有缺陷,应该都能以一致的方式支持Web标准。然而我们的现实世界并不完美。

近来浏览器的质量已经大大提高了,但我们仍然需要面对一些缺陷:例如缺失的API、某个浏览器的奇怪问题。针对浏览器的这些问题开发出一种易于理解的机制,并搞清楚它们的差异和宽松模式,这与精通JavaScript几乎同等重要。

当我们开发浏览器应用或JavaScript库时,选择支持哪个浏览器是很值得深思熟虑的。我们希望全部支持,但受限于开发测试资源要求或其他要求。因此在第14章中,我们将彻底地探索跨浏览器开发的策略。

开发高效的跨浏览器代码显著依赖于开发者的经验和技巧。本书旨在提高开发者技能水平,所以让我们通过当前的最佳实践来开始学习吧。

1.3 使用当前的最佳实践

精通JavaScript语言和掌握跨浏览器代码问题对于专家级Web应用开发者来说是重要课题,但它们不是整个蓝图。若想进入整个联盟,你还需要展示出一些已经被大量先前开发者所证明能够开发出高质量代码的特质。这些特质被称为最佳实践,所以你除了精通JavaScript语言以外,还需要具有以下特质:

  • 调试技巧
  • 测试
  • 性能分析

在编程中把这些技能有效结合在一起非常重要,本书会使用它们。接下来看看这些技巧。

1.3.1 调试

以前,调试JavaScript代码意味着使用alert来验证变量的值。好在,由于Firefox浏览器的开发者扩展Firebug的流行,所以调试JavaScript代码的能力大大增强了。所有主流浏览器的类似工具也都被开发出来:

  • Firebug——开发者扩展工具Firefox的流行成为调试工具的开端;
  • Chrome DevTools——由Chrome 团队开发,并应用在了 Chrome 和 Opera浏览器中;
  • Firefox开发者工具——包含在Firefox中的工具,由Firefox 团队开发;
  • F12 开发者工具——Internet Explorer 浏览器 及微软 Edge浏览器中包含的调试工具;
  • WebKit 检视器——Safari中包含的调试工具。 如你所见,主流浏览器都为开发者提供了调试Web应用程序的工具。使用alert来调试JavaScript代码的日子一去不复返了!所有这些工具都有着类似于Firebug最初引入的概念,故而它们都提供着相似的功能:探索DOM、调试JavaScript、编辑CSS样式和跟踪网络事件等。其中的每样工具都做得很棒。你既可以使用你自己选择的浏览器所提供的调试工具,也可以使用你发现缺陷时所用的浏览器调试工具。

除此之外,你也可以使用其中的几个工具,例如用Chrome开发者工具来调试其他类型的应用,例如 Node.js应用(在附录B中,我们会向你介绍一些调试技术)。

1.3.2 测试

在本书中,我们会使用一些测试技术来确保示例代码按预期执行,同时这些测试技术也用于展示一般情况下如何测试代码。我们用于测试的主要工具是一个断言函数,其目的在于断定某个假设是真值还是假值。

该函数的一般形式如下所示:

assert(condition, message);

第一个参数是一个应为真值的条件,第二个参数是当断言为假时所展示的一句话。JS默认时没有这个方法的,只能自己实现或者用其他方法检验,不一定要用这个,给个思路如下

function assert(condition, message) {
    if (!condition) {
        message = message || "Assertion failed";
        if (typeof Error !== "undefined") {
            throw new Error(message);
        }
        throw message; // Fallback
    }
}

例如:

assert(a === 1, "Disaster! a is not 1!");

如果变量的值不等于1,则断言失败,然后那段有点儿戏剧性的消息就会被展示出来。

断言函数并不是JavaScript的标准特性,所以我们在附录B中会展示它的实现。

1.3.3 性能分析

分析性能是另一个重要实践。尽管JavaScript引擎已经让JavaScript以惊人的效率提升,然而我们依然没有理由书写粗糙低效的代码。

我们会使用如下的代码来收集性能信息:

console.time("My operation");   ⇽---   开始计时器
for(var n = 0; n < maxCount; n++){
  /*perform the operation to be measured*/
}   ⇽---    执行多次操作
console.timeEnd("My operation");    ⇽---    停止计时器

这段代码中,我们把要被测量的代码放在两个计时器调用之间,分别是内置console对象上的time和timeEnd方法。

在操作开始执行之前,调用console.time启动一个命名计时器(本例中计时器名为 My operation)。然后在特定的循环次数下运行代码(本例中运行maxCount次)。由于一次操作执行太快很难测量,所以我们要多次运行代码从而取得一个能够测量的值。运行次数可以成百上千,甚至上万,其完全依赖于将被测量的代码性质。几次摸索后我们就能得到一个合理的值。

操作结束后则用相同的计时器名字调用console.timeEnd。随后浏览器就会输出从开始到当前的时间差。

把这种技术与前面所学到的最佳实践技术统一起来,你对JavaScript的开发能力就会大幅度提升。在浏览器提供的有限资源下,在浏览器能力和兼容性逐渐复杂的世界中开发应用,需要一套健壮和完整的技巧。

1.4 提高跨平台开发能力

Bob初入Web开发行业时,他会发现每个浏览器都有一套自己的脚本及UI样式的解释方式,并试图鼓吹他们的方式才是最好的方式,这使开发者们沮丧地咬牙切齿。好在浏览器之争以HTML、CSS, DOM、API和JavaScript的标准化而结束,从而开发者能集中精力开发高效的跨浏览器JavaScript应用。确实,集中精力于把网站开发为应用催生了大量的想法、工具和从桌面应用到网站应用的技术。现如今,这些知识和工具的转换再次发生,想法、工具和源于客户端Web开发的技术逐渐渗入应用开发的其他领域。

对JavaScript基本原理和核心API的渗入理解能让你成为更全能的开发者。通过使用浏览器和Node.js(源自于浏览器的环境),你能够开发几乎你能想到的任何类型的应用。

桌面应用,通过使用如NW.js或Electron的库可以开发桌面应用。这些技术通常通过包装浏览器使我们能用标准的HTML、CSS和JavaScript(我们可以完全依赖我们的核心JavaScript和浏览器知识来开发)以及一些额外的访问文件系统的能力来构建桌面应用。从而能够开发真正独立于平台的桌面应用,它和我们在Windows、Mac和Linux上见到的应用看起来一样。 移动应用,使用类似Apache Cordova的框架开发。与使用 Web 技术构建桌面应用一样,该应用框架也包装了浏览器,不过其中还包含一些额外的针对特定平台的API,从而让开发者能与移动平台交互。 使用Node.js开发服务器端应用和嵌入式应用,Node.js是源自于浏览器的环境,使用了很多类似浏览器的底层原理。例如,Node.js 能执行 JavaScript 代码,并且也基于事件驱动。 Ann并不知道自己有多幸运(尽管Bob有个很棒的想法)。无论她是否需要构建一个标准的桌面应用还是移动应用、服务器端应用或嵌入式应用都没问题——所有这些应用都共享同样的标准客户端Web应用底层原理。

只要理解了JavaScript工作的核心原理、理解了浏览器提供的核心API(例如事件,同样与Node.js提供的机制有很多共同点),她就能加速所有应用的开发。在这个过程中,你将变得更全能,知识和理解力也逐步增长,从而能够处理各种各样的问题。你将能够在云上通过使用JavaScript API构建无需依赖服务器的应用,例如使用类似AWS Lamda来部署、维护和控制你应用的云组件。

1.5 小结

客户端Web应用作为如今最流行的应用,其概念、工具和技术从仅开发客户端Web应用已经深入到其他应用领域。理解客户端Web应用的基础能帮助你开发一系列不同领域的应用。 为了提高开发技能,你需要深入理解JavaScript的核心机制和浏览器所提供的架构。 本书集中探讨了核心JavaScript的机制,例如函数、函数闭包和原型,还有一些新的JavaScript特性,例如生成器、promise、代理、映射、集合和模块。 JavaScript可以在大量的环境中执行,但所有环境的开端是我们将集中探讨的浏览器环境。 除了JavaScript以外,我们还将探索浏览器内部,例如DOM (网页UI的一种结构化表示方式)和事件,这是因为客户端Web应用是事件驱动的应用。