(一)初識JavaScript——無處不在的JavaScript,js基礎

一 、“理解”JavaScript語言

人們總覺得對 C# 或者 Java 的瞭解,能爲他們理解 JavaScript 的工作原理打下堅實的基礎,然而這時一個陷阱。與其他語言相比 JavaScript 的函數式語言的血統更多一些。 JavaScript 中的一些概念從根本上不同於其它的語言。

這些根本性的差異包括以下內容:

  • 函數是一等公民(一級對象)——在 JavaScript 中函數與對象共存,並且能夠像其他對象一樣地使用。函數可通過字面量創建,可以賦值給變量,可以作爲函數參數座位傳遞,甚至可以作爲返回值從函數中返回。

  • 函數閉包——大部分人對閉包都卻反理解,然而他卻從根本上例證了函數之於外部的變量,則該函數爲一個閉包就已經足夠。

  • 作用域——知道最近 JavaScript 都沒有會計作用域下的變量,取而代之則只能以來函數你別的變量和全局變量。

  • 基於原型的面向對象——不同於其他主流的面嚮對象語言(如C#、Java、Ruby)使用基於類的面向對象,JavaScript 使用基於原型的面向對象。

對象、原型、函數和閉包的緊密結合組成了 JavaScript 。理解這些概念的密切聯繫能大大提高你的開發能力,爲你開發各種類型的應用提供堅固的基礎,無論你的應用是開發的網頁上、桌面應用上、移動應用上還是服務器端。

除了這些基本概念,JavaScript 的一些其它功能也能幫你書寫優雅搞笑的代碼。對於經驗老到的開發者來說,這些部分特性在其他語言也出現過,例如Java和C++。我們會特別聚焦於一下特性。

  • 生成器,一種可以預計一次請求生成多次值的函數,在不同請求之間也能掛起執行。
  • Promise,讓我們更好的控制異步代碼。
  • 代理,讓我們控制對特定對象的訪問。
  • 高級數組方法,書寫更加優雅的數組處理函數。
  • Map,用於創建字典集合;Set,處理僅包含不重複項目的集合。
  • 正則表達式,簡化用代碼書寫起來很複雜的邏輯。
  • 模塊,把代碼劃分成較小的可以包含的代碼片段,是項目更易於管理。

深入理解 JavaScript 的基礎知識,以及學習如何最大程度的利用 JavaScript 的高級特性,能夠讓你的代碼編寫水平提升到一個更高的水平。磨練代碼技能、並將這些概念和特性連貫起來也能讓你對 JavaScript 的理解更上一層樓。從而爲你編寫各種類型的 JavaScript 應用富裕更大的創造力。

二 、理解瀏覽器

現如今JavaScript應用能在很多環境中執行。但是,JavaScript 最初的運行環境是瀏覽器環境,而其它環境環境也是借鑑於瀏覽器運行環境。瀏覽器提供了多種概念和API讓我們來探索。

我們將集中討論如下概念:

  • 文檔對象模型(DOM)——DOMWeb應用的結構化UI表現形式,至少最初是由Web應用的HTML代碼構成。爲開發大應用,你不僅需要深入裏理解 JavaScript 的核心機制,還要學習DOM是如何構成的以及如何書寫有效地DOM操作代碼。能講學會如何創造高級的,動態的UI。
  • 事件——大部分 JavaScript 應用都是事件驅動的應用,這表示大部分代碼執行在對某個特殊事件響應的上下文中。這樣的事件,例如網絡事件、計時器、用戶生成事件例如點擊、鼠標移動、鍵盤按壓事件等。我們特別關注計時器、計時器想一個謎團一樣,但他能幫我們處理複雜編碼任務:例如長期執行的計算和流暢的動畫。
  • 瀏覽器API——幫助我們與世界交互,瀏覽器提供獲取設備信息、存儲本地數據或與遠程瀏覽器交互的API

三、使用當前的最佳實踐

精通 JavaScript 語言和掌握跨瀏覽器代碼問題對於專家級Web應用開發者來說是重要課題,但他們不是整個藍圖。若想進入整個聯盟,你還需要展示出一些已經被大量先進開發者鎖證明能夠開發出高質量代碼的特質。這些特質被稱爲最佳實踐,所以你除了精通 JavaScript 語言以外,還需要具有以下特質:

  • 調試技巧
  • 測試
  • 性能分析

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應用,RN應用等。

2 測試

我們會使用一些從實際數來確保代碼按預期執行,同事這些測試技術也用於展示一般情況如何測試代碼。

assert(value,message)

第一個參數是一個應爲真值的條件,第二個參數是當斷言爲假時所展示的一句話。
例如:
如果變量的值不等於1,則斷言失敗然後那段有點戲劇性的消息就會被展示出來。
assert函數的具體實現方法也很簡單,如下:

function assert(value,desc){
	return value? console.log(true):console.log(desc)
}
assert(a===1,'a id not 1!')
//運行結果爲
a id not 1!

3 性能分析

分析性能是另一個重要事件。儘管在 JavaScript 引擎已經讓 JavaScript 以驚人的效率提升,然而我們依然沒有理由書寫粗糙低效的代碼。
我們會使用如下代碼來收集性能消息:

//例1
let maxCount = 1234567890;
console.time('My opertion');//開始計時器
for(let n=0;n<maxCountl;n++){
	
}
console.timeEnd('My opertion');
//運行結果
// My opertion: 11187.836181640625ms

//例2
let maxCount = 12345678900;
console.time('My opertion');//開始計時器
for(let n=0;n<maxCount;n++){
	
}
console.timeEnd('My opertion');
//運行結果
 My opertion: 14763.085205078125ms

這段代碼中,我們要把測量的代碼放在兩個計時器調用之間,分別是內置console對象的timetimeEnd方法。

在操作開始執行之前,調用console.time啓動一個命名計時器。然後再特定的循環次數下運行代碼。由於一次操作太難測量,所以我們要多次運行代碼從而取得一個能夠測量的值。運行次數可以成百上千,甚至上萬,其完全依賴於將被測量的代碼性質。幾次摸索後我們就能得到一個合理的值。

操作結束後則用相同的計時器名字調用console.timeEnd。雖有瀏覽器就會輸出從開始到當前的時間差。

把這種技術與前面所學的時間技術統一起來,你對 JavaScript 的開發能力就會大幅度提升。在瀏覽器提供的有限資源下,在瀏覽器能力和兼容性逐漸複雜的世界中開發應用,需要一套健壯和完整的技巧。

四、跨平臺開發能力

JavaScript 基本原理和 核心API 的滲入理解能讓你成爲更全能的開發者。通過使用瀏覽器和Node.js(源自於瀏覽器的環境),你能夠開發幾乎您能想到的任何類型的應用。

  • 桌面應用,通過使用NW.js或者ELectron
  • 移動應用
  • 使用Node.js開發服務器端應用和嵌入式應用。Node.js是源自於瀏覽器的環境,使用了很多類似於瀏覽器的底層原理。例如,Node.js 能執行JavaScript代碼,並且也基於事件驅動。

五、小結

  • 客戶端web應用座位如今最流行的應用,其概念、工具和技術從僅開發客戶端Web應用已經滲入到其他應用領域。理解客戶端Web應用的基礎能幫助你開發一系列不同領域的應用。
  • 爲了提高開發技能,你需要滲入理解JavaScript的核心機制和瀏覽器鎖提供的架構。
  • 後期將集中討論核心JavaScrip 的核心機制,例如函數、函數閉包和原型,還有一些新的JavaScript特性,例如生成器promise代理映射集合模塊
  • JavaScript可以再大量的環境中執行,但所有環境的開端是我們將集中探討的瀏覽器環境。
  • 除了JavaScript以外,我們還將繼續探索瀏覽器內部,例如DOM事件,這是因爲客戶端Web應用是事件驅動的應用。

PS:下一篇深入理解運行時的頁面構建過程

如有問題請聯繫我~

歡迎加入QQ羣:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章