单页面应用程序(SPA)

时间 2019-11-17

标签页面应用程序 spa 繁體版

原文原文链接

1、概念

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

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

2、特色

①优势：前端

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

②缺点：java

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

3、具体应用

①单页应用确定是要使用一些框架的，好比Vue、Angular、React等，可是使用 Vue、Angular、React 也不必定是作单页，作单页必定是先后端分离的方式，若是有 SEO 需求，则不要作成单页jquery

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

4、模拟单页应用

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