Ⅰ 認識單頁面應用
coding
teambition
cloud9
注意這幾個網站的相同點，那就是在瀏覽器中，做了原先「應當」在客戶端做的事情。它們的界面切換非常流暢，響應很迅速，跟傳統的網頁明顯不一樣，它們是什麼呢？這就是單頁Web應用。
單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。（使用js控制渲染來替換html跳轉）
單頁應用程序 (SPA) 是載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
瀏覽器一開始會載入必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。
因此，對單頁面應用來說，模塊化的開發和設計顯得相當重要。
原理：JS會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然後將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是後端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應用，每次跳轉的時候不需要再請求html文件了。
單頁面應用的優缺點：
優點：
1、用戶操作體驗好，用戶不用刷新頁面，整個交互過程都是通過Ajax來操作。
2、適合前後端分離開發，服務端提供http介面，前端請求http介面獲取數據，使用JS進行客戶端渲染。
缺點：
1、首頁載入慢
單頁面應用會將js、 css打包成一個文件，在載入頁面顯示的時候載入打包文件，如果打包文件較大或者網速慢則用戶體驗不好
2、SEO不友好
SEO（Search Engine Optimization）為搜索引擎優化。它是一種利用搜索引擎的搜索規則來提高網站在搜索引擎排名的方法。目前各家搜索引擎對JS支持不好，所以使用單頁面應用將大大減少搜索引擎對網站的收錄。
1、Hash模式：（也就是通過錨點？）
這里的 hash 就是指 url 後的 # 號以及後面的字元。比如說 " www..com/#hashhash " ，其中 "#hashhash" 就是我們期望的 hash 值。
hash 值的變化不會導致瀏覽器像伺服器發送請求，而且hash 的改變會觸發 hashChange 事件，瀏覽器的前進後退也能對其進行控制，所以在 H5 的 history 模式出現之前，基本都是使用 hash 模式來實現前端路由。
2、History模式
在 HTML5 之前，瀏覽器就已經有了 history 對象。但在早期的 history 中只能用於多頁面的跳轉。
在 HTML5 的規范中，history 新增了以下幾個 API：
hash模式和history模式對比
1、hash 模式相比於 history 模式的優點：
兼容性更好，可以兼容到IE8
無需服務端配合處理非單頁的url地址
2、hash 模式相比於 history 模式的缺點：
看起來更丑。
會導致錨點功能失效。
相同 hash 值不會觸發動作將記錄加入到歷史棧中，而 pushState 則可以。
引用：
https://www.cnblogs.com/ppforever/p/5126640.html
https://www.jianshu.com/p/0c32c85c668b
https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1
Ⅱ 單網頁應用的前端框架都有哪些
所謂單頁應用，指的是在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，所有的業務功能都是它的子模塊，通過特定的方式掛接到主界面上。它是AJAX技術的進一步升華，把AJAX的無刷新機制發揮到極致，因此能造就與桌面程序媲美的流暢用戶體驗。
開發框架
ExtJS可以稱為第一代單頁應用框架的典型，它封裝了各種UI組件，用戶主要使用JavaScript來完成整個前端部分，甚至包括布局。隨著功能逐漸增加，ExtJS的體積也逐漸增大，即使用於內部系統的開發，有時候也顯得笨重了，更不用說開發以上這類運行在互聯網上的系統。
jQuery由於偏重DOM操作，它的插件體系又比較鬆散，所以比ExtJS這個體系更適合開發在公網運行的單頁系統，整個解決方案會相對比較輕量、靈活。
但由於jQuery主要面向上層操作，它對代碼的組織是缺乏約束的。如何在代碼急劇膨脹的情況下控制每個模塊的內聚性，並且適當在模塊之間產生數據傳遞與共享，就成為了一種有挑戰的事情。
為了解決單頁應用規模增大時候的代碼邏輯問題，出現了不少MV*框架，他們的基本思路都是在JS層創建模塊分層和通信機制。有的是MVC，有的是MVP，有的是MVVM，而且，它們幾乎都在這些模式上產生了變異，以適應前端開發的特點。
這類框架包括Backbone，Knockout，AngularJS，Avalon等。
Ⅲ 單頁應用和多頁應用的區別
單頁應用
簡單來說就是一個HTML的應用。瀏覽器一開始就會載入應用必須的HTML、CSS、JS資源。其後的操作都是由js控制來實現的。路由是有前端來控制
優點：操作體驗流暢
前端組件化開發
前後端分離，實現API多用共享
缺點：首屏渲染載入資源多。
不利於搜索引擎，因為內容是動態生成的。
多頁應用
是包含多個獨立的HTML頁面的應用，每次頁面跳轉，後端都會返回一個HTML頁面。路由由後端控制。
優點：有利於搜索引擎
相對來說首屏載入速度快
缺點： 頁面切換效率低
Ⅳ 構建單頁面應用前端人員需要哪些方法
所謂單頁應用，指的是在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，所有的業務功能都是它的子模塊，通過特定的方式掛接到主界面上。它是AJAX技術的進一步升華，把AJAX的無刷新機制發揮到極致，因此能造就與桌面程序媲美的流暢用戶體驗。
開發框架
ExtJS可以稱為第一代單頁應用框架的典型，它封裝了各種UI組件，用戶主要使用JavaScript來完成整個前端部分，甚至包括布局。隨著功能逐漸增加，ExtJS的體積也逐漸增大，即使用於內部系統的開發，有時候也顯得笨重了，更不用說開發以上這類運行在互聯網上的系統。
jQuery由於偏重DOM操作，它的插件體系又比較鬆散，所以比ExtJS這個體系更適合開發在公網運行的單頁系統，整個解決方案會相對比較輕量、靈活。
但由於jQuery主要面向上層操作，它對代碼的組織是缺乏約束的。如何在代碼急劇膨脹的情況下控制每個模塊的內聚性，並且適當在模塊之間產生數據傳遞與共享，就成為了一種有挑戰的事情。
為了解決單頁應用規模增大時候的代碼邏輯問題，出現了不少MV*框架，他們的基本思路都是在JS層創建模塊分層和通信機制。有的是MVC，有的是MVP，有的是MVVM，而且，它們幾乎都在這些模式上產生了變異，以適應前端開發的特點。
這類框架包括Backbone，Knockout，AngularJS，Avalon等。
組件化
這些在前端做分層的框架推動了代碼的組件化，所謂組件化，在傳統的Web產品中，更多的指UI組件，但其實組件是一個廣泛概念，傳統Web產品中UI組件佔比高的原因是它的厚度不足，隨著客戶端代碼比例的增加，相當一部分的業務邏輯也前端化，由此催生了很多非界面型組件的出現。
分層帶來的一個優勢是，每層的職責更專一了，由此，可以對其作單元測試的覆蓋，以保證其質量。傳統UI層測試最頭疼的問題是UI層和邏輯混雜在一起，比如往往會在遠程請求的回調中更改DOM，當引入分層之後，這些東西都可以分別被測試，然後再通過場景測試來保證整體流程。
代碼隔離
與開發傳統頁面型網站相比，實現單頁應用的過程中，有一些比較值得特別關注的點。
從單頁應用的特點來看，它比頁面型網站更加依賴於JavaScript，而由於頁面的單頁化，各種子功能的JavaScript代碼聚集到了同一個作用域，所以代碼的隔離、模塊化變得很重要。
在單頁應用中，頁面模板的使用是很普遍的。很多框架內置了特定的模板，也有的框架需要引入第三方的模板。這種模板是界面片段，我們可以把它們類比成JavaScript模塊，它們是另一種類型的組件。
模板也一樣有隔離的需要。不隔離模板，會造成什麼問題呢？模板間的沖突主要存在於id屬性上，如果一個模板中包含固定的id，當它被批量渲染的時候，會造成同一個頁面的作用域中出現多個相同id的元素，產生不可預測的後果。因此，我們需要在模板中避免使用id，如果有對DOM的訪問需求，應當通過其他選擇器來完成。如果一個單頁應用的組件化程度非常高，很可能整個應用中都沒有元素id的使用。
代碼合並與載入策略
人們對於單頁系統的載入時間容忍度與Web頁面不同，如果說他們願意為購物頁面的載入等待3秒，有可能會願意為單頁應用的首次載入等待5-10秒，但在此之後，各種功能的使用應當都比較流暢，所有子功能頁面盡量要在1-2秒時間內切換成功，否則他們就會感覺這個系統很慢。
從這些特點來看，我們可以把更多的公共功能放到首次載入，以減小每次載入的載入量，有一些站點甚至把所有的界面和邏輯全部放到首頁載入，每次業務界面切換的時候，只產生數據請求，因此它的響應是非常迅速的，比如青雲的控制台就是這么做的。
通常在單頁應用中，無需像網站型產品一樣，為了防止文件載入阻塞渲染，把js放到html後面載入，因為它的界面基本都是動態生成的。
當切換功能的時候，除了產生數據請求，還需要渲染界面，這個新渲染的界面部件一般是界面模板，它從哪裡來呢？來源無非是兩種，一種是即時請求，像請求數據那樣通過AJAX獲取過來，另一種是內置於主界面的某些位置，比如script標簽或者不可見的textarea中，後者在切換功能的時候速度有優勢，但是加重了主頁面的負擔。
在傳統的頁面型網站中，頁面之間是互相隔離的，因此，如果在頁面間存在可復用的代碼，一般是提取成單獨的文件，並且可能會需要按照每個頁面的需求去進行合並。單頁應用中，如果總的代碼量不大，可以整體打包一次在首頁載入，如果大到一定規模，再作運行時載入，載入的粒度可以搞得比較大，不同的塊之間沒有重復部分。
路由與狀態的管理
管理路由的目的是什麼呢？是為了能減少用戶的導航成本。比如說我們有一個功能，經歷過多次導航菜單的點擊，才呈現出來。如果用戶想要把這個功能地址分享給別人，他怎麼才能做到呢？
傳統的頁面型產品是不存在這個問題的，因為它就是以頁面為單位的，也有的時候，服務端路由處理了這一切。但是在單頁應用中，這成為了問題，因為我們只有一個頁面，界面上的各種功能區塊是動態生成的。所以我們要通過對路由的管理，來實現這樣的功能。
具體的做法就是把產品功能劃分為若干狀態，每個狀態映射到相應的路由，然後通過pushState這樣的機制，動態解析路由，使之與功能界面匹配。
有了路由之後，我們的單頁面產品就可以前進後退，就像是在不同頁面之間一樣。
其實在Web產品之外，早就有了管理路由的技術方案，Adobe Flex中，就會把比如TabNavigator，甚至下拉框的選中狀態對應到url上，因為它也是單「頁面」的產品模式，需要面對同樣的問題。
緩存與本地存儲
在單頁應用的運作機制中，緩存是一個很重要的環節。
由於這類系統的前端部分幾乎全是靜態文件，所以它能夠有機會利用瀏覽器的緩存機制，而比如動態載入的界面模板，也完全可以做一些自定義的緩存機制，在非首次的請求中直接取緩存的版本，以加快載入速度。
甚至，也出現了一些方案，在動態載入JavaScript代碼的同時，把它們也緩存起來。比如Addy Osmani的這個basket.js，就利用了HTML5 localStorage作了js和css文件的緩存。
在單頁產品中，業務代碼也常常會需要跟本地存儲打交道，存儲一些臨時數據，可以使用localStorage或者localStorageDB來簡化自己的業務代碼。
服務端通信
傳統的Web產品通常使用JSONP或者AJAX這樣的方式與服務端通信，但在單頁Web應用中，有很大一部分採用WebSocket這樣的實時通訊方式。
WebSocket與傳統基於HTTP的通信機制相比，有很大的優勢。它可以讓服務端很便利地使用反向推送，前端只響應確實產生業務數據的事件，減少一遍又一遍無意義的AJAX輪詢。
由於WebSocket只在比較先進的瀏覽器上被支持，有一些庫提供了在不同瀏覽器中的兼容方案，比如http://socket.io，它在不支持WebSocket的瀏覽器上會降級成使用AJAX或JSONP等方式，對業務代碼完全透明、兼容。
內存管理
傳統的Web頁面一般是不需要考慮內存的管理的，因為用戶的停留時間相對少，即使出現內存泄漏，可能很快就被刷新頁面之類的操作沖掉了，但單頁應用是不同的，它的用戶很可能會把它開一整天，因此，我們需要對其中的DOM操作、網路連接等部分格外小心。
樣式的規劃
樣式規劃主要是幾個方面：
基準樣式的分離
這裡面主要包括瀏覽器樣式的重設、全局字體的設置、布局的基本約定和響應式支持。
組件樣式的劃分
這裡面是兩個層面的規劃，首先是各種界面組件及其子元素的樣式，其次是一些修飾樣式。組件樣式應當盡量減少互相依賴，各組件的樣式允許冗餘。
堆疊次序的管理
傳統Web頁面的特點是元素多，但是層次少，單頁應用會有些不同。
Ⅳ 網站設計是單頁還是多頁好
單頁網站優勢：
單頁網站最直接的好處是以簡單，容易和可操作的方式展示給用戶。
單頁站點可以讓用戶沉浸在簡單的線性體驗。整個頁面有簡單的頭部，中部，尾部。事實上，單頁網站的滾動特性使得它們非常適合於習慣了該手勢的移動用戶。有些專家認為，與較大的多頁網站相比，單頁網站的轉化率更高。
劣勢：
單頁網站最大的劣勢就是陷入把過多的內容放置在一個頁面里。因為一個頁面不可能容納所有的一切。而是需要有視覺層次和大量的規范制約。隨著內容類別的增加（例如博客，新聞，服務，產品），單頁網站的可用性越高。從技術的角度來看，單頁網站的搜索優化比多頁網站少。當一個頁面上的內容和圖像很多時，他們會載入很慢。對搜索的內容查詢。雖然單頁網站可能會提高您的主要關鍵字的相關性，但更有可能會稀釋其在自己的網頁上排名更高或次之的子主題和字詞的相關性。
多頁網站：多頁網站通常由擁有廣泛產品或服務的大公司所有。 他們的用戶也可能是相當多樣化，這些網站的要點是：需要盡可能大容量；由於內容的數量，他們需要層次分明；很多時候，它們由許多微型網站和子部分組成，以分解信息和內容，並提供多個入口點；它們提供對多個頁面和改變內容的SEO的更好控制。
優勢：
多頁網站對於需要傳統導航的用戶來說很有意義。他們需要給用戶提供更多的信息。例如，對於電子商務網站，用戶不想花費一個頁面了解您公司的故事或員工。而是想要找到想要的產品，付費然後使用。在這種情況下，到不同頁面的導航欄就會非常有效。
劣勢：如果設計的網站越復雜，傳統導航就越難展示和查找。
總結：採取內容優先的方法。 找出用戶關心的內容，然後相應地設計您的界面。
確保你的網站適合純粹的單頁體驗。 如果你不能把所有內容簡潔的放入一個頁面，請考慮混合網站。 如果需要用戶知道多個類別，請使用多頁網站。
不要忽視SEO， 可以用單頁網站建立搜索引擎優化。
用戶不總是喜歡閱讀， 這就是為什麼信息圖表和視頻是新用戶體驗的一部分。 任何大小的網站都需要使用戶可以快速瀏覽。
把事情簡單化， 設計的一致性實際上對用戶來說操作更簡單。
網站的清晰度很重要。
Ⅵ 前端都干什麼的
前端即網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。
前端技術一般分為前端設計和前端開發。
1、前端設計一般可以理解為網站的視覺設計。
2、前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高級版本HTML5、CSS3，以及SVG等。
(6)前端單頁指什麼擴展閱讀：
HTML、CSS、JavaScript這三個是前端開發中最基本也是最必須的三個技能。
1、HTML
HTML指的是超文本標記語言 (Hyper Text Markup Language)，這個也是我們網頁最常用普通的語言了，得力於W3C建立的標准和規范，已普遍升級到了XHTML，XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。
2、CSS
級聯樣式表（Cascading Style Sheet）簡稱「CSS」，通常又稱為「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。
3、JavaScript
JavaScript是一種由Netscape的LiveScript發展而來的原型化繼承的面向對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是為了解決伺服器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。
Ⅶ 什麼是單頁網站
單頁網站是指只有一個頁面的網站。
製作網站的工具和語言分很多種，其中用於做網頁的包括HTML、JSP、asp、PHP等，但是要能單獨顯示的只有HTML。
網上也有很多製作單頁網站的模板，如果想要製作單頁網站，可以參考網路經驗：http://jingyan..com/article/7908e85c7cb247af481ad296.html，按照步驟製作即可。
Ⅷ 印刷類單頁·拆頁指的是什麼
單頁是指它的頁碼只有1-2
拆頁是指它的頁碼最少有1-4
Ⅸ web前端開發，主要工作內容有哪些特點呢
隨著互聯網全面進入移動時代，前端已逐漸成為互聯網行業的重要角色。前端是做什麼的？工作內容是什麼？簡單來說，前端所做的就是在用戶終端上實現產品的UI設計，可以說，用戶看到的所有視覺和交互都是前端的范疇。根據這個定義，我們可以把前端的工作內容概括為配合開發和UI設計部門完成前端頁面的開發，並根據產品需求負責前端應用的維護和優化。
因此，要想真正掌握Web前端開發技術，靈活運用到企業項目中，還需要你能真正接觸到一些企業項目，了解前後台的交互，然而這需要的時間是不可估量的。視覺設計師在設計圖紙的基礎上，利用HTML和CSS合作創建頁面。同時，在此基礎上，完成頁面維護和網站前端性能優化。此外，一個合格的前端開發工程師，應該具備一定的審美能力和基本的美術操作能力，能夠很好地與交互和視覺合作。
小編針對問題做得詳細解讀，希望對大家有所幫助，如果還有什麼問題可以在評論區給我留言，大家可以多多和我評論，如果哪裡有不對的地方，大家也可以多多和我互動交流，如果大家喜歡作者，大家也可以關注我哦，您的點贊是對我最大的幫助，謝謝大家了。
Ⅹ 1.單頁面應用程序
下面構建一個簡單的 todo list 來展現多頁
後台
後台只需要設計好以下數據介面，讓前端可以訪問
Get： http://127.0.0.1:3000/todos
Post： http://127.0.0.1:3000/todos
前端
前端直接使用 ajax 非同步請求後台的介面請求數據後渲染頁面
index.html （渲染 todo list）
add.html （輸入 todo 點擊保存後跳轉 index.html）
上述例子可以看出來前端後台職責明確，但多頁需要整個頁面重新渲染
單頁開發可以通過增加 hash 進行頁面標識（類似錨點），通過 window.onhashchange 事件判斷 hash 值改變，進而通過 window.location.hash 獲取 hash 值渲染對應的局部頁面。（本案例服務端介面同前）
index.html
myTodoList.html
add.html
通過上述方式可以實現單頁，但是這種方式有缺陷，在操作 DOM 元素進行渲染的過程中，不同頁面的 DOM 元素很可能沖突，一旦頁面多了同樣難以維護，因此誕生了三大前端框架：