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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,湄潭企業(yè)網(wǎng)站建設,湄潭品牌網(wǎng)站建設,網(wǎng)站定制,湄潭網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,湄潭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一、第一個單頁應用

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

二、溫故JavaScript

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

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

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

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

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

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

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

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

• 在first_function中調(diào)用second_function，會在first_function中創(chuàng)建一個執(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)境對象上查找。如果沒有定義，則跳出作用域鏈，到創(chuàng)建它的執(zhí)行環(huán)境中去，并且在該執(zhí)行環(huán)境對象中查找變量的定義，依此類推，走到找到定義或者到達全局作用域為止。

C.JavaScript對象和原型鏈

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

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

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

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

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

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

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

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

三、開發(fā)Shell

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

• 渲染和管理功能容器

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

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

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

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

使用獨立的（independent）和關聯(lián)的（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.把功能模塊當作第三方模塊來開發(fā)

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

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

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

2.分形MVC（FMVC）：分形是一種模式，它在所有層級上顯示為自相似性（self-similarity）。在多個層級上采用重復的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服務器

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

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

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

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

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

九、單頁應用發(fā)布準備

附錄A、JavaScript編碼標準

A.代碼布局和注釋

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

• 每級代碼縮進兩個空格

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

• 每行限制為78個字符

2.按段落組織代碼

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

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

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

• 每個逗號之后要有空格

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

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

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

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

3.換行要一致

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

• 把后續(xù)的語句縮進一個層次

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

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

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

• 如果可能，就使用單行

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

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

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

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

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

• 關鍵字后面空一格

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

6.引號要一致

7.注釋解釋代碼策略

8.給API和TODO添加文檔

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

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

B.變量名

1.使用常見字符

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

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

2.傳達變量作用域

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

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

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

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

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.命名對象變量：單名詞、模塊作用域的對象變量名具有兩個或兩個以上音節(jié)、jQuery對象有前綴$

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

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

C.變量聲明和賦值

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

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

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

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

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

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

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

D.函數(shù)

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

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

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

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

E.名字空間

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

F.文件名和布局

1.名字空間：

• 使用jQuery來操作DOM

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

• 避免在HTML中嵌入JS

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

2.JS文件：

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

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

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

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

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

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

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

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

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

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

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

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

G.語法

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

2.語句：

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

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

• if的else應該另起一行

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

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

• with應該避免使用

3.其他語法

• 避免逗號運算符

• 避免賦值表達式

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

• 避免混亂的加號和減號

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

附錄B.測試單頁應用

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

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

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

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

• vows：流行的異步BDD框架

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

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

當前文章：JavaScript從前端到后端開發(fā)單頁Web應用的過程
標題路徑：http://vcdvsql.cn/article40/peipho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、ChatGPT、網(wǎng)站排名、品牌網(wǎng)站建設、靜態(tài)網(wǎng)站、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)