一、概念

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

②整个网站就只有一个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>

单页面应用程序(SPA)的更多相关文章

  1. 通过Blazor使用C#开发SPA单页面应用程序(1)

    2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...

  2. 通过Blazor使用C#开发SPA单页面应用程序(3)

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

  3. 单页面应用程序（SPA）的优缺点

    我们通常所说的单页面应用程序通常通过前端框架(angular.react.vue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScr ...

  4. SPA 单页面应用程序。

    看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现 ...

  5. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  6. Vue系列（1）：单页面应用程序

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history api 路由跳转.ajax 响应.按需加载 ...

  7. Vue（6）- Vue-router进阶、单页面应用（SPA）带来的问题

    一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...

  8. Vue --6 router进阶、单页面应用（SPA）带来的问题

    一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...

  9. Oracle JET 单页面应用程序Router 使用（上）

    单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...

随机推荐

  1. C# 获取特殊日期

    //1.当前时间DateTime dt = DateTime.Now; //2.本周周一DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.D ...

  2. 使用Powershell实现自动化安装/卸载程序

    最近需要制作软件安装包,需要附带VC运行时和.Net Framework的安装,但又不想让用户自己点下一步,所以就有了以下操作. 微软提供了一个程序叫msiexec.exe,位于C:\Windows\ ...

  3. KindEditor 简单使用笔记

    1.在官网下载最新版本  http://kindeditor.net/demo.php 2.在页面中加上如下代码 <textarea id="editor_id" name= ...

  4. golang中生成读取二维码(skip2/go-qrcode和boombuler/barcode，tuotoo/qrcode)

     1 引言 在github上有好用golan二维码生成和读取库,两个生成二维码的qrcode库和一个读取qrcode库. skip2/go-qrcode生成二维码,github地址:https://g ...

  5. JVM性能优化--字节码技术

    一.字节码技术应用场景 AOP技术.Lombok去除重复代码插件.动态修改class文件等 二.字节技术优势 Java字节码增强指的是在Java字节码生成之后,对其进行修改,增强其功能,这种方式相当于 ...

  6. 2019 蚂蚁金服java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.蚂蚁金服等公司offer,岗位是Java后端开发,因为发展原因最终选择去了蚂蚁金服,入职一年时间了,也成为了面 ...

  7. 安装仪表盘控件Iocomp会遇到的几个常见问题

    相信从事HMI和自动化开发专业的小伙伴在使用工业仪表盘和图表控件时,都很熟悉怎么安装和操作Iocomp产品(毕竟它功能太强大了,基本人手一份的节奏),但是小编想肯定还是有很多和小编一样的入门的伙伴在安 ...

  8. Alpha_4

    一. 站立式会议照片 二. 工作进展 (1) 昨天已完成的工作 a. 我的·主界面设计 b. 番茄钟的页面及音乐选择弹窗页面设计 c. 实现自定义习惯和设置新习惯的功能页面,并可预览 d.已实现番茄钟 ...

  9. Python使用numpy进行数据转换

    一.测试数据 二.代码实现 # -*- coding: utf-8 -*- """ Created on Sun Jul 7 11:35:01 2019 加载数据时对指定 ...

  10. CH340g使用说明详解

    用串口和CH340模块都可以让计算机和单片机进行通信,但是使用CH340更加方便,省去了使用串口的麻烦 CH340是一个USB总线的转接芯片,实现USB转串口.USB转IrDA红外或者USB转打印口. ...