JavaScript從前端到后端開發(fā)單頁Web應(yīng)用的過程

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

一、第一個(gè)單頁應(yīng)用

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

二、溫故JavaScript

A.高級(jí)變量提升和執(zhí)行環(huán)境對(duì)象

1.提升：JS引擎在進(jìn)入作用域時(shí)，會(huì)對(duì)代碼分兩輪處理。第一輪，初始化變量；第二輪，執(zhí)行代碼。

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

2.每當(dāng)函數(shù)被調(diào)用的時(shí)候，就會(huì)產(chǎn)生一個(gè)執(zhí)行環(huán)境。所有函數(shù)中定義的變量和函數(shù)都是執(zhí)行環(huán)境的一部分。JS把變量作為屬性保存在一個(gè)對(duì)象上，這個(gè)對(duì)象稱為執(zhí)行環(huán)境對(duì)象。

3.JS把聲明和初始化的變量當(dāng)作執(zhí)行環(huán)境對(duì)象的屬性。

4.由于可以在執(zhí)行環(huán)境中調(diào)用函數(shù)，會(huì)產(chǎn)生很多層的深度。在執(zhí)行環(huán)境中調(diào)用函數(shù)，會(huì)創(chuàng)建一個(gè)新的嵌套在已存在的執(zhí)行環(huán)境內(nèi)的執(zhí)行環(huán)境

• 在<script>標(biāo)簽內(nèi)的所有東西都在全局執(zhí)行環(huán)境中

• 調(diào)用first_function，會(huì)在全局執(zhí)行環(huán)境中創(chuàng)建一個(gè)新的執(zhí)行環(huán)境

• 在first_function中調(diào)用second_function，會(huì)在first_function中創(chuàng)建一個(gè)執(zhí)行環(huán)境。second_function有權(quán)限訪問在first_function的執(zhí)行環(huán)境以及全局執(zhí)行環(huán)境

• 在全局中調(diào)用second_function，沒有權(quán)限訪問first_function中的執(zhí)行環(huán)境

B.作用域鏈

1.JS引擎首先在局部執(zhí)行環(huán)境對(duì)象上查找。如果沒有定義，則跳出作用域鏈，到創(chuàng)建它的執(zhí)行環(huán)境中去，并且在該執(zhí)行環(huán)境對(duì)象中查找變量的定義，依此類推，走到找到定義或者到達(dá)全局作用域?yàn)橹埂?/p>

C.JavaScript對(duì)象和原型鏈

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

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

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

4.原型上的屬性就像是從原型創(chuàng)建的對(duì)象上的靜態(tài)變量

D.函數(shù)——更深入的窺探

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

2.閉包是阻止垃圾回收器將變量從內(nèi)存中移除的方法，使得在創(chuàng)建變量的執(zhí)行環(huán)境的外面能夠訪問到該變量

3.必須記住，每次調(diào)用函數(shù)時(shí)都會(huì)創(chuàng)建一個(gè)唯一的執(zhí)行環(huán)境對(duì)象。函數(shù)執(zhí)行完后，執(zhí)行對(duì)象就被丟棄，除非調(diào)用者引用 了它。如果函數(shù)返回的是一個(gè)數(shù)字，就不能引用函數(shù)的執(zhí)行環(huán)境對(duì)象，但是，如果函數(shù)返回的是一個(gè)更復(fù)雜的結(jié)構(gòu)，像是函數(shù)對(duì)象或者數(shù)組，將返回值保存到一個(gè)變量上，就創(chuàng)建了一個(gè)對(duì)執(zhí)行環(huán)境的引用。

三、開發(fā)Shell

1.Shell是單頁應(yīng)用的主控制器（master controller）

• 渲染和管理功能容器

• 管理應(yīng)用狀態(tài)

• 協(xié)調(diào)功能模塊

2.使用URI來驅(qū)動(dòng)頁面狀態(tài)的解決方案，自然就錨接口模式（anchor interface pattern）

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

使用獨(dú)立的（independent）和關(guān)聯(lián)的（dependent）鍵值對(duì)的概念來編碼

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.把功能模塊當(dāng)作第三方模塊來開發(fā)

團(tuán)隊(duì)更加高效，開發(fā)人員可以根據(jù)模塊來劃分職責(zé)

應(yīng)用常常表現(xiàn)良好，模塊只管理它們所負(fù)責(zé)的應(yīng)用部分

代碼維護(hù)和重用變得更加容易，因?yàn)槟K被很好地隔離了

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

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

五、構(gòu)建Model

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

六、完成Model和Data模塊

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

七、Web服務(wù)器

1.傳統(tǒng)Web服務(wù)器，比如Apache，是比較弱的消息服務(wù)器，它們會(huì)為每個(gè)連接創(chuàng)建和分配一個(gè)進(jìn)程（或者線程），并且只要鏈接保持著，進(jìn)程就必須“活著”。它的理念是在響應(yīng)請(qǐng)求時(shí)，盡可能快地把數(shù)據(jù)推出去，然后盡可能地關(guān)閉連接。

2.Node.js是一個(gè)非常出色的消息服務(wù)器。由于事件模型（event model），它不會(huì)為每個(gè)鏈接創(chuàng)建一個(gè)進(jìn)程。當(dāng)打開或關(guān)閉連接的時(shí)候，會(huì)進(jìn)行記錄，在打開和關(guān)閉連接期間會(huì)做些維護(hù)工作。因此在一般的硬件上能夠處理幾萬甚至幾十萬的并發(fā)連接。

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

八、服務(wù)器數(shù)據(jù)庫

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

九、單頁應(yīng)用發(fā)布準(zhǔn)備

附錄A、JavaScript編碼標(biāo)準(zhǔn)

A.代碼布局和注釋

1.使用一致的縮進(jìn)和行長(zhǎng)

• 每級(jí)代碼縮進(jìn)兩個(gè)空格

• 使用空格縮進(jìn)而不是制表符，因?yàn)橹票矸奈恢眠€沒有標(biāo)準(zhǔn)

• 每行限制為78個(gè)字符

2.按段落組織代碼

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

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

• 運(yùn)算符和變量之間要有空格，這樣就能更容易地識(shí)別變量

• 每個(gè)逗號(hào)之后要有空格

• 在段落內(nèi)，相似的運(yùn)算符要對(duì)齊

• 縮進(jìn)注釋，縮進(jìn)量和所解釋的代碼相同

• 每條語句的最后要有分號(hào)

• 在一個(gè)控制結(jié)構(gòu)中的所有語句要用大括號(hào)括起來

3.換行要一致

• 在運(yùn)算符的前面換行，因?yàn)槿藗儥z查 左列的所有運(yùn)算符是很容易的

• 把后續(xù)的語句縮進(jìn)一個(gè)層次

• 在逗號(hào)分隔符的后面換行

• 方括號(hào)或者括號(hào)單獨(dú)占一行

4.使用K&R風(fēng)格的括號(hào)

• 如果可能，就使用單行

• 把左括號(hào)、左花括號(hào)或者左方括號(hào)放在開始行的末尾

• 在分隔符（括號(hào)、花括號(hào)或者方括號(hào)）的里面把代碼縮進(jìn)一個(gè)層級(jí) 

• 右括號(hào)、右花括號(hào)或者右方括號(hào)單獨(dú)占一行

5.使用空格來區(qū)別函數(shù)和關(guān)鍵字

• 函數(shù)名后面沒有空格

• 關(guān)鍵字后面空一格

• 當(dāng)格式化for語句的時(shí)候，在每個(gè)分號(hào)的后面空一格

6.引號(hào)要一致

7.注釋解釋代碼策略

8.給API和TODO添加文檔

• 解釋后有重要的函數(shù)

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

B.變量名

1.使用常見字符

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

• 變量名不要以數(shù)字開頭

2.傳達(dá)變量作用域

• 當(dāng)變量作用域是整個(gè)模塊時(shí)使用駝峰式

• 當(dāng)變量作用域不是整個(gè)模塊時(shí)使用下劃線

• 確保所有模塊作用域內(nèi)的變量至少有兩個(gè)音節(jié)

3.要意識(shí)到變量類型是很重要的

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

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

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

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

8.命名正則變量：regex

9.命名數(shù)組變量：list

10.命名映射變量：map

11.命名對(duì)象變量：?jiǎn)蚊~、模塊作用域的對(duì)象變量名具有兩個(gè)或兩個(gè)以上音節(jié)、jQuery對(duì)象有前綴$

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

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

C.變量聲明和賦值

1.創(chuàng)建新對(duì)象、映射或數(shù)組時(shí)，使用{}或[]，不要用new Object()或new Array()

2.使用工具方法復(fù)制對(duì)象和數(shù)組

3.一開始就在函數(shù)作用域內(nèi)，使用單個(gè)var關(guān)鍵字，顯式地聲明所有的變量

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

5.把所有函數(shù)賦給變量

6.當(dāng)函數(shù)需要三個(gè)以上的參數(shù)時(shí)，使用具名參數(shù)（named arguments），因?yàn)槲恢脜?shù)的含義容易忘記且不能進(jìn)行自我說明

7.每條變量賦值語句點(diǎn)用一行

D.函數(shù)

1.使用工廠模式構(gòu)造對(duì)象

2.避免偽類對(duì)象構(gòu)造器：即不要使用new關(guān)鍵字來構(gòu)造偽類，如果忘記new關(guān)鍵字，就會(huì)破壞全局名字空間，如果要使用請(qǐng)首字母大寫

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

4.當(dāng)函數(shù)被立即調(diào)用的時(shí)候，用括號(hào)將它包起來

E.名字空間

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

F.文件名和布局

1.名字空間：

• 使用jQuery來操作DOM

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

• 避免在HTML中嵌入JS

• 在上線前，對(duì)JS和CSS進(jìn)行壓縮（minify）、混淆和gzip壓縮

2.JS文件：

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

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

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

• 把所有的靜態(tài)JS文件保存在叫做js的目錄下

• 根據(jù)名字空間來命名JS文件

• 使用模板來創(chuàng)建所有的JS模板文件

3.JS文件與CSS文件與類名之間保持平行結(jié)構(gòu)

• 為會(huì)生成HTML的每個(gè)JS文件創(chuàng)建一個(gè)CSS文件

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

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

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

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

G.語法

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

2.語句：

• continue除非使用了標(biāo)簽，應(yīng)該盡量避免使用

• do語句結(jié)尾要分號(hào)

• if的else應(yīng)該另起一行

• return不要加括號(hào)，表達(dá)式和return關(guān)鍵字要在一行避免自動(dòng)分號(hào)

• while語句要盡量避免使用，容易產(chǎn)生死循環(huán)

• with應(yīng)該避免使用

3.其他語法

• 避免逗號(hào)運(yùn)算符

• 避免賦值表達(dá)式

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

• 避免混亂的加號(hào)和減號(hào)

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

附錄B.測(cè)試單頁應(yīng)用

• jasmine-query：可以“監(jiān)視”jQuery事件

• mocha：流行的，和nodeunit類似，但測(cè)試報(bào)告要更好

• nodeunit：流行的，簡(jiǎn)單卻強(qiáng)大的工具

• patr：使用promise進(jìn)行異步測(cè)試

• vows：流行的異步BDD框架

• zombie：流行的、基于Webkit引擎的無頭瀏覽器，可以測(cè)試完整的應(yīng)用

關(guān)于JavaScript從前端到后端開發(fā)單頁Web應(yīng)用的過程就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。