javascript忍者祕籍（第二版）翻譯學習第一章 JavaScript無處不在

時間 2019-11-26

標籤 javascript 忍者祕籍第二翻譯學習第一章無處不在欄目 JavaScript 简体版

原文原文鏈接

前言廢話（立flag）

《javascript忍者祕籍第二版》這本書聽說是JQUERY之父寫的，emmm，確定值得我這種菜狗來學習膜拜，因此打算花時間來把這本書通讀記錄一便，由於是看的英文版（由於貧窮，因此只好看看英文版的，英文版的免費，因此只好自食其力）因此翻譯不當之處煩請指正（我通通接受！)javascript

書籍傳送門(須要的自取)

連接：pan.baidu.com/s/1xF3SVjOP… 提取碼：847o 複製這段內容後打開百度網盤手機App，操做更方便哦java

第一章 JavaScript is everywhere

這章包括三個部分node

JavaScript的核心語言功能

JavaScript引擎的核心項

三個JavaScript開發的最佳實踐

1.1 理解JavaScript語言

不少人以前可能用過C++，java等語言，因此會覺得JavaScript會也和他們同樣，可是其實根本上有很大的不一樣，與其餘語言相比，JavaScript功能上更面向對象。這些不一樣包括：git

函數是一流對象在JavaScript中，函數也是對象，而且可以和其餘對象共存。函數對象能夠經過字面量來建立，能夠經過變量來引用，能夠做爲一個函數參數來傳遞，甚至能夠做爲函數返回值來返回。咱們會花費三章來探索函數做爲一流的對象在JavaScript代碼中帶給咱們的好處。
函數閉包

函數閉包的概念其實不少人對他不是很理解，但也沒法阻止他成爲JavaScript中很重要的一個概念。如今，你只須要知道當閉包就是可以讀取其餘函數內部變量的函數。若是你如今還沒看到閉包的好處，表怕。咱們會在第五章中詳細解釋，咱們也會在第三章和第四章中深刻了解函數。es6

做用域

直到最近，JavaScript都沒有塊級變量的概念（像C語言），爲了實現這個功能，咱們只能用全局變量和函數級別的變量來代替。github

基於原型的面向對象

就是JavaScript不能像主流函數來實現面向對象，因此只能使用原型（prototype）來實現這一功能。因此咱們以後會深刻研究原型，基於原型的面向對象是如何工做的以及他在JavaScript中的實現方法正則表達式

JavaScript是由對象，原型，函數和閉包相輔相成的。理解這些概念，才能最大限度的提升JavaScript編程能力。同時，爲了接下去閱讀的順暢，須要理解如下一些概念(ES6)：編程

傳送門 es6.ruanyifeng.com/api

generate
promises
proxies
arrary新增的方法
maps
正則表達式
modules
class
asyn await
for... of
.....

1.1.1 JavaScript會如何發展

原文就是說ECMAScript委員會每一年作一些小的修改，本書會同時研究ES6和ES7的特性，你能夠關注如下網址來關注更新動態promise

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應用是事件驅動的應用。