【JavaScript核心技術卷】核心基礎概覽

JavaScript基礎

一、一些想法

我是做Java開發的,說一下後端程序員眼中的JavaScript吧。學習時最直觀的感受就是JavaScript真的難!

最初以爲這不就一門腳本語言嗎?何談多高難度呀。發現太天真了。。。

深覺JavaScript的複雜遠遠超過Java。

JavaScript實在是太靈活了,難以梳理的JavaScript知識體系,讓人頭疼的跨平臺問題等等真的很容易勸退人呀。

如果對JavaScript的核心不瞭解的話,出現莫名其妙的錯誤是非常非常令人頭痛的事情。

因此學習JavaScript最好站在解釋器、瀏覽器以及內存邏輯數據結構的角度來學習(語法真的坑爹)。這不僅會讓你知道事物的表面現象,而且知道事物的本質及其產生的原因。

二、概覽

(1)JavaScript

JavaScript廣義上包含三個部分:ECMAScript(核心)DOM(文檔對象模型)BOM(瀏覽器對象模型)

JavaScript是ECMAScript在瀏覽器上的擴展,ECMAScript定義了核心類,DOM類是針對HTML/CSS的擴展,BOM類是針對瀏覽器的擴展。ECMAScript是JS語言的基礎。

JavaScript狹義上就是指ECMAScrip。通常來說,術語JavaScript和ECMAScript指的都是ECMAScript。
ECMAScript是一種由Ecma國際(前身爲歐洲計算機製造商協會)制定和發佈的腳本語言規範,JavaScript在它的基礎上進行了自己的封裝。

ECMAScript是一種專門爲與網頁交互而設計的腳本語言。ECMAScrip語言具備客戶端的數據驗證,具備了與瀏覽器窗口(BOM)及其內容(DOM)等幾乎所有方面交互的能力。

它由ECMA-262定義,提供核心語言功能。與瀏覽器、HTM /CSS文檔沒有依賴關係( 唯一的聯繫是JS標準中規定的JS全局對象Global object,這個對象在JS標準中是一個抽象概念,在ECMAScript程序執行之前宿主中就已經存在了,而要指明它是什麼,取決於JS程序在什麼宿主環境中運行。在瀏覽器宿主環境中,一定是宿主對象window、fram,並不是ECMAScript規定的內置對象)。

ECMA-262定義的只是這門語言的基礎。Web瀏覽器只是ECMAScrip實現的可能宿主。宿主環境不僅提供基本的ECMAScrip的實現,同時也會提供該語言的擴展,以便語言與環境之間的對接交互。而這些擴展(如DOM、BOM),則利用ECMAScrip的核心類型和語法提供更多更具體的功能,以便實現針對環境的操作。其它的宿主環境包括Node和Adobe Flash等。

1997年發佈了第一版,1998年和1999年發佈了第二和第三個版本。

ECMAScript的各個版本:(從第三版開始說)

(1) 第三版ECMAScript3新增了對正則表達式、新控制語句、try-catch異常處理的支持,修改了字符處理、錯誤定義和數值輸出等內容。標誌着ECMAScript成爲了一門真正的編程語言。

(2) 第四版(相當於Java是一個靜態語言)於2008年7月在正式發佈前被廢棄。

(3) 發佈於2009年的ECMA-262第五版ECMAScript5力求澄清第3版中的歧義,並添加了新的功能。新功能包括:原生JSON對象、繼承的方法、高級屬性的定義以及引入嚴格模式。

(4) 第六版ECMAScript6,JavaScript的官方名稱是ECMAScript 2015(或 ES6),於2015年6月17日發佈。是繼ES5之後的一次主要改進,增添了許多必要的特性,例如:模塊和類以及一些實用特性,Maps、Sets、Promises、生成器(Generators)等。

(5) 第七版ECMAScript7,JavaScript的官方名稱是ECMAScript 2016(或 ES7),於2016年發佈的。與第六個版本相比,最突出的變化就是增加了兩個新的特性:Array.prototype.includes和取冪運算符。

(6) 第八版ECMAScript8,JavaScript的官方名稱是ECMAScript 2017(或 ES8),於2017年發佈的。ECMAScript 2017 的主要變化包括:Object.values/Object.entries、字符串填充、Object.getOwnPropertyDescriptor、尾隨逗號、異步函數、共享內存和原子,等。
(7) 等等等,不斷髮展…

ES6已經在普及了,不過現階段來看,ES3和ES5是我們主要關注的。

首先看一下JavaScript、BOM、DOM整體結構。
在這裏插入圖片描述
對於JavaScript不僅要跨瀏覽器,還有要跨自己的版本,並且要區分嚴格模式和非嚴格模式。這是值得關注的地方。除此之外,嚴格模式能過的代碼 非嚴格模式也一定能過,重點關注嚴格模式。

(2)DOM

文檔對象模型(DOM,Document Object Model)把整個頁面影射爲一個多層節點結構。HTML或XML頁面中的每個組成部分都是某種類型的節點,這些節點又包含着不同的數據。DOM已經成爲JavaScript這門語言的一個重要組成部分。

DOM的級別由負責Web通信標準的W3C(World Wide Web Consortium 萬維網聯盟)制定,有DOM1級、DOM2級、DOM3級。Web瀏覽器對DOM的支持不同。

dom實現:現在的瀏覽器最低實現了dom2,dom3也大都實現了。

DOMAPI是針對XML但經過擴展用於HTML的應用程序編程接口(API,Application Programming Interface),提供了訪問和操作網頁的標準方法。

DOMAPI定義了XML或HTML中每種節點類型的聲明,及其屬性、方法和事件的聲明;聲明類之間的繼承關係。DOMAPI規範只有類型及類型的屬性、方法、事件的定義和描述,而沒有具體實現,與平臺無關。

DOM宿主類是某瀏覽器對標準DOMAPI規範的實現,與平臺有關。

由於不同瀏覽器對DOMAPI規範的實現不僅相同,所以ECMAScript腳本程序需要跨瀏覽器DOMAPI編程。

在這裏插入圖片描述

DOMAPI標準–DOM宿主類—DOM模型—JS腳本程序的關係

在這裏插入圖片描述
大部分的內容是瀏覽器自動生成的,我們無法左右,比如dom宿主類。不過瀏覽器根據某個版本的dom API 生成宿主類(瀏覽器不同 實現很可能不一樣)。

(3)BOM

瀏覽器對象模型(BOM,Browser Object Model 瀏覽器對象模型)把整個瀏覽器影射爲一個多節點結構。從根本上講,BOM只處理瀏覽器的窗口、標籤窗口(window)和框架(frame、iframe);但人們習慣上也把所有針對瀏覽器的JavaScript在ECMAScript基礎上的擴展算是BOM的一部分(例如:location對象、navigate對象、history對象等)。開發人員使用BOM可以控制瀏覽器顯示的頁面以外的部分。

BOMAPI(Browser Object Model 瀏覽器對象模型)是用於瀏覽器的應用程序編程接口(API,Application Programming Interface),提供了訪問與操作瀏覽器的標準方法。

BOM真正的問題是它作爲JavaScript的擴展實現的一部分但卻沒有相關的標準。這個問題在HTML5中得到了解決,HTML5致力於把很多BOM功能寫入正式規範。有了HTML5,BOM實現的細節有望朝着兼容性越來越高的方向發展,很多關於BOM的困惑煙消雲散。

在這裏插入圖片描述

(4)JavaScript引擎/解釋器

JavaScript腳本程序是無法選擇其運行環境的。編輯環境和運行環境是不一致的。所以JS程序要跨JS版本和瀏覽器平臺和版本進行編程。

要求JavaScript程序要跨瀏覽器平臺及版本(BOMAPI、DOMAPI)、跨JavaScript版本(JS版本語法和JS版本的API)以及選擇解析指示模式(嚴格模式和非嚴格模式)。

JavaScript腳本程序是由解釋器解釋執行,所以運行速度慢。但是由於JavaScript程序是在客戶端運行,單線程、一般都比較短、而且重複率低,所以慢速的解釋器還是可以接受的。

在這裏插入圖片描述

(5)HTML解釋器

HTML程序是無法選擇其運行環境的。編輯環境和運行環境是不一致的。

所以HTML程序要跨HTML版本和瀏覽器平臺和版本進行編程。

(6)CSS解釋器

CSS程序是無法選擇其運行環境的。編輯環境和運行環境是不一致的。

所以CSS程序要跨CSS版本和瀏覽器平臺和版本進行編程。

三、關於JavaScript的定位

JavaScript是動態類型語言、是弱類型語言

過程式編程:

  • C語言是靜態類型、弱類型語言。面向過程編程。
  • Java語言是靜態類型、強類型語言。面向對象編程。
  • JavaScript語言是動態類型、弱類型語言。基於對象編程。

命令式編程:

  • SQL語言是命令式編程。

函數式編程(這個我還沒接觸過純粹的函數式編程語言)。

靜態類型語言、動態類型語言:

靜態類型語言:變量定義時有類型聲明的語言。
1)變量的類型在編譯的時候確定
2)變量的類型在運行時不能修改

這樣編譯器就可以確定運行時需要的內存總量。例如:C、C++、Java、C#語言是靜態類型語言。

動態類型語言:變量定義時無類型聲明的語言。
1) 變量的類型在運行的時候確定
2) 變量的類型在運行可以修改

例如:Javascript語言是動態類型語言。

強類型語言、弱類型、無類型語言:

強/弱類型指的是語言類型系統的類型檢查的嚴格程度。弱類型相對於強類型來說類型檢查更不嚴格,比如說允許變量類型的隱式轉換,允許強制類型轉換等等。

  • 強類型語言:例如Java、C#語言是強類型語言,強類型語言是類型安全的語言,是由編譯器以及編譯器生成的中間代碼來保證類型安全。
  • 弱類型語言:C、C++、Javascript語言是弱類型語言,其類型安全由程序員來保證。C、Javascript語言的安全由程序員來保證。
  • 無類型語言:是動態語言,變量中既可以存放數據又可以存放代碼。

程序的可讀性:程序符合編程規範,程序清晰、可讀

程序設計中,程序的可讀性是第一位的。

(1)註釋

  1. 行註釋://註釋內容(用的最多的)
  2. 塊註釋:/註釋內容/(不推薦)

一般情況下,源程序中有效註釋量必須在20%以上。

(2)標識符的命名規範

  1. 符合語法
  2. 有意義,見名知義
  3. 簡潔
  4. 符合JavaScript的命名規範

(3)程序中的三種命名方式:

  • camel命名方式:用於方法名,普通變量名稱。 若標識符是由單個單詞組成,則全小寫int age = 5;若標識符是由多個單詞組成,除了第一個單詞全小寫以外,第二個單詞以及之後的單詞首字母大寫。 int myAge = 10;
  • Pascal命名方式:用於類、接口命名。 類名是以大寫字母開頭的單詞;若類名由多個單詞組成,則每個單詞首字母大寫。 class Test / class MyTest
  • 匈牙利命名方式: 基本原則是:變量名=屬性+類型+對象描述。用的很少。例如: g_i_age 全局的整型的描述年齡age

JavaScript使用Pascal和Camel命名方式。

1.常量:從開發者的角度,值不改變的變量爲常量

通常常量使用單詞全大寫,多個單詞間以_分隔
var PI = 3.1415929;
var MY_AGE = 10;

2.變量名(全局變量、局部變量、函數的形參、屬性):採用Camel命名方式

3.函數對象:
a. 函數對象用於調用,函數名稱採用Camel命名方式
b. 函數對象,作爲構造函數(new)或作爲實例的類(prototype)
採用Pascal命名方式

3.縮進

A.K&R風格
這是C程序最早的縮進風格,由C的發明者Ritchie和他的合作者Kernighan率先使用:

if (<cond>) {
    <body>
}

其特點,是大括號和if判斷在同一行。通常,縮進爲8個空格或一個tab鍵,但在C++和Java裏,也常縮進4個空格。有人喜歡用兩個空格,竊以爲不好,不明顯。

B. BSD 風格
又稱Allman Style,源自Unix BSD程序員Eric Allman–他爲BSD寫過很多程序:

if (<cond>)
{
    <body>
}

特點:大括號和條件判斷分在兩行。

Java是被sun公司推薦第一種,JavaScript的話,看自己的選擇咯。

Tab還是空格(Tabs vs Space)

保證四個空格即可。Tab在不同編譯器設置可能不一樣,自己可以去修改一下。

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