前言廢話(立flag)
《javascript忍者祕籍第二版》這本書據說是JQUERY之父寫的,emmm,肯定值得我這種菜狗來學習膜拜,所以打算花時間來把這本書通讀記錄一便,因為是看的英文版(因為貧窮,所以只好看看英文版的,英文版的免費,所以只好自食其力)所以翻譯不當之處煩請指正(我統統接受!)
書籍傳送門(需要的自取)
連結:pan.baidu.com/s/1xF3SVjOP… 提取碼:847o 複製這段內容後開啟百度網盤手機App,操作更方便哦
第一章 JavaScript is everywhere
這章包括三個部分
- JavaScript的核心語言功能
- JavaScript引擎的核心項
- 三個JavaScript開發的最佳實踐
1.1 理解JavaScript語言
很多人之前可能用過C++,java等語言,所以會以為JavaScript會也和他們一樣,但是其實根本上有很大的不同,與其他語言相比,JavaScript功能上更物件導向。這些不同包括:
- 函式是一流物件 在JavaScript中,函式也是物件,並且能夠和其他物件共存。函式物件可以通過字面量來建立,可以通過變數來引用,可以作為一個函式引數來傳遞,甚至可以作為函式返回值來返回。我們會花費三章來探索函式作為一流的物件在JavaScript程式碼中帶給我們的好處。
- 函式閉包
函式閉包的概念其實很多人對他不是很理解,但也無法阻止他成為JavaScript中很重要的一個概念。現在,你只需要知道當閉包就是能夠讀取其他函式內部變數的函式。如果你現在還沒看到閉包的好處,表怕。我們會在第五章中詳細解釋,我們也會在第三章和第四章中深入瞭解函式。
- 作用域
直到最近,JavaScript都沒有塊級變數的概念(像C語言),為了實現這個功能,我們只能用全域性變數和函式級別的變數來代替。
- 基於原型的物件導向
就是JavaScript不能像主流函式來實現物件導向,所以只能使用原型(prototype)來實現這一功能。所以我們之後會深入研究原型,基於原型的物件導向是如何工作的以及他在JavaScript中的實現方法
JavaScript是由物件,原型,函式和閉包相輔相成的。理解這些概念,才能最大限度的提高JavaScript程式設計能力。同時,為了接下去閱讀的順暢,需要理解以下一些概念(ES6):
- generate
- promises
- proxies
- arrary新增的方法
- maps
- 正規表示式
- modules
- class
- asyn await
- for... of
- .....
1.1.1 JavaScript會如何發展
原文就是說ECMAScript委員會每年做一些小的修改,本書會同時研究ES6和ES7的特性,你可以關注以下網址來關注更新動態
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應用是事件驅動的應用。