一、什么是SPA
SPA（single-page application），翻譯過來就是單頁應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動態(tài)重寫當(dāng)前頁面來與用戶交互，這種方法避免了頁面之間切換打斷用戶體驗在單頁應(yīng)用中，所有必要的代碼（HTML、JavaScript和CSS）都通過單個頁面的加載而檢索，或者根據(jù)需要（通常是為響應(yīng)用戶操作）動態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁面頁面在任何時間點都不會重新加載，也不會將控制轉(zhuǎn)移到其他頁面舉個例子來講就是一個杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們發(fā)現(xiàn)，變的始終是杯子里的內(nèi)容，而杯子始終是那個杯子結(jié)構(gòu)如下圖
我們熟知的JS框架如react,vue,angular,ember都屬于SPA
二、SPA和MPA的區(qū)別
上面大家已經(jīng)對單頁面有所了解了，下面來講講多頁應(yīng)用MPA（MultiPage-page application），翻譯過來就是多頁應(yīng)用在MPA中，每個頁面都是一個主頁面，都是獨(dú)立的當(dāng)我們在訪問另一個頁面的時候，都需要重新加載html、css、js文件，公共文件則根據(jù)需求按需加載如下圖
單頁應(yīng)用與多頁應(yīng)用的區(qū)別
單頁應(yīng)用優(yōu)缺點
優(yōu)點：
-
具有桌面應(yīng)用的即時性、網(wǎng)站的可移植性和可訪問性
-
用戶體驗好、快，內(nèi)容的改變不需要重新加載整個頁面
-
良好的前后端分離，分工更明確
缺點： -
不利于搜索引擎的抓取
-
首次渲染速度相對較慢
三、實現(xiàn)一個SPA
原理
監(jiān)聽地址欄中hash變化驅(qū)動界面變化
用pushsate記錄瀏覽器的歷史，驅(qū)動界面發(fā)送變化
實現(xiàn)
hash 模式
核心通過監(jiān)聽url中的hash來進(jìn)行路由跳轉(zhuǎn)
// 定義 Router
class Router {
constructor () {
this.routes = {}; // 存放路由path及callback
this.currentUrl = '';
// 監(jiān)聽路由change調(diào)用相對應(yīng)的路由回調(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 相關(guān)屬性先了解一個幾個相關(guān)的api
- history.pushState 瀏覽器歷史紀(jì)錄添加記錄
- history.replaceState修改瀏覽器歷史紀(jì)錄中當(dāng)前紀(jì)錄
- history.popState 當(dāng) 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'))
// 跳轉(zhuǎn)
miniRouter.push('/page2') // page2
四、題外話：如何給SPA做SEO
下面給出基于Vue的SPA如何實現(xiàn)SEO的三種方式
SSR服務(wù)端渲染
將組件或頁面通過服務(wù)器生成html，再返回給瀏覽器，如nuxt.js
四、題外話：如何給SPA做SEO
下面給出基于Vue的SPA如何實現(xiàn)SEO的三種方式
SSR服務(wù)端渲染
將組件或頁面通過服務(wù)器生成html，再返回給瀏覽器，如nuxt.js
靜態(tài)化
目前主流的靜態(tài)化主要有兩種：（1）一種是通過程序?qū)討B(tài)頁面抓取并保存為靜態(tài)頁面，這樣的頁面的實際存在于服務(wù)器的硬盤中（2）另外一種是通過WEB服務(wù)器的 URL Rewrite的方式，它的原理是通過web服務(wù)器內(nèi)部模塊按一定規(guī)則將外部的URL請求轉(zhuǎn)化為內(nèi)部的文件地址，一句話來說就是把外部請求的靜態(tài)地址轉(zhuǎn)化為實際的動態(tài)頁面地址，而靜態(tài)頁面實際是不存在的。這兩種方法都達(dá)到了實現(xiàn)URL靜態(tài)化的效果
使用Phantomjs針對爬蟲處理
原理是通過Nginx配置，判斷訪問來源是否為爬蟲，如果是則搜索引擎的爬蟲請求會轉(zhuǎn)發(fā)到一個node server，再通過PhantomJS來解析完整的HTML，返回給爬蟲
目前主流的靜態(tài)化主要有兩種：（1）一種是通過程序?qū)討B(tài)頁面抓取并保存為靜態(tài)頁面，這樣的頁面的實際存在于服務(wù)器的硬盤中（2）另外一種是通過WEB服務(wù)器的 URL Rewrite的方式，它的原理是通過web服務(wù)器內(nèi)部模塊按一定規(guī)則將外部的URL請求轉(zhuǎn)化為內(nèi)部的文件地址，一句話來說就是把外部請求的靜態(tài)地址轉(zhuǎn)化為實際的動態(tài)頁面地址，而靜態(tài)頁面實際是不存在的。這兩種方法都達(dá)到了實現(xiàn)URL靜態(tài)化的效果文章來源：http://www.zghlxwxcb.cn/news/detail-684652.html
使用Phantomjs針對爬蟲處理
原理是通過Nginx配置，判斷訪問來源是否為爬蟲，如果是則搜索引擎的爬蟲請求會轉(zhuǎn)發(fā)到一個node server，再通過PhantomJS來解析完整的HTML，返回給爬蟲文章來源地址http://www.zghlxwxcb.cn/news/detail-684652.html
到了這里，關(guān)于你對SPA單頁面的理解，它的優(yōu)缺點分別是什么？如何實現(xiàn)SPA應(yīng)用呢？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
