单页面应用(SPA)

此篇我们来瞅一瞅SPA,啥是SPA啊,实际上一点也不神秘,就是单页应用,可能有的同学又会问了,啥是单页面应用,别着急,我们慢慢来看

首先我们先来了解一下单页应用出现背景

背景:

在早期的 Web 应用中,前端的作用很弱,业务逻辑和数据处理都在后端,后端给前端返回一个 HTML 页面,前端只负责展示。在这种模式下,单个 HTML 页面被当做一个功能原件,表单提交,超链接跳转都可以用来重新请求新的 HTML 页面,从而达到给用户展示新的页面的目的。在这种方式中,你可以感觉到页面总是在不停的刷新,一个点击可能都需要等待很久,这是因为,当页面变化时,所有资源都需要重新请求。这些问题导致了用户体验不佳,也浪费了资源。单页应用便很好的解决了这些问题

概念:

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

工作原理:

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

  

  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)

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

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

优缺点:

  优点有:

  • 无刷新体验,用户在切换页面过程中不会频繁被“打断”,因为界面框架都在本地,对用户的响应非常及时,因此提升了用户体验;
  • 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起;
  • 减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
  • API 共享,同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;
  • 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整。

  缺点有:

  • 对 SEO 不太优好,尽管可以通过 Prerender 预渲染优化等技术解决一部分,但是相对还是不容易索引到它;
  • 易出错,需要使用程序管理前进、后退、地址栏等信息;
  • 较高的前端开发门槛,对技术能力要求较高,需要对设计模式有一定理解,因为面对不是一个简单的页面,而是一个运行在浏览器环境里面的桌面软件。

  转载自:https://www.yuque.com/fe9/basic/ag975a

原文地址:https://www.cnblogs.com/suihang/p/10522092.html

时间: 2024-11-06 07:49:46

单页面应用(SPA)的相关文章

PushState+Ajax实现简单的单页面应用SPA

http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速度快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,从而相对减轻了服务器压力,SPA在WEB移动端应用非常广泛. 我们在上一篇文章Javascript实现前端简单路由中提到的前端路由,可以在不刷新整个页面的情况下,通过变换地址栏的hash来实现页面局部加载. 今天我要给大家介绍的是

单页面应用SPA架构

个人认为单页面应用的优势相当明显: 前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理. 前后端单独开发.单独测试. 良好的交互体验,前端进行的是局部渲染.避免了不必要的跳转和重复渲染. 当然,SPA也有它自身的缺点,例如不利于搜索引擎优化等等,这些问题也有其相应的解决方案. 下面要介绍的这种方式可以说是一种模式或者工作流,和前端使用什么框架无关,也和后端使用什么语言.数据库无关.不能说是The Best Practice,我相信经过更多人的讨论和思考会有A Better Practi

单页面应用SPA和多页面应用MPA

单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js.css等)仅需加载一次 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 多页面应用(MultiPage Application,MPA) 多页面跳转刷新所有资源,每个公共资源(js.css等)需选择性重新加载 摘自: https://juejin.im/post/5a0ea4ec6fb9

angular(3)服务 --注入---自定义模块--单页面应用

ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei/blog/issues/10 1.ng提供了许多内置的服务,例如常用的$scope\$http\$window\$location等. http:POST请求: var app = angular.module('myApp', ['ng']); app.run(function($http){

AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关键. 1.单页面webApp 为什么叫单页面webApp?因为它是单页面的....额...关键在于我们看到的不少webApp是多页面的啊,可以从一页跳到另一页.嗯,看起来是这样,不过实际上这几页实际还是一个页面,因为它们是一次性加载进来的,至于为啥会有跳转效果呢?嗯,有点儿像选项卡,嗯.其实现原理在

单页面应用的路由问题

一.概念 单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序. 一旦页面被第一次加载后,不再会发生整个页面的更新,而是只会发生页面的局部更新,这样前后端的数据交互量会很小,用户体验会更好.   在一个SPA中, 所有必需的代码(HTML, JavaScript, 以及 CSS ), 要不全部在初始页面中写好,要不在用户操作页面的过程中被动态加载. 开发单页面程序,因为只有一个总的html文件,会带来如下几个负面的问题: 1)总html文件的内

[后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

快速了解SPA单页面应用

简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的HTML网页一样,需要每做一个动作就更新一次网页,而是像传统的电脑软件一样,只变更显示的内容而不需变更整个网页!概念很简单,但是,事实上却有不少的问题要考虑. 理解单页面应用 简单来说SPA的网页只会有一个网页,而这个网页的设计方式要能够回应使用者所使用的各种装置并且复制使用者在电脑上使用软件的经验

spa(单页面应用)的优缺点

优点:spa(单页面应用) 1.用户体验好.快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染. 2.基于上面一点,SPA相对对服务器压力小. 缺点: 1: seo 不利于搜索引擎优化 2: 初次加载页面更耗时 3:前进.后退.地址栏等,需要程序进行管理: 4.书签,需要程序来提供支持: 版权声明:本文为博主原创文章,未经博主允许不得转载.

SPA设计与架构-理解单页面Web应用 (埃米顿.A斯科特) 中文pdf扫描版

SPA 开发技术的运用是当今Web 开发领域的热门趋势,但真正全面掌握该技术的开发者并不多.本书详尽阐述单页面Web 应用(SPA)开发技术,从SPA 构建基础入手,通过MV*.模块化编程.路由.模块间通信.服务器端交互等概念的阐述,全面介绍SPA 的设计与架构,帮助读者正确掌握SPA 开发的各方面知识要素.同时,<SPA设计与架构:理解单页面Web应用>中还讨论了SPA 的单元测试及客户端任务自动化,覆盖了从开发到部署的一系列任务,让读者在阅读完<SPA设计与架构:理解单页面Web应用