SPA

认识SPA

SPA（Single Page Application） 单页面应用程序

​ 概念： 一个web应用中只有一个页面组成

​ 也就是说：将原来由多个页面配合完成的功能，现在使用一个页面来实现

MPA多页面应用程序（MPA Multiple Page Application）

​ 概念： 一个web应用中有多个页面组成

为什么要使用SPA？

​ 1 加载内容更少，因为一些相同的页面部分（头部、侧边栏等）不需要重复加载

​ 2 用户体验更好，可以通过 loading 效果，来告诉用户数据加载中

​ 3 减少服务器压力，因为加载内容少了，服务器需要处理的内容少了，压力就小了

SPA的劣势？

也就是 ajax 的劣势，是不利于： SEO（搜索引擎优化 百度）

​ 服务端渲染

如何使用SPA

使用的技术点

-​ 1.ajax 使用ajax异步发送请求

​- 2.哈希值 根据hash值来使用不同的功能

​- 3.hashchange事件 当前hash值发生改变后，就会执行对应的处理函数

实现的思路：

​- 1.在html页面中准备标签元素，并且设置href属性

​- 2.使用axios发送请求，利用switch实现路由的功能

​- 3.switch的判断值为location.hash，并将该过程封装成一个函数fn

​- 4.给window注册hashchange事件，调用函数fn

//html
  <div id="app">
    <ul>
      <li><a href="#/my">我的</a></li>
      <li><a href="#/find">发现</a></li>
      <li><a href="#/friend">朋友</a></li>
    </ul>
    <div class="text"></div>
  </div>

//js
let text = document.querySelector('.text');

let fn = ()=>{
    //判断location.hash的值
    switch (location.hash) {
        case "#/my":
            console.log('my');

            axios.get('./my.json').then(res=>{
                text.innerHTML=res.data.content
            });
            break;
        case "#/find":
            console.log('mfindy');

            axios.get('./find.json').then(res=>{
                text.innerHTML=res.data.content
            });
            break;
        case "#/friend":
            console.log('friend');

            axios.get('./friend.json').then(res=>{
                console.log(res.data.content);

                text.innerHTML=res.data.content
            });
            break;
        default:
            break;
    }
}
//初始化，刚进入页面调用一次
fn()
window.addEventListener('hashchange',fn);