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