JavaScript從前端到后端開發單頁Web應用的過程

這篇文章給大家介紹JavaScript從前端到后端開發單頁Web應用的過程，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

一、第一個單頁應用

https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html

二、溫故JavaScript

A.高級變量提升和執行環境對象

1.提升：JS引擎在進入作用域時，會對代碼分兩輪處理。第一輪，初始化變量；第二輪，執行代碼。

第一輪：聲明并初始化函數參數；聲明局部變量，包括將匿名函數賦給一個局部變更，但并不初始化它們；聲明并初始化函數。

2.每當函數被調用的時候，就會產生一個執行環境。所有函數中定義的變量和函數都是執行環境的一部分。JS把變量作為屬性保存在一個對象上，這個對象稱為執行環境對象。

3.JS把聲明和初始化的變量當作執行環境對象的屬性。

4.由于可以在執行環境中調用函數，會產生很多層的深度。在執行環境中調用函數，會創建一個新的嵌套在已存在的執行環境內的執行環境

• 在<script>標簽內的所有東西都在全局執行環境中

• 調用first_function，會在全局執行環境中創建一個新的執行環境

• 在first_function中調用second_function，會在first_function中創建一個執行環境。second_function有權限訪問在first_function的執行環境以及全局執行環境

• 在全局中調用second_function，沒有權限訪問first_function中的執行環境

B.作用域鏈

1.JS引擎首先在局部執行環境對象上查找。如果沒有定義，則跳出作用域鏈，到創建它的執行環境中去，并且在該執行環境對象中查找變量的定義，依此類推，走到找到定義或者到達全局作用域為止。

C.JavaScript對象和原型鏈

1.JS對象是基于原型（prototype-based）的，我們創建的對象，看起來像我們想要的所有這種類型的對象那樣，然后告訴JS引擎，我們想要更多像這樣的對象。

2.使用Object.create來創建JS對象時，能增添一種更像是基于原型的感覺，它把原型作為參數并返回一個對象，使用這種方式，可以在原型對象上定義共同的屬性和方法，然后使用它來創建多個共享相同屬性的對象。

3.原型鏈描述了JS引擎如何從對象查找到原型以及原型的原型，來定位對象的屬性值。如果JS引擎在對象的原型上找不到該屬性，它就查找原型的原型，依此類推。當JS到達能用的（generic）Object的原型，原型鏈就結束了。如果JS在原型鏈上的所有地方都找不到請求的屬性，則返回undefined。

4.原型上的屬性就像是從原型創建的對象上的靜態變量

D.函數——更深入的窺探

1.函數是JS中的第一類（first-class）對象。它們可以保存在變量中，可以有屬性甚至可以作為參數傳給調用函數。它們用于控制變量作用域以及提供私有變量和方法。

2.閉包是阻止垃圾回收器將變量從內存中移除的方法，使得在創建變量的執行環境的外面能夠訪問到該變量

3.必須記住，每次調用函數時都會創建一個唯一的執行環境對象。函數執行完后，執行對象就被丟棄，除非調用者引用 了它。如果函數返回的是一個數字，就不能引用函數的執行環境對象，但是，如果函數返回的是一個更復雜的結構，像是函數對象或者數組，將返回值保存到一個變量上，就創建了一個對執行環境的引用。

三、開發Shell

1.Shell是單頁應用的主控制器（master controller）

• 渲染和管理功能容器

• 管理應用狀態

• 協調功能模塊

2.使用URI來驅動頁面狀態的解決方案，自然就錨接口模式（anchor interface pattern）

3.錨接口工具：https://github.com/mmikowski/urianchor

使用獨立的（independent）和關聯的（dependent）鍵值對的概念來編碼

http://……spa.html#!profile=on:uid,suzie|status,green，表示

{

profile:’on’,

_profile={

    uid:’suzie’,

    status:’green'

}

}

4.#!，表示可以被搜索引擎索引

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/3/spa

四、添加功能模塊

1.把功能模塊當作第三方模塊來開發

團隊更加高效，開發人員可以根據模塊來劃分職責

應用常常表現良好，模塊只管理它們所負責的應用部分

代碼維護和重用變得更加容易，因為模塊被很好地隔離了

2.分形MVC（FMVC）：分形是一種模式，它在所有層級上顯示為自相似性（self-similarity）。在多個層級上采用重復的MVC就是分形MVC

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/4/spa

五、構建Model

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/5/spa

六、完成Model和Data模塊

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/6/spa

七、Web服務器

1.傳統Web服務器，比如Apache，是比較弱的消息服務器，它們會為每個連接創建和分配一個進程（或者線程），并且只要鏈接保持著，進程就必須“活著”。它的理念是在響應請求時，盡可能快地把數據推出去，然后盡可能地關閉連接。

2.Node.js是一個非常出色的消息服務器。由于事件模型（event model），它不會為每個鏈接創建一個進程。當打開或關閉連接的時候，會進行記錄，在打開和關閉連接期間會做些維護工作。因此在一般的硬件上能夠處理幾萬甚至幾十萬的并發連接。

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/7/spa

八、服務器數據庫

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/8/spa

九、單頁應用發布準備

附錄A、JavaScript編碼標準

A.代碼布局和注釋

1.使用一致的縮進和行長

• 每級代碼縮進兩個空格

• 使用空格縮進而不是制表符，因為制表符的位置還沒有標準

• 每行限制為78個字符

2.按段落組織代碼

• 按邏輯段落組織代碼，段落之間要空行

• 每一行最多只包含一條語句或賦值語句，但是允許每行同時聲明多個變量

• 運算符和變量之間要有空格，這樣就能更容易地識別變量

• 每個逗號之后要有空格

• 在段落內，相似的運算符要對齊

• 縮進注釋，縮進量和所解釋的代碼相同

• 每條語句的最后要有分號

• 在一個控制結構中的所有語句要用大括號括起來

3.換行要一致

• 在運算符的前面換行，因為人們檢查 左列的所有運算符是很容易的

• 把后續的語句縮進一個層次

• 在逗號分隔符的后面換行

• 方括號或者括號單獨占一行

4.使用K&R風格的括號

• 如果可能，就使用單行

• 把左括號、左花括號或者左方括號放在開始行的末尾

• 在分隔符（括號、花括號或者方括號）的里面把代碼縮進一個層級 

• 右括號、右花括號或者右方括號單獨占一行

5.使用空格來區別函數和關鍵字

• 函數名后面沒有空格

• 關鍵字后面空一格

• 當格式化for語句的時候，在每個分號的后面空一格

6.引號要一致

7.注釋解釋代碼策略

8.給API和TODO添加文檔

• 解釋后有重要的函數

• 如果彬了代碼，要解釋為什么

B.變量名

1.使用常見字符

• 變量名使用a-z、A-Z、0-9、下劃線和$符號

• 變量名不要以數字開頭

2.傳達變量作用域

• 當變量作用域是整個模塊時使用駝峰式

• 當變量作用域不是整個模塊時使用下劃線

• 確保所有模塊作用域內的變量至少有兩個音節

3.要意識到變量類型是很重要的

4.命名布爾變量：使用單詞is

5.命名字符串變量：str、id、date、html、msg、name、text、type

6.命名整型變量：int、count、index、i,j,k、time

7.命名數字變量：num、x,y,z、coord、ratio

8.命名正則變量：regex

9.命名數組變量：list

10.命名映射變量：map

11.命名對象變量：單名詞、模塊作用域的對象變量名具有兩個或兩個以上音節、jQuery對象有前綴$

12.命名函數變量：遵循動詞+名詞的形式（fn、curry、destory/remove、empty、fetch、get、make、on、save、set、store、update）、模塊作用域兩個或兩個以上音節

13.命名未知類型的變量：包含data

C.變量聲明和賦值

1.創建新對象、映射或數組時，使用{}或[]，不要用new Object()或new Array()

2.使用工具方法復制對象和數組

3.一開始就在函數作用域內，使用單個var關鍵字，顯式地聲明所有的變量

4.不要使用塊：JS沒有塊作用域

5.把所有函數賦給變量

6.當函數需要三個以上的參數時，使用具名參數（named arguments），因為位置參數的含義容易忘記且不能進行自我說明

7.每條變量賦值語句點用一行

D.函數

1.使用工廠模式構造對象

2.避免偽類對象構造器：即不要使用new關鍵字來構造偽類，如果忘記new關鍵字，就會破壞全局名字空間，如果要使用請首字母大寫

3.所有的函數在使用之前都要先聲明

4.當函數被立即調用的時候，用括號將它包起來

E.名字空間

1.使用單一的全局函數，把其他所有變量的作用域限制在該函數里面，就可以極大減少全局變量污染

F.文件名和布局

1.名字空間：

• 使用jQuery來操作DOM

• 在構建自己的插件之前，先研究一下有沒有第三方代碼庫

• 避免在HTML中嵌入JS

• 在上線前，對JS和CSS進行壓縮（minify）、混淆和gzip壓縮

2.JS文件：

• 在HTML中，先引入第三方JS文件

• 接著引入 我們自己的JS文件

• 所有JS文件的后綴都為.js

• 把所有的靜態JS文件保存在叫做js的目錄下

• 根據名字空間來命名JS文件

• 使用模板來創建所有的JS模板文件

3.JS文件與CSS文件與類名之間保持平行結構

• 為會生成HTML的每個JS文件創建一個CSS文件

• 所有CSS文件的后綴都為.css

• 把所有的CSS文件保存在叫做css的目錄下

• 給CSS選擇器加上模塊名前綴

• 狀態指示器使用<名字空間>-x<描述符>和其他共享的類名

G.語法

1.標簽：語句的標簽（label）是可選的，只有while、for和switch需要，應總使用大寫，而且是單名詞

2.語句：

• continue除非使用了標簽，應該盡量避免使用

• do語句結尾要分號

• if的else應該另起一行

• return不要加括號，表達式和return關鍵字要在一行避免自動分號

• while語句要盡量避免使用，容易產生死循環

• with應該避免使用

3.其他語法

• 避免逗號運算符

• 避免賦值表達式

• 總是使用===和!==

• 避免混亂的加號和減號

• 不要使用eval：不要使用eval，不要使用Function構造器，不要向setTimeout和setInterval傳遞字符串

附錄B.測試單頁應用

• jasmine-query：可以“監視”jQuery事件

• mocha：流行的，和nodeunit類似，但測試報告要更好

• nodeunit：流行的，簡單卻強大的工具

• patr：使用promise進行異步測試

• vows：流行的異步BDD框架

• zombie：流行的、基于Webkit引擎的無頭瀏覽器，可以測試完整的應用

關于JavaScript從前端到后端開發單頁Web應用的過程就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。