单页面应用程序(SPA)

一、概念

①在一个页面上实现网站的大部分功能，就是单页面应用程序，是一种常见的网页开发模式。

②整个网站就只有一个Html文件，每次在切换页面时，不需要请求服务器，只要通过本地的js来切换即可。这样可以减小服务器压力、增强用户体验，增加app的使用流畅性。

二、特点

①优点：

具有桌面应用的即时性、网站的可移植性和可访问性。
用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
基于上面一点，SPA相对对服务器压力小。
良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
对前端人员javascript技能要求更高，促使团队技能提升。

②缺点：

分功能模块的鉴权不好实现。
不利于SEO搜索引擎优化
初次加载耗时相对增多
导航不可用，如果一定要导航需要自行实现前进、后退。
对开发人员技能水平、开发成本高。

三、具体应用

①单页应用肯定是要使用一些框架的，比如Vue、Angular、React等，但是使用 Vue、Angular、React 也不一定是做单页，做单页一定是前后端分离的方式，如果有 SEO 需求，则不要做成单页

②具体使用的网站：网易云音乐、coding、Gmail等

四、模拟单页应用

①historyAPI方案，参考之前的章：历史相关API

②哈希（路由）方案：使用location.hash和hashchange事件实现路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模拟单页面应用</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #f7f7f7;
            font-family: Arial, Helvetica, sans-serif;
        }
        header{
            background: #242424;
            border-bottom: #000;
        }
        .wrapper{
            width: 1100px;
            height: 70px;
            margin: 0 auto;
        }
        .wrapper h1{
            float: left;
            width: 176px;
            height: 69px;
            background: url("topbar.png") no-repeat 0 0;
            font-size: 0;
        }
        .wrapper ul{
            list-style: none;
        }
        .wrapper ul li{
            float: left;
            height: 70px;
        }
        .wrapper ul li.now,
        .wrapper ul li:hover{
            background: red;
        }
        .wrapper ul li a{
            padding: 0 20px;
            display: block;
            color: #fff;
            line-height: 70px;
            text-decoration: none;
        }
        .content{
            width: 1100px;
            margin: 0 auto;
            font-size: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="wrapper">
            <h1>网易云音乐</h1>
            <ul>
                <!-- 为了和普通的锚点作区分，所以这里的路径加了一个前缀# -->
                <li><a href="#/">发现音乐</a></li>
                <li><a href="#/my">我的音乐</a></li>
                <li><a href="#/friend">朋友</a></li>
            </ul>
        </div>
    </header>
    <!-- 其它页面都需要显示在这个容器中 -->
    <div class="container" id="container"></div>
    <script src="jquery.js"></script>
    <script>
    // 通过注册 window.onhashchange 事件来监听 hahs（锚点）的改变
    // url 地址发生改变之后,就解析 hash 中的路径标识
    // 然后根据不同的路径标识渲染不同的页面到单页面中的容器中
    window.onhashchange=function(){
        var hash=window.location.hash.substr(1);//去除#
        if(hash==='/'){
            $.get('./find.html',function(data){
                $('#container').html(data);
                console.log(data)
            });
        }else if(hash==='/my'){
            $.get('./my.html',function(data){
                $('#container').html(data);
            });
        }else if(hash==='/friend'){
            $.get('./friend.html',function(data){
                $('#container').html(data);
            });
        }
    }
    </script>   
</body>
</html>