前端单页面应用

时间: 2020-05-15阅读: 128标签: 应用

1、概念

什么是单页应用呢?单页应用的全称是 single-page application,简称 SPA,它是一种网站应用的模型,它可以动态重写当前的页面来与用户交互,而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用,单页应用做到了前后端分离,后端只负责处理数据提供接口,页面逻辑和页面渲染都交给了前端。前端发展到现在,单页应用的使用已经很广泛,目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权,也让前端代码更复杂和庞大,模块化、组件化以及架构设计都变得越来越重要。


2、工作原理

SPA 的一个重要实现就是改变路由时,页面不刷新。实现这个功能,通常有两种方式:使用 window.history 对象或 location.hash。


3、history 对象

window.history 包含了浏览器的历史信息,它有以下几种常用方法:

history.back():与在浏览器点击后退按钮相同;

history.forward():与在浏览器中点击按钮向前相同;

history.go(n):接受一个整数作为参数,移动到该整数指定的页面,比如 go(1) 相当于 forward(),go(-1) 相当于 back(),go(0) 相当于刷新当前页面。

HTML5 对 history 对象新增了 pushState() 和 replaceState() 方法,这两个方法可以往历史栈中添加数据,给用户的感觉就是浏览器的 url 改变了,但是页面并没有重新加载。pushState() 是在浏览记录中添加一个新记录,replaceState() 则是修改当前的浏览器记录,这是二者的细微差别,使用时参数的字段和含义都是一样的。

window.history.pushState(state, title, url)

state 是状态对象,可以用 history.state 读取;title 表示新页面的标题,但是现在的所有浏览器都会忽略这个字段,所以可以传 null;url 是新页面的地址,必须是和当前页面在同一个域。当用户点击浏览器上的前进和后退按钮时,或者调用上述 window.history 的 back、forward 和 go 方法,就会触发 popstate 事件。该事件只针对同一个文档,如果浏览历史的切换导致加载了不同的文档,popstate 事件将不会被触发。popstate 事件回调函数的参数中的 state 属性指向 pushState() 和 replaceState() 方法为当前页面提供的状态,也就是 pushState() 和 replaceState() 方法使用时传的第一个参数 state。


4、hash

hash 是 location 对象的属性,它指的是当前 url 的锚,也就是从 # 号开始的部分。修改 location.hash 并监听 window 的 hashchange 事件,也能达到同样的目的。


5、优缺点

SPA 可圈可点,现在已被大家广泛使用,也得到了主流框架的支持,但是它也有局限性,我们将它的优缺点总结如下。

优点有:

无刷新体验,用户在切换页面过程中不会频繁被“打断”,因为界面框架都在本地,对用户的响应非常及时,因此提升了用户体验;

分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起;

减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;

API 共享,同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;

完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整。

缺点有:

对 SEO 不太优好,尽管可以通过 Prerender 预渲染优化等技术解决一部分,但是相对还是不容易索引到它;易出错,需要使用程序管理前进、后退、地址栏等信息;

来自:https://www.cnblogs.com/zjt-blogs/p/12922714.html

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9067

vue开发中的几个高级应用

我们使用的第三方 Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将Vue作为参数传入。该方法需要在调用new Vue()之前被调用。

开发Web应用,Go语言比Python更有优势!

随着Golang的日益普及,它是否取代Python?接下来让我们一起看看Go的优点,以及它与Python的区别。在Web开发的世界里,敏捷才是王道。使用更少的费用和资源来更快地完成网站和网络应用,从而获得更多的竞争优势。

如何构建可伸缩的Web应用?

想象一下,你的营销活动吸引了很多用户,在某个时候,应用必须同时为成千上万的用户提供服务,这么大的并发量,服务器的负载会很大,如果设计不当,系统将无法处理。接下来发生的就是,随机错误、缓慢的内容加载

一文读尽前端路由、后端路由、单页面应用、多页面应用

通过用户请求的url导航到具体的html页面;每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,然后和模板组合,返回HTML,也可以是直接返回模板HTML,然后由前端js再去请求数据

JS实现简易计算器的7种方法

主要为大家详细介绍了js实现简易计算器功能,制作能进行加减乘除的计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

你的下一款应用可能没有后端

开发者现在正在再次构建静态网站。你可能会把这种现象称为尼采的永恒轮回在 Web 开发行业的映射。但这次情况有所不同:拜更新的 HTML、JavaScript、CSS 标准和 API 所赐,Web 浏览器的能力大大超过了 20 年前

Js位操作及其应用

我在看lodash实现一些工具函数的源码时发现lodash定义了一些bitMask的常量。我一开始没弄明这是什么鬼东西,用Google搜了一圈才发现是我之前接触过得位操作运算一类的东西。并且源码和我搜索的资料给我提供了另一种使用场景

如何加快 Node.js 应用的启动速度?

我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时看起来也没有什么问题。

BFC的作用及其应用

BFC就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。

多数程序员难以简单的方式开发应用?

心理学中有一篇相当古老、但又非常重要的论文,题为《魔法数字七(上下浮动二):人类信息处理能力中的一些限制》。这篇文章衡量了大脑处理信息的极限,并给出了一个具体的数字:人脑可以同时容纳五到九个概念

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广