单页Web应用

编辑

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。[1]浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。

特点

编辑

速度:更好的用户体验,让用户在web app感受native app的速度和流畅,
·MVC:经典MVC开发模式,前后端各负其责。
·ajax:重前端,业务逻辑全部在本地操作,数据都需要通过AJAX同步、提交。
·路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。
单页Web应用(single page web application,SPA)是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。
单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点,网上讲解的文章有很多,这里就不展开论述了。 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻

单页web应用开发流程

编辑

  • 用循环的视角审视Web应用开发
  • 框定一个一致的SPA图形用户界面(GUI)和模型
  • 将SPA的原则带回服务器端
  • 聚集于对合适的应用进行早期SPA开发[3]
SPA协调的起点是认识到SPA与脚本和网页编程有关,而不是与后端应用有关。SPA的主要目标是围绕着Web 2.0页面时间交互原则重构Web应用,以便体验可容易地转化到多个设备中,并对用户有效。这意味着首先要抱着支持这样一个逻辑活动为目标来设计用户交互,该活动应该涉及单页面与一套脚本,实现一次加载并执行直到活动完成。
一旦用户交互设计完成,下一步就是框定一个本地状态或事件模型,该模型应能描述页面处理与用户的交互及与任何后端应用交互。尽管这并非不可能,但是开发与服务器端功能多组件交互的SPA会更加困难。
这会产生一种要对应用服务器进行重构的诱因,其目的是为了以1:1的比例来支持SPA。就最大程度上而言,该模型应该让自己的变量及命名空间本地化,并通过应用的服务器端与其他SPA交互。这是为了减少对于用本地SPA控制器或模型来在多个SPA之间保留状态的需求

SPA (单页应用程序)相关推荐

  1. 使用Vanilla.js构建单页应用程序(SPA)网站

    目录 项目 带有模块的组织代码 以可观察的方式应对变化 支持声明式数据绑定 将幻灯片(Slides)托管和加载为"页面" 使用路由器处理导航 带有CSS3动画的转换时间线 管理&q ...

  2. 低代码Web应用程序构造方法-ASP.NET Core 2.2单页应用程序(SPA)

    目录 介绍 网格记录在编辑/添加上的持久性 以下步骤用于创建单页应用程序(SPA) 在SQL Server Management Studio中创建数据库 打开Visual Studio社区2019 ...

  3. spa 搜索引擎_网站seo-SEO的单页应用程序(SPA)生存指南

    JavaScript库与JavaScript框架 解开SPA背后的技术最终将我们引向JavaScript库和框架的主题. 问一个开发人员"库和框架之间有什么区别",你会得到很多有趣 ...

  4. jsp 构建单页应用_如何使用服务器端Blazor构建单页应用程序

    jsp 构建单页应用 介绍 (Introduction) In this article, we will create a Single Page Application (SPA) using s ...

  5. SPA 单页Web应用

    定义 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTM ...

  6. razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序

    razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...

  7. 带有Upida/Jeneva的ASP.NET MVC单页应用程序(前端/AngularJS)

    目录 介绍 背景 基本结构 JS控制器 HTML视图 查看容器 结论 参考 下载源3.4 MB 在Codeplex上下载最新版本和更多示例 参见工作示例 介绍 在上一篇文章中,我演示了如何使用WebA ...

  8. 带有Upida/Jeneva.Net的ASP.NET MVC单页应用程序(后端)

    目录 介绍 问题 问题1 问题2 问题3 解决方案 问题1--智能序列化 问题2--反向引用 问题3--映射更新 说明 下载源3.4 MB 在Codeplex上下载最新版本 参见工作示例 介绍 让我们 ...

  9. 可扩展的web单页应用程序架构

    可扩展的web单页应用程序架构 本文转载自:众成翻译 译者:杨小福 链接:http://www.zcfy.cc/article/1319 原文:http://blog.mgechev.com/2016 ...

最新文章

  1. PHP脚本管理kvm,kvm管理脚本
  2. python和R数据类型查看、赋值、列表、for循环、函数用法对比示例
  3. python3怎么读取excel_python3 读取excel
  4. devstack部署openstack流程与相关问题的记录(ubuntu 16.04)
  5. Bug调用其他函数失败
  6. C语言试题十六之写删除字符串中指定下标的字符。其中,a指向原字符串,删除后的字符串存放在b所指的数组中,n中存放指定的下标。
  7. Codeforces Round #732 (Div. 2) C. AquaMoon and Strange Sort 思维
  8. 【转】Vue.js入门教程(二)在页面中引入vue的方式
  9. 阿里如何做到百万量级硬件故障自愈?
  10. Linux进阶之路————磁盘查询
  11. 怎么选择跨境电商ERP系统?
  12. Spring Boot 2.0系列文章(五):Spring Boot 2.0 项目源码结构预览
  13. 如何调整html中音乐播放器的大小,请教音乐播放器大小如何调整?
  14. 超像素采样网络(英伟达)
  15. 破解有道翻译反爬虫机制
  16. gluster集群服务器IP地址更改后导致服务无法启动的一个解决方法
  17. 畅想未来的我计算机,畅想未来的电子计算机
  18. c语言俄罗斯方块视频,c语言自己写俄罗斯方块(完整版)
  19. 2021年起重机司机(限桥式起重机)免费试题及起重机司机(限桥式起重机)试题及解析
  20. 软件测评师教程之软件测试基础

热门文章

  1. 新代系统cnc怎样连接电脑_你真的了解3C产线上的运控系统吗?
  2. Vue之动态组件(二)
  3. webpack中,css中打包背景图,路径报错
  4. 结对编程 贪吃蛇项目-开发环境搭建过程
  5. CCAI 2017 | 小数据学习对人工智能究竟有着怎样的影响?
  6. [翻译]Django tutorial, part 1: Models
  7. MAC OS X Yosemite安装与试用
  8. Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图
  9. Java之品优购课程讲义_day16(2)
  10. 美国国土安全部发布物联网安全最佳实践