JavaScript中對于SPA單頁面的理解
一、什么是SPA
SPA(single-page application),翻譯過來就是單頁應用SPA
是一種網(wǎng)絡應用程序或網(wǎng)站的模型,它通過動態(tài)重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼(HTML
、JavaScript
和CSS
)都通過單個頁面的加載而檢索,或者根據(jù)需要(通常是為響應用戶操作)動態(tài)裝載適當?shù)馁Y源并添加到頁面頁面在任何時間點都不會重新加載,也不會將控制轉移到其他頁面舉個例子來講就是一個杯子,早上裝的牛奶,中午裝的是開水,晚上裝的是茶,我們發(fā)現(xiàn),變的始終是杯子里的內(nèi)容,而杯子始終是那個杯子結構如下圖
我們熟知的JS框架如react
,vue
,angular
,ember
都屬于SPA
二、SPA和MPA的區(qū)別
上面大家已經(jīng)對單頁面有所了解了,下面來講講多頁應用MPA(MultiPage-page application),翻譯過來就是多頁應用在MPA
中,每個頁面都是一個主頁面,都是獨立的當我們在訪問另一個頁面的時候,都需要重新加載html
、css
、js
文件,公共文件則根據(jù)需求按需加載如下圖
單頁應用與多頁應用的區(qū)別
單頁面應用(SPA) | 多頁面應用(MPA) | |
---|---|---|
組成 | 一個主頁面和多個頁面片段 | 多個主頁面 |
刷新方式 | 局部刷新 | 整頁刷新 |
url模式 | 哈希模式 | 歷史模式 |
SEO搜索引擎優(yōu)化 | 難實現(xiàn),可使用SSR方式改善 | 容易實現(xiàn) |
數(shù)據(jù)傳遞 | 容易 | 通過url、cookie、localStorage等傳遞 |
頁面切換 | 速度快,用戶體驗良好 | 切換加載資源,速度慢,用戶體驗差 |
維護成本 | 相對容易 | 相對復雜 |
單頁應用優(yōu)缺點
優(yōu)點:
- 具有桌面應用的即時性、網(wǎng)站的可移植性和可訪問性
- 用戶體驗好、快,內(nèi)容的改變不需要重新加載整個頁面
- 良好的前后端分離,分工更明確
缺點:
- 不利于搜索引擎的抓取
- 首次渲染速度相對較慢
三、實現(xiàn)一個SPA
- 監(jiān)聽地址欄中
hash
變化驅動界面變化 - 用
pushsate
記錄瀏覽器的歷史,驅動界面發(fā)送變化
實現(xiàn)
hash
模式
核心通過監(jiān)聽url
中的hash
來進行路由跳轉
// 定義 Router class Router { constructor () { this.routes = {}; // 存放路由path及callback this.currentUrl = ''; // 監(jiān)聽路由change調(diào)用相對應的路由回調(diào) window.addEventListener('load', this.refresh, false); window.addEventListener('hashchange', this.refresh, false); } route(path, callback){ this.routes[path] = callback; } push(path) { this.routes[path] && this.routes[path]() } } // 使用 router window.miniRouter = new Router(); miniRouter.route('/', () => console.log('page1')) miniRouter.route('/page2', () => console.log('page2')) miniRouter.push('/') // page1 miniRouter.push('/page2') // page2
history模式
history
模式核心借用HTML5 history api
,api
提供了豐富的router
相關屬性先了解一個幾個相關的api
history.pushState
瀏覽器歷史紀錄添加記錄history.replaceState
修改瀏覽器歷史紀錄中當前紀錄history.popState
當history
發(fā)生變化時觸發(fā)
// 定義 Router class Router { constructor () { this.routes = {}; this.listerPopState() } init(path) { history.replaceState({path: path}, null, path); this.routes[path] && this.routes[path](); } route(path, callback){ this.routes[path] = callback; } push(path) { history.pushState({path: path}, null, path); this.routes[path] && this.routes[path](); } listerPopState () { window.addEventListener('popstate' , e => { const path = e.state && e.state.path; this.routers[path] && this.routers[path]() }) } } // 使用 Router window.miniRouter = new Router(); miniRouter.route('/', ()=> console.log('page1')) miniRouter.route('/page2', ()=> console.log('page2')) // 跳轉 miniRouter.push('/page2') // page2
四、如何給SPA做SEO
下面給出基于Vue
的SPA
如何實現(xiàn)SEO
的三種方式
SSR服務端渲染
將組件或頁面通過服務器生成html,再返回給瀏覽器,如nuxt.js
靜態(tài)化
目前主流的靜態(tài)化主要有兩種:
(1)一種是通過程序將動態(tài)頁面抓取并保存為靜態(tài)頁面,這樣的頁面的實際存在于服務器的硬盤中
(2)另外一種是通過WEB服務器的URL Rewrite
的方式,它的原理是通過web服務器內(nèi)部模塊按一定規(guī)則將外部的URL請求轉化為內(nèi)部的文件地址,一句話來說就是把外部請求的靜態(tài)地址轉化為實際的動態(tài)頁面地址,而靜態(tài)頁面實際是不存在的。
這兩種方法都達到了實現(xiàn)URL靜態(tài)化的效果
使用Phantomjs
針對爬蟲處理
原理是通過Nginx
配置,判斷訪問來源是否為爬蟲,如果是則搜索引擎的爬蟲請求會轉發(fā)到一個node server
,再通過PhantomJS
來解析完整的HTML
,返回給爬蟲。下面是大致流程圖
到此這篇關于JavaScript中對于SPA單頁面的理解的文章就介紹到這了,更多相關JS SPA單頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
強大的JavaScript響應式圖表Chartist.js的使用
本篇文章主要介紹了強大的JavaScript響應式圖表Chartist.js的使用,具有一定的參考價值,有興趣的可以了解一下2017-09-09js調(diào)試系列 斷點與動態(tài)調(diào)試[基礎篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎知識,支持亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法,需要的朋友可以參考下2014-06-06用javascript實現(xiàn)自動輸出網(wǎng)頁文本
這篇文章主要介紹了用javascript實現(xiàn)自動輸出網(wǎng)頁文本,用到兩個函數(shù):setTimeout(),遞歸和String.substring();,需要的朋友可以參考下2015-07-07JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果
這篇文章主要介紹了JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果,涉及JavaScript彈出窗口的實現(xiàn)及頁面元素屬性動態(tài)變換的相關技巧,需要的朋友可以參考下2016-03-03用Javascript實現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09JavaScript 處理Iframe自適應高度(同或不同域名下)
Iframe自適應高度一直都備受關注,接下來為大家介紹下同域名下Iframe自適應高度的處理以及跨域時Iframe高度自適應,感興趣的朋友可以參考下哈2013-03-03