路由控制和视图转换框架 SPA

最新推荐文章于 2024-04-10 06:10:17 发布
最新推荐文章于 2024-04-10 06:10:17 发布
阅读量1k 收藏
点赞数
分类专栏： 页面前端

概述

SPA是为构建WebApp设计的路由控制和视图转换框架

SPA专注于解决构建WebApp时遇到的共性问题，尤其适用于构建MobileApp， 我们和jQuery Mobile、Sencha Touch等框架不同， 并不是一个构建移动端应用的前端整体解决方案，所以我们不包含UI组件，如果你不想自己设计界面， 可以用Bootstrap、Topcoat等UI Components框架配合SPA， 来快速构建你的WebApp；

SPA依赖jQuery或Zepto， 并且每个视图可以通过RequireJS、Sea.js等CommonJS解决方案或者自定义的方式进行模块化组织、异步加载；

SPA支持移动端和桌面端的现代浏览器；

为什么使用SPA

提供快速的开发实现

你可以像开发传统网站一样，先设计并制作每个视图，比如页面、导航、对话框等等，然后通过SPA提供的接口把每个视图拼装组织，完成一个拥有NativeApp体验的WebApp；

保留更大的设计自由度

SPA相对于jQuery Mobile和Sencha Touch等框架，SPA是非常轻量级的，我们只关心并解决WebApp的路由控制和视图转换等共性问题，每个场景被模拟成一个节点，场景内的具体界面和交互设计完全交给开发者；

减少后端依赖

视图的渲染和路由是在前端完成的，后端只需要提供一个简单的入口页面（Single-page application）和应用所需的异步数据接口；如果再配合使用javascript模版，还可以最大化的利用前端缓存，减少网络流量请求；

事件驱动

SPA不提供类、对象或函数库，利用jQuery的自定义事件和事件代理，SPA的接口都绑定到DOM上，所有的操作都是触发相关DOM上的自定义事件，将各个视图的代码解耦隔离，降低开发复杂度，这个特性和Flight框架一致。 

zhaoda / spa

Watch 82 Fork 41

A webapp framework for routing control and view transitions — More...

http://zhaoda.net/spa/docs/

Issues
#15刚刚在IE下测试了一下，发现支持得不是很好。by jaryway  2015-02-12

master分支代码最近更新：2015-01-27

下载zip
dakang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5单页面应用(SPA)架构总结
zhangzhibinshuai的博客
05-25 1387
在技术方面, 从考虑框架应该有的好的技术特点, 倒推出需要什么技术;
前端切换视图_前端插拔式 SPA 应用架构实现方案
weixin_39744316的博客
12-06 202
作者：前端藏经阁转发链接：https://www.yuque.com/xwifrr/zqg2pw/mgutmm背景随着互联网云的兴起，一种将多个不同的服务集中在一个大平台上统一对外开放的概念逐渐为人熟知，越来越多与云相关或不相关的中后台管理系统或企业级信息系统曾经或开始采用了这种「统一平台」的形式。同时，前端领域保持着高速发展，早期的 jQuery+Backbone+Bootstrap 的 MVC...
SPA 中前端路由基本原理与实现方式，2024年最新前端插件化面试
最新发布
m0_57473261的博客
04-10 775
window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：直接更改浏览器地址，在最后面增加或改变#hash；通过改变location.href或location.hash的值；通过触发点击带锚点的链接；4）浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。这个事件有 2 个重要的属性：oldURL 和 newURL，分别表示点击前后的 urlclick me这样我们可以这样建立一个 DOMpage1page2page3paga4paga5为了好看我们
单页应用 WebApp SPA 骨架 框架 路由 页面切换 转场
weixin_34160277的博客
12-23 117
所能想到的关键词 都写到标题上了，为了让你不管搜索什么都能找到这篇文章，有没有被我的智商所折服？ ^o^ 这里收录三个同类产品，找到他们花了我不少时间呢。 张鑫旭写的mobilebone 自述：mobile移动端，PC桌面端页面无刷新过场JS骨架，简单、专注！http://www.zhangxinxu.com/wordpress/2...
单页面应用SPA架构
weixin_34167043的博客
02-26 310
个人认为单页面应用的优势相当明显： 前后端职责分离，架构清晰：前端进行交互逻辑，后端负责数据处理。 前后端单独开发、单独测试。 良好的交互体验，前端进行的是局部渲染。避免了不必要的跳转和重复渲染。 当然，SPA也有它自身的缺点，例如不利于搜索引擎优化等等，这些问题也有其相应的解决方案。 下面要介绍的这种方式可以说是一种模式或者工作流，和前端使用什么框架无关，也和后端使用什么语言、...
路由控制和视图转换框架SPA.zip
07-19
SPA是为构建WebApp设计的路由控制和视图转换框架 SPA专注于解决构建WebApp时遇到的共性问题，尤其适用于构建MobileApp， 我们和jQuery Mobile、Sencha Touch等框架不同， 并不是一个构建移动端应用的前端整体解决...
AngularJS路由Ui-router模块用法示例
10-19
AngularJS是一种流行的前端JavaScript框架，用于构建单页应用程序（SPA）。在AngularJS中，路由扮演着关键角色，它允许用户在不刷新整个页面的情况下导航到不同的视图。当涉及到更复杂的视图结构和嵌套时，AngularJS...
ui-router：AngularJS中具有嵌套视图的灵活路由的事实上的解决方案
02-03
当用户浏览应用程序时，SPA的路由框架会更新浏览器的URL。 相反，这允许更改浏览器的URL来驱动应用程序中的导航，从而允许用户在SPA的深处创建书签。 UI-Router应用程序被建模为分层的状态树。 UI-Router提供了一种...
期刊渐进式JavaScript框架Vue.js的全家桶应用_吕英华1
08-03
这些工具简化了API调用，提供了拦截器、错误处理和请求/响应转换等功能，帮助开发者更方便地处理网络通信。 5. **UI框架 - 如Element UI、Vuetify等** Vue.js社区提供了许多优秀的UI组件库，如Element UI和Vuetify...
ssr-sample：服务器端渲染，单页应用程序和渐进式Web应用程序的最小示例
02-01
该项目介绍了如何实现SSR，SPA和PWA。 文章 只有日语 特征 该项目显示了如下几种实现。 服务器端渲染 单页申请 渐进式Web应用 GraphQL RESTful API 安全性（CSP，GraphQL） 测验 像建筑工具一样 衡量绩效 图书馆...
vipspa.js jquery 用于局部路由，类似于vue route
05-21
用于局部路由，类似于vue route 大概使用方法： $(function(){ vipspa.start({ view: '#ui-view', //用于局部路由的div errorTemplateId: '#error', // 可选 router: { 'home': { templateUrl: 'views/home.html', controller: 'js/app/home.js', }, 'content': { templateUrl: 'views/content.html', controller: 'js/app/content.js' }, 'contact': { templateUrl: 'views/contact.html', controller: 'js/app/contact.js' }, 'user': { templateUrl: 'views/user.html', controller: 'js/app/user.js', subView: '#ui-sub-view', children: [ { name: 'login', templateUrl: 'views/login.html', controller: 'js/app/login.js', }, { name: 'regist', templateUrl: 'views/regist.html', controller: 'js/app/regist.js', } ] }, 'defaults': 'home' //默认路由 } }); });
对 SPA 应用的理解+路由的理解+路由的基本使用+路由的几个注意点
weixin_47075145的博客
10-12 638
1. 一个路由就是一组映射关系（key - value）2. key 为路径, value 可能是 function 或 component。
Vue单页面应用
weixin_44434230的博客
11-06 1271
** 1. SPA是什么 ** 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来...
SPA 中前端路由基本原理与实现方式
FareBlog
12-13 5479
通常 SPA 中前端路由有2中实现方式，本文会简单快速总结这两种方法及其实现： 修改 url 中 Hash 利用 H5 中的 history Hash我们都知道 url 中可以带有一个 hash， 比如下面 url 中的 page2https://www.abc.com/index.html#page2window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件： 直接更
history辅助下的SPA路由实现
songshuzhong的博客
04-25 801
      上篇文章简单介绍了html5的history api，这篇将就进入实战环节。看看在history api的辅助下，目前流行的前端SPA框架路由是怎么实现的。1.什么是SPA        首先，什么事spa呢？一句话概括：spa就是单页面应用，即：single page application。通过看源码就可以发现，整个网站就只有一个html文件。        那么，spa有什么优势...
主流的spa应用的路由的哈希和history模式
l908825925的博客
02-28 827
现在的主流应用比如vue和react构建的spa应用的访问地址都具有2种模式，一种是哈希模式，一种是history模式。history模式是基于h5的history对象去进行操作，两者有什么不同呢？ 首先说history模式。history模式需要服务端（比如nginx）将所有的代理路由请求均打到index.html页面上，因为spa的路由是前端去进行管理的，所以后端对路由无需任何操作。但是我需要...
SPA前端路由的原理与实现
Luckyzhoufangbing的博客
02-15 924
（一）什么是SPA SPA：single page application 的简写～（单页应用） 简单的说，SPA就是一个web项目只有一个html页面，一个页面一旦加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，取而代之的是利用JS动态的变换html内容，从而来模拟多个视图间的跳转。 SPA只有一个html文件～ （二） 什么是路由 路由是根据不同的 url地址 展...
SPA路由相关
luqingxuan
11-30 96
  https://github.com/browserstate/history.js   https://github.com/flatiron/director   https://github.com/visionmedia/page.js   https://github.com/tildeio/route-recognizer https://github.c...
如何设计FLASK应用程序的路由和视图
05-13
Flask是基于Python的微型Web框架，它的路由系统非常灵活，可以让你轻松地设计应用程序的路由和视图。下面是一个基本的Flask应用程序的路由和视图的设计： 1. 导入Flask模块和必要的扩展： ```python from flask import Flask, render_template, request, redirect, url_for ``` 2. 创建一个Flask应用程序实例： ```python app = Flask(__name__) ``` 3. 定义路由和视图： ```python # 首页路由和视图 @app.route('/') def index(): return render_template('index.html') # 表单提交路由和视图 @app.route('/submit', methods=['POST']) def submit(): name = request.form['name'] email = request.form['email'] return redirect(url_for('thanks', name=name, email=email)) # 感谢页面路由和视图 @app.route('/thanks') def thanks(): name = request.args.get('name') email = request.args.get('email') return render_template('thanks.html', name=name, email=email) ``` 4. 运行应用程序： ```python if __name__ == '__main__': app.run() ``` 在上面的代码中，我们定义了三个路由：首页路由、表单提交路由和感谢页面路由。首页路由返回index.html模板，表单提交路由接收POST请求并从表单中获取数据，然后重定向到感谢页面路由，并将数据传递给感谢页面视图。感谢页面路由返回thanks.html模板，并将数据传递给模板渲染。 上述是一个简单的Flask应用程序的路由和视图的设计，当然在实际的应用开发中，可能会涉及更多的路由和视图，但是设计思路是一样的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值