单页应用解析-优快云博客

1.什么是单页应用

单页应用是整个webapp就一个html文件，全程无刷新，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能，所以叫单页面。

2.单页应用的实现

实际上只在一个页面处理所有业务。但在用户视觉上却呈现多个页面的效果，多个页面的效果由js控制拼接完成，所以本能的浏览器上的历史记录前进后退无效，也因无刷新页面而使用户体验良好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 地址  #/  显示  首页界面 -->
    <!-- 地址  #/my  显示  我的音乐界面 -->
    <!-- 地址  #/friend  显示  朋友界面 -->
    <div id="app">
        <!-- 顶部导航 -->
        <nav>
          <a href="#/">首页</a>
          <a href="#/my">我的音乐</a>
          <a href="#/friend">朋友</a>
        </nav>
        <!-- 显示对应界面 需要根据hash地址的不同来渲染-->
        <div id="page">

        </div>
    </div>
    
</body>
<script src="./js/vue.js"></script>
<script>
    // 初始化渲染
    // 1. 获取hash值
    // 2. 判断不同的hash值
    // 3. 页面中插入不同的页面内容
    function render(){
        // 获取hash地址，给 location.hash 赋值就是修改hash地址
        let hash = location.hash;
        //去除#，更美观更像地址
        let path = hash.replace('#','');

        // 判断path渲染不同界面
        switch(path){
            case '/':
                document.getElementById('page').innerHTML = '<b>首页</b>';
                break;
            case '/my':
                document.getElementById('page').innerHTML = '<b>我的音乐</b>';
                break;
            case '/friend':
                document.getElementById('page').innerHTML = '<b>朋友</b>';
                break;
            default:
                break; 
        }
    }

    render();
     // 切换hash的时候渲染
     window.onhashchange = function(){
         // 当hash地址发生改变的时候会执行
         console.log(location.hash)
        // 根据当前的hash重新渲染即可
        render();
     }
    const vm = new Vue({
        el:'#app'
    });
</script>
</html>

3.单页应用的优缺点

优点：
1、前后端分离，前端负责界面显示，后端负责数据存储和计算，各司其职，开发效率更高
2、减轻服务器压力，服务器只需要提供api调用即可，无需处理页面合成及页面逻辑。
3、同一套后端代码，无需即可用于Web界面、手机、平板等多种客户端；
缺点：
1、SEO问题，现在可以通过Prerender等技术解决一部分；
2、前进、后退、地址栏等，需要程序进行管理；
3、书签，需要程序来提供支持；