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

目錄

• 1、單頁面應用（SPA）的概念：
• 2、作用（好處）
• 3、缺點
• 4、實現SPA
  • 1、#后面的字符
  • 2、局部刷新（Ajax）

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

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

2、作用（好處）

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

3、缺點

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

4、實現SPA

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

1、#后面的字符

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

var hash = location.hash;

既然值能拿到，就可以直接通過一個a標簽跳轉。

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

2、局部刷新（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>