目錄

• 1、單頁面應(yīng)用（SPA）的概念：
• 2、作用（好處）
• 3、缺點
• 4、實現(xiàn)SPA

1、單頁面應(yīng)用（SPA）的概念：

1、single-page application是一種特殊的Web應(yīng)用。它將所有的活動局限于一個Web頁面中，僅在該Web頁面初始化時加載相應(yīng)的HTML、JavaScript、CSS。一旦頁面加載完成，SPA不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)，而是利用JavaScript動態(tài)的變換HTML（采用的是div切換顯示和隱藏），從而實現(xiàn)UI與用戶的交互。
2、簡單來說SPA的網(wǎng)頁只有一個頁面，而這個網(wǎng)頁的實際方式要能夠回應(yīng)使用者所使用的各種裝置并且賦值使用者在電腦上使用軟件的體驗，讓使用者可以更容易和有效的使用網(wǎng)站。按照正常情況下，我們會在一個頁面中鏈接到其他的很多個頁面，進行頁面的跳轉(zhuǎn)，但是如果使用單頁面應(yīng)用的話，我們始終在一個頁面中，通常使用a標(biāo)簽的描點來實現(xiàn)。

2、作用（好處）

1、由于避免了頁面的重新加載，SPA可以提供較為流暢的用戶體驗。得益于Ajax，可以實現(xiàn)無跳轉(zhuǎn)刷新，由于與瀏覽器的history機制，可以使用hash的b變化從而可以實現(xiàn)推動界面變化。
2、只要使用支持HTML5和CSS3的瀏覽器就可以執(zhí)行復(fù)雜的SPA,因此，開發(fā)人員不必為了寫SPA網(wǎng)站而特別學(xué)習(xí)另一個開發(fā)方式，而使用者也不額外安裝軟件，所以，讓開發(fā)SPA網(wǎng)頁程序的入門和使用門檻降低不少。

3、缺點

以SPA方式開發(fā)的網(wǎng)站不容易管理也不夠安全。
因為沒了一頁一頁的網(wǎng)頁給搜索引擎的爬蟲來爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花費額外的功夫。
因為沒有換頁，需要自定義狀態(tài)來取代傳統(tǒng)網(wǎng)頁程序以網(wǎng)址來做判斷。

4、實現(xiàn)SPA

技術(shù)：
1、處理#后面的字符
2、局部刷新

1、#后面的字符

后面的字符，其實是location對象的hash屬性的值，即是說，我們可以輕松拿到這個#后面字符的變化值，代碼如下：

var hash = location.hash;

既然值能拿到，就可以直接通過一個a標(biāo)簽跳轉(zhuǎn)。

<a href="#luoxuan">羅旋</a>; <a href="#xiexing">謝星</a>; <a href="#luoli">羅粒</a>; <a href="#luobo">羅卜</a>;

2、局部刷新（Ajax）

代碼實現(xiàn)：

<script>window.addEventListener('haschange',function(){var hash = document.location.hash;switch(hash){case '#luoxuan':$.ajax({url:'./json/luoxaun.json',success:function(){document.write("羅旋是小仙女！！！")}});break;case '#xiexing':$.ajax({url:'./json/xiexing.json',success:function(){document.write("謝星是個帥哥哥哦~~~")}});break;}}) </script>

轉(zhuǎn)載于:https://www.cnblogs.com/hixxcom/p/7741689.html

總結(jié)

以上是生活随笔為你收集整理的对SPA（单页面应用）的总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。