JavaScript編程是怎樣的

這篇文章將為大家詳細講解有關JavaScript編程是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

處理缺陷與錯誤

A.嚴格模式

當啟用了嚴格模式（strict mode）后，JS就會在執行代碼時變得更為嚴格。只需在文件或函數頂部放置字符串“use strict”就可以啟用嚴格模式了。

B.異常

1.異常是一種當代碼執行中遇到問題時，可以觸發（或拋出）異常的機制，異常只是一個普通的值。觸發異常類似于從函數中強制返回：異常不只跑出到當前函數中，還會跳出函數調用方，走到當前執行流初次調用函數的位置。這種方式被稱為“堆棧展開(Unwinding the Stack)”。

2.異常真正強大的地方在于你可以在堆棧上設置一個“障礙物”，當異常縮減堆棧到達這個位置時會被捕獲。接著你就可以對異常進行一些處理，并使得程序從異常捕獲點開始繼續執行。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/8.html

正則表達式

1.exec方法，如果無法匹配模式則返回null，否則返回一個表示匹配字符串信息的對象。字符串也有個match方法

2.字符串replace，第二個參數可以用函數

3.//gi，g表示全局，i表示不分大小寫

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/9.html

模塊

A.模塊的好處

1.模塊根據一些標準將程序劃分為不同的代碼塊，每份代碼都自成一個整體。

2.設計良好的模塊可以提供外部代碼訪問所需的接口。定義良好的模塊接口可以確保舊接口在模塊更新后保持不變。對外提供的接口應該具有統一和內聚的特性。

B.使用函數作為命名空間

1.為了防止模塊內部使用的變量會污染全局命名空間，我們將該模塊包裹在函數中。

2.將命名空間函數放在一對圓括號中：如果表達式使用關鍵字function開頭，表明這是一個函數表達式。但如果一個語句使用function開頭，則將該語句看成一個需要函數名的函數聲明，而非一個表達式，也就是說，我們無法在語句后面添加括號來調用該函數。

C.使用對象作為接口

對于代碼量比較大的模塊來說，定義一個對象，并在定義完需要導出的某些元素時，將這些元素添加到該對象的屬性中。

D.與全局作用域分離

構造一個require函數，調用該函數時指定一個模塊名稱，該函數會裝載模塊文件（依賴于我們運行的平臺）并返回合適的接口對象

E.將數據作為代碼執行

不推薦eval，使用new Function(“參數名列表”,“函數體”)

F.接口設計

1.可預測性

2.可組合性

3.層次化接口

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/10.html

項目實戰：開發編程語言

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/11.html

文檔對象模型

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/12.html

處理事件

A.事件與DOM節點

addEventListener；removeEventListener；

B.傳播

1.若段落和按扭都有事件處理器，則先執行最特殊的事件處理器（按扭的事件處理器）。也就是說事件向外傳播，從觸發事件的節點到其父節點，最后直到文檔根節點。最后，當某個特定節點上注冊的所有事件處理器按其順序全部執行完畢后，窗口對象的事件處理器才有機會響應事件。

2.事件處理器任何時候都可以調用事件對象的stopPropagation方法，阻止事件進一步傳播。

3.可以使用target屬性來創建出特定類型事件的處理網絡。event.target.textContent

C.默認動作

調用event.preventDefault，不執行默認的動作

D.焦點事件

focus和blur事件，不會傳播！

E.腳本執行時間線

1.即使任何時候都可以觸發事件，但同一文檔中無法同時執行兩個腳本。若一個腳本已經在運行，事件處理器和使用其他方法調度的代碼會使該腳本等待執行。

2.若想放到后臺進行，同時防止頁面無響應，可以使用瀏覽器提供的Web Worker。

F.定時器

setTimeout，一定時間后執行，clearTimeout

setInterval，每隔一定時間循環執行，clearInterval

利用setTimeout可以進行事件降頻

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/13.html

項目實戰：平臺游戲

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

使用canvas繪圖

A.SVG

1.可縮放矢量圖形，專用于描述圖形文檔而非描述文字文檔，保存了對于聊天挖墻腳的基本信息的描述，可以隨時移動或修改圖像。

B.canvas元素

1.用于繪制二維圖形的“2d”與通完openGL接口繪制三維圖形的“webgl”

2.filleStyle決定了圖形的填充方式

3.strokeStyle和lineWidth用來控制線條的繪制方式

4.fillRect和strokeRect來繪制矩形

5.fillText和strokeText繪制文字

6.beginPath創建一個新的路徑，lineTo方法畫一條直線，路徑畫完時可以使用fill填充或stroke勾勒輪廓

7.drawImage從一張圖片或另一個畫面上移動像素到我們的畫布上

8.translate、scale與rotate進行圖形變換，一個變換的狀態可以通過save來保存，通過restore來恢復

9.clearRect可以在繪制動畫時，清除畫布的某一部分

C.選擇圖像接口

1.SVG可以被用來制造可以做任意縮放而仍然清晰的圖像。比單純的HTML更加難以使用，但是更加強大。

2.畫布的基于像素的方法在需要繪制大量的微小元素時會有優勢，不會構建新的數據結構 而是僅僅重復的在同一個像素上繪制，使得畫布在每個圖形上擁有更低的消耗。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/15.html

HTTP協議概述

A.XMLHttpRequest對象

B.HTTP沙箱

請求頭中包含Access-Control-Allow-Origin:*告訴其他域名發送請求是沒問題的

C.Promise斷言

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/16.html

表單和表單域

A.聚焦

在document.activeElement中的值會關聯到當前聚焦的元素。通過focus和blur方法來控制聚焦

B.作為整體的表單

1.當一個域被包含在<form>元素中時，其DOM元素會有一個form屬性指向form的DOM元素，<form>元素則會有一個叫作elements屬性包含一個類似于數據的集合，其中包含全部的域

2.submit方法可以調用事件對象的preventDefault來禁用默認行為

C.文本域

selectionStart和selectionEnd屬性包含光標和所選文字的信息。當沒有選中文字時，這兩個屬性的值相同，表明當前光標的信息。當一部分域被選中時，這兩個你屬性值會不同，表明文字開始位置和結束位置

D.選擇域

multiple可以多選，size用來設置同時可展示的選項，設置3顯示3行，與multiple無關。<select>域有類似于數組的options屬性

E.客戶端保存數據

localStorage和sessionStorage，sessionStorage會在瀏覽器關閉時結束

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/17.html

項目實戰：繪圖程序

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/18.html

Node.js

A.node命令

1.變量process是Node中的全局變量，提供了process.exit方法（結束進程），process.argv（獲取傳遞給腳本的命令行參數）

2.與瀏覽器相關的功能，如document與alert不存在在node中

3.全局作用域對象在瀏覽器中名為window，而在Node中則名為global

B.文件系統模塊

1.fs：readFIle()、writeFile()、readdir()將目錄中的文件以字符串數組的方式返回、stat函數用于獲取文件信息、rename用于重命名、unlink用于刪除

2.fs模塊中的許多函數都有異步與同步的兩種變體，如readFile的同步函數為readFileSync

C.流

1.可寫流：所有的可寫流都有一個write方法，可以傳遞字符串或Buffer對象。可寫流的end方法用于關閉流，如果 線定一個參數，該方法會在關閉流前輸出指定的一段數據。這兩個方法都可以使用一個回調函數作為額外參數，當寫入數據或關閉流完成后，會調用用戶指定的回調函數。

2.可讀流：data事件在每次數據到來時觸發，end事件在流結束時觸發。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-1.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-2.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/garble.js

項目實戰：技能分享網站

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/router.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/20.js

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/public/

JavaScript和性能

1.性能分析器：Chrome的Profiler

2.函數內聯：函數內聯通過許多方法來回憶代碼運行速度。在機器級別，函數和方法需要使用一定的協議調用。

3.交叉編譯：當編譯熱點函數時，該函數已經執行過了許多次。如果在這些執行過程中，每次都調用同一個函數，那么內聯該函數就是合理的。

4.沒有任何JS引擎能夠內聯forEach調用。可以使用傳統的for循環來取代forEach

5.為什么對象如此昂貴呢？一是引擎需要尋找位置來有些話對象，二是引擎需要分別看v化學成分全局再也不需要使用而應該進行垃圾回收。Chrome使用世代型垃圾回收機制（Generational Garbage Collection）

6.如果你希望一段代碼執行得足夠快，那么最好保持類型一致。

https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/21.js

關于JavaScript編程是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。