什么是JavaScript秘籍

本篇文章為大家展示了什么是JavaScript秘籍，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、進入忍者世界

A.即將探索的JavaScript庫

1.jQuery、Prototype、Yahoo!UI、base2

2.一個JS庫的組成部分

• JS語言的高級使用

• 跨瀏覽器代碼的精心構建

• 當前能夠聚眾合一的最佳實踐應用

B.理解JavaScript語言

1.對象、函數、閉包

2.with、eval()

3.定時器、正則表達式

C.跨瀏覽器注意事項

1.IE7、8、9，chrome，firefox，safari、opera

D.當前最佳實踐

1.測試：自己實現的assert()函數

2.性能分析

3.調度技巧

二、利用測試和調試武裝自己

A.調試代碼

1.console.log()

2.斷點

B.測試用例生成

1.優秀的測試用例：可重用性（repeatability）、簡單性（simplicity）、獨立性（independence）

2.解構型測試用例（deconstructive test cases）在消弱代碼隔離問題時進行創建，以消除任何不恰當的問題。

3.構建型測試用例（constructive test cases）從一個大家熟知的良好精簡場景開始，構建用例，直到我們能夠重現bug為止

C.測試框架

1.QUnit

2.YUI Test

3.JsUnit

4.JUnit、TestSwarm

D.測試套件基礎知識

1.斷言：接收一個斷言的值，以及一個表示該斷言目的的描述

2.測試組：一個測試組可能代表一組斷言

E.異步測試

1.將依賴相同異步操作的斷言組合成一個統一的測試組

2.每個測試組需要那就行在一個隊列上，在先前其他的測試組完成運行之后再運行

三、函數是根基

A.函數的獨特之處

1.函數是第一型對象

• 它們可以通過字面量進行創建

• 它們可以賦值全變量、數組或其他對象的屬性

• 它們可以作為參數傳遞給函數

• 它們可以作為函數的返回值進行返回

• 它們可以擁有動態創建并賦值的屬性

2.瀏覽器的事件輪詢

• 事件在觸發時被旋轉在一個事件隊列（先進先出列表[FIFO]）中，然后瀏覽器將調用已經為這些事件建立好的處理程序 （handler）

• 瀏覽器的事件輪詢是單線程（single-threaded）的

3.回調概念

• 當我們定義一個函數稍后執行時，無論何時定義，在瀏覽器執行還是其他地方執行，我們定義的就是所謂的回調（callback）。我們定義一個函數，以便其他一些代碼在適當的時機回頭再調用它。 

4.js中的函數式特性允許我們像使用其他類型一樣，創建一個作為獨立實體的函數，并將其作為一個參數，像傳遞其他類型一樣將其傳遞給另外一個方法，而這個方法可以將該函數作為一個參數進行接收，就像接收其他類型的參數一樣

B.函數聲明

1.函數字面量

• function關鍵字

• 可選名稱

• 括號內部

• 函數體

2.作用域和函數

• 變量聲明的作用域開始于聲明的地方，結束于所在函數的結尾，與代碼嵌套無關

• 命名函數的作用域是指聲明該函數的整個函數范圍，與代碼嵌套無關（機制提升）

• 對于作用域聲明，全局上下文就像一個包含頁面所有代碼的超大型函數

C.函數調用

1.函數調用

• 作為一個函數進行調用

• 作為一個方法進行調用，在對象上進行調用，支持面向對象編程

• 作為構造器進行調用，創建一個新對象

• 通過apply()或call()方法進行調用

2.從參數到函數形參

• 如果實際傳遞的參數數量大于函數聲明的形參數量，超出的參數則不會配給形參名稱

• 如果聲明的形參數量大于實際傳遞的參數數量，則沒有對應參數的形參會賦值為undefined

• arguments參數是傳遞給函數的所有參數的一個集合，有length屬性，沒有其他數組方法，是類數組結構

• this參數引用了與該函數調用進行隱式關聯的一個對象，被稱為函數上下文（function context）

• js中this依賴于函數的調用方式

3.作為函數進行調用

• 如果一個函數不是作為方法、構造器，或通過apply()/call()進行調用的，則認為它是“作為函數”進行調用的

• 這種方式通常發生在函數上使用()操作符進行調用的時候，應用了()操作符的表達式并沒有將函數作為對象的一個屬性

• 函數的上下文是全局上下文——window對象

4.作為方法進行調用

• 當一個函數被賦值給對象的一個屬性，并使用引用該函數的這個屬性進行調用時，那么函數就是作為該對象的一個方法進行調用的

• 將函數作為對象的一個方法（method）進行調用時，該對象就變成了函數上下文，并且在函數內部可以以this參數的形式進行訪問

5.作為構造器進行調用

• 將函數作為構造器（constructor）進行調用，我們要在函數調用前使用new關鍵字

6.構造器的超能力

• 創建一個新的空對象

• 傳遞給構造器的對象是this參數，從而成為構造器的函數上下文

• 如果沒有顯式的返回值，新創建的對象則作為構造器的返回值進行返回

7.構造器編碼注意事項

• 函數和方法名通常以動詞開頭，并且是小寫字母開頭；構造器通常是描述所構造對象的名詞，以大寫字母開頭

• 通過構造器，使用相同的模式就可以更容易地創建多個對象，而無需再一遍又一遍地重復相同的代碼。通用代碼，作為構造器的構造體，只需寫一次

8.使用apply()和call()方法進行調用

• 通過函數的apply()方法來調用函數，我們要給apply()傳入兩個參數：一個是作為函數上下文的對象，另外一個是作為函數參數所組成的數組。call()方法的使用方式類似，唯一不同的是，給函數傳入的參數是一個參數列表，而不是單個數組

• 選擇哪一個？哪個方法可以提高代碼清晰度就用哪個，如果在變量里有很多無關的值或者是指定為字面量，使用call()方法則可以直接將其作為參數列表傳進去。但是如果這些參數已經在一個數組里了，或者很容易將其收集到數組里，那么apply()是更好的選擇

四、揮舞函數

A.匿名函數

1.通常匿名函數的使用情況是，創建一個供以后使用的函數。例如，將匿名函數保存在一個變量里，將其作為一個對象的方法，或者是將匿名函數作為一個回調

2.函數式編程專注于：少、通常無副作用、將函數作為程序代碼的基礎構件塊

B.遞歸

1.內聯函數（inline function），對象方法給函數起個名字。

2.遞歸引用

• 通過名稱進行引用

• 作為一個方法進行引用

• 通過內聯名稱進行引用

• 通過arguments的callee屬性進行引用

C.將函數視為對象

1.緩存記憶

• 在函數調用獲取之前計算結果的時候，最終用戶享有性能優勢

• 發生在幕后，完全無縫

• 為了提高性能，任何類型的緩存肯定會犧牲掉內存

• 很難測試或測量一個算法的性能

D.可變長度的參數列表

1.函數的length屬性

• 通過其length屬性，可以知道聲明了多少命名參數

• 通過arguments.length，可以知道在調用時傳入了多少參數

2.函數調用時，通過控制傳遞函數上下文，我們在當前對象上執行該對象沒有的方法。利用這種技術，可以利用像Array和Math上已有的方法，在自定義數據上進行操作

3.重載只適用于不同數量的參數，但并不區分類型，參數名稱或其他東西

E.函數判斷

1.通過在對象上調用typeof運算符，判斷結果是不是function，不過有跨瀏覽器的問題 

五、閉包

A.閉包是如何工作的

1.閉包（closure）是一個函數在創建時允許該自身函數訪問并操作該自身函數之外的變量時所創建的作用域。閉包可以讓函數訪問所有的變量和函數，只要這些變量和函數存在于該函數聲明時的作用域內就行

2.聲明的函數在后續什么時候都可以被調用，即使是聲明時的作用域消失之后

3.三個關于閉包的概念

• 內部函數的參數是包含在閉包中的

• 作用域之外的所有變量，即使是函數聲明之后的那些聲明，也都包含在閉包中

• 相同的作用域內，尚未聲明的變量不能進行提前引用

B.使用閉包

1.私有變量：限制變量的作用域

2.回調（callback）與計時器（timer）

3.函數在閉包里執行的時候，不僅可以在閉包創建的時刻點上看到這些變量的值，還可以對其進行更新，閉包不是在創建那一時刻點的狀態的快照，而是一個真實的狀態封裝，只要閉包存在，就可以對其進行修改

C.綁定函數上下文

1.bind()并不是apply()和call()的替代方法，該方法的潛在目的是通過匿名函數和閉包控制后續執行的上下文。這個重要的區別使apply()和call()對事件處理程序和定時器的回調進行延遲特別有幫助

D.偏應用函數

1.“分部應用”一個函數，在函數調用之前，可以預先傳入一些函數，實際上，偏應用函數返回了一個含有預處理參數的新函數，以便后期可以調用

2.這種在一個函數中首先填充幾個參數（然后再返回一個新函數）的技術稱之為柯里化（currying）

E.函數重載

1.每個函數都有自己的上下文，從而可以將上下文變成閉包的一部分

2.如果過多地利用閉包修改函數的邏輯，那會讓函數變得不可擴展

F.即時函數

1.(function(){})()，第一組圓括號僅僅是用于劃定表達式的范圍，而第二個圓括號則是一個操作符，不管第一組圓括號中是什么內容，都會將其作為函數的引用進行支持

2.執行過程

• 創建一個函數實例

• 執行該函數

• 銷毀該函數

3.由于函數是立即執行，其內部所有的函數、所有的變量都局限于其內部作用域。可以存儲數據狀態。

4.在JS中，變量的作用域依賴于變量所在的閉包

5.閉包記住的是變量的引用——而不是閉包創建時刻該變量的值

六、原型與面向對象

A.實例化和原型

1.原型可以讓我們預定義屬性，包括方法，這些屬性和方法會自動應用在新對象實例上

2.在構造器內的綁定操作優先級永遠都高于在原型上的綁定操作優先級。因為構造器的this上下文指向的是實例自身，所以我們可以在構造器內對核心內容執行初始化操作

3.查詢屬性引用時，首先是查詢對象自身，如果不存在，才在原型上進行查找

B.疑難陷阱

1.不要擴展原生Object.prototype，使用hasOwnProperty判斷屬性是對象實例上的還是原型鏈上的

2.不要擴展數字

七、正則表達式

A.正則表達式進階

1.在開發過程中，如果正則是已知的，則優先選擇字面量語法，而構造器方式則是用于在運行時，通過動態構建字符串來構建正則表達式

B.編譯正則表達式

1.每個正則表達式都有一個獨立的對象表示：每次創建正則表達式，都會為此創建一個新的正則表達式對象

C.捕獲匹配的片段

1.在全局正則表達式的情況下，匹配所有可能的匹配結果，而不僅僅是第一個匹配結果，返回的數組包含了全局匹配結果

2.exec()方法可以對一個正則進行多次調用，每次調用都可以返回下一個匹配的結果

3.要讓一組括號不進行結果捕獲，正則表達式的語法允許我們在開始括號后加一個?:標記（被動子表達式）

D.利用函數進行替換

1.replace()最強大的特性是可以接受一個函數作為替換值，參數：匹配的完整文本、匹配的捕獲、匹配字符在源字符串中的索引、源字符串

八、馴服線程和定時器

A.定時器延遲的最小化及其可靠性

1.瀏覽器不保證我們指定的延遲間隔，雖然可以指定特定的延遲值，但其準確性卻并不總是能夠保證，尤其是在延遲值很小的時候

九、忍者點金術：運行時代碼求值

A.代碼求值機制

1.用eval()方法進行求值

• 該方法將執行傳入代碼的字符串，將返回傳入字符串中最后一個表達式的執行結果

• 在調用eval()方法的作用域內進行代碼求值

• 任何不是簡單的變量、原始值、賦值語句的內容都需要在外面包裝一個括號

• 求值執行的作用域就是調用eval()時的作用域

2.用函數構造器進行求值：不會創建閉包

3.用定時器進行求值

4.全局作用域內的求值操作：將要執行的代碼放在動態的<script>標簽內，并將標簽注入到文檔中，常見的場景是從服務器端返回的代碼

5.安全的代碼求值：無解，Google Caja

B.函數反編譯

1.由函數的toString()方法來執行

C.代碼求值實戰

1.JSON轉換

2.在名稱空間內移動定義代碼

3.JS代碼的最小化及混淆操作

4.動態代碼重寫和注入

5.創建元語言

十、with語句

A.with是怎么回事

1.with語句會創建一個作用域，在該作用域內，在引用特定對象的屬性時，可以不使用前綴

2.在with語句的作用域內，對象屬性的優先級絕對高于在更高層級 作用域內定義的同名變量，作用域內的代碼意義可能是含糊不清的

3.它降低了所包含JS代碼的執行性能

十一、開發跨瀏覽器策略

A.五大開發關注點

1.瀏覽器的bug

2.瀏覽器bug修復

3.與外部代碼一起共存

• 封裝代碼

• 處理不太典范的代碼

• 避免植入屬性：hasOwnProperty()

• 貪婪ID復制

• 樣式表排序

4.缺失的功能

• 優雅降級

• 向后兼容

5.回歸

B.實現策略

1.安全的跨瀏覽器修復：對其他瀏覽器來說，沒有負面影響或副作用；不需要進行瀏覽器檢測或特性檢測；

2.對象檢測：確定某一對象或對象的屬性是否存在，如果存在，則假設它包含了暗指的功能，多用于在提供重復功能的多個API之間進行選擇

3.特征仿真：確保特征能按預期工作，為不能按預期工作的瀏覽器提供一個備用操作

4.不可檢測的瀏覽器問題

• 事件處理綁定

• 事件觸發

• CSS屬性效果

• 不一致的API

• API性能

• AJAX問題

C.減少假設

1.應該努力減少所做的假設，有效地減少出錯的可能性，以及一些會在背后攻擊我們的問題的可能性

十二、洞悉特性、屬性和樣式

A.DOM特性和DOM屬性

1.屬性：div.id，特性：div.getAttribute(“id")

2.屬性和特性需要考慮

• 跨瀏覽器命名

• 命名限制

• HTML和XML之間的差異

• 自定義特性的行為

• 性能注意事項：屬性比特性快

B.跨瀏覽器的attribute問題

1.DOM中的id/name膨脹：表單中的input元素用id和action做為id時會覆蓋表單的屬性 

2.URL規范化：在訪問同一個引用了URL的屬性時（href、src或action），該URL值會自動將原始值轉換成完整規范的URL

3.style特性

4.type特性：IE中不能修改type

5.tab index 問題：如果不顯式設置tab index，就無法獲取到一個元素的tab index

6.節點名稱：HTML中nodeName返回的都是大寫，XML或XHTML中返回正常的

C.令人頭疼的樣式特性

1.樣式屬性命名：會將CSS中的樣式轉成駝峰格式

2.float樣式：IE使用styleFloat，其他使用cssFloat

3.測量元素的高度和寬度：offsetHeight()、offsetWidth()，包括border、padding

D.獲取計算樣式

1.window.getComputedStyle()

十三、不老事件

A.綁定和解綁事件處理程序

1.addEventListener()和removeEventListener()，IE9之前使用attachEvent()和detachEvent()

B.處理程序的管理

1.集中存儲相關信息：將所有的數據保存在一個集中對象上可以避免IE瀏覽器的潛在內存泄露問題

2.管理事件處理程序

C.事件觸發

1.優點之一是，我們想創建多少就可以創建多少，并且這些處理程序是完全獨立的。

2.自定義事件是模擬真實事件的體驗，而無需得到瀏覽器底層事件的支持

D.冒泡與委托

1.委托（delegation）是表示在DOM上層定義事件處理程序，而不是在觸發事件的元素本身上定義

十四、DOM操作

1.將HTML文本片段注入到一個臨時元素的innerHTML屬性中，是一個可以將HTML文本字符串轉換成DOM元素的快速且簡單的方式

十五、CSS選擇器引擎

A.W3C Selectors API

1.使用querySelector()和querySelectorAll()

2.執行一個元素級查詢時，選擇器只檢查選擇器的最后一部分是否包含在元素中

B.利用XPath查找元素

C.純DOM實現

1.向后兼容、速度尚可、全覆蓋

上述內容就是什么是JavaScript秘籍，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。