对SPA（单页面应用）的总结

最新推荐文章于 2024-08-21 10:55:40 发布

Mr_温少

最新推荐文章于 2024-08-21 10:55:40 发布

阅读量861

点赞数

分类专栏：前端笔记文章标签： SPA 前端 H5

前端笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对SPA（单页面应用）的总结

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>