對SPA（單頁面應用）的總結

目錄

• 一、單頁面應用（SPA）的概念：
• 二、做用（好處）
• 三、缺點
• 四、實現SPA

一、單頁面應用（SPA）的概念：

一、single-page application是一種特殊的Web應用。它將全部的活動侷限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript、CSS。一旦頁面加載完成，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉，而是利用JavaScript動態的變換HTML（採用的是div切換顯示和隱藏），從而實現UI與用戶的交互。
二、簡單來講SPA的網頁只有一個頁面，而這個網頁的實際方式要可以迴應使用者所使用的各類裝置而且賦值使用者在電腦上使用軟件的體驗，讓使用者能夠更容易和有效的使用網站。按照正常狀況下，咱們會在一個頁面中連接到其餘的不少個頁面，進行頁面的跳轉，可是若是使用單頁面應用的話，咱們始終在一個頁面中，一般使用a標籤的描點來實現。

二、做用（好處）

一、因爲避免了頁面的從新加載，SPA能夠提供較爲流暢的用戶體驗。得益於Ajax，能夠實現無跳轉刷新，因爲與瀏覽器的history機制，可使用hash的b變化從而能夠實現推進界面變化。
二、只要使用支持HTML5和CSS3的瀏覽器就能夠執行復雜的SPA,所以，開發人員沒必要爲了寫SPA網站而特別學習另外一個開發方式，而使用者也不額外安裝軟件，因此，讓開發SPA網頁程序的入門和使用門檻下降很多。

三、缺點

以SPA方式開發的網站不容易管理也不夠安全。
由於沒了一頁一頁的網頁給搜索引擎的爬蟲來爬，因此，在搜索引擎最佳化（SEO）的工做上，須要花費額外的功夫。
由於沒有換頁，須要自定義狀態來取代傳統網頁程序以網址來作判斷。

四、實現SPA

技術：
一、處理#後面的字符
二、局部刷新

一、#後面的字符

後面的字符，實際上是location對象的hash屬性的值，便是說，咱們能夠輕鬆拿到這個#後面字符的變化值，代碼以下：

var hash = location.hash;

既然值能拿到，就能夠直接經過一個a標籤跳轉。

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

二、局部刷新（Ajax）

代碼實現：

<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>