stingray前端架构总体设计及运行过程
SPA
单页应用程序,在一个页面内用ajax技术实现所有的功能的web程序,我们称之为单页应用,明显的特点就是第一次加载之后地址栏非参数部分不再发生变化。大家观察会发现
WIP系统就是一个SPA。我们所有的项目也都是SPA。
Stingray SPA系统架构以及原理
SPA系统的架构可以简单分成两部分:
- 页面第一请求时加载所需的资源文件
- 用户事件触发ajax请求,更新页面内容
是不是简单? 抓住这两点,所有的问题都很好理解了。我们系统加载执行js之后会注册一些关键的系统对象和函数,主要是用来发送ajax请求,以及处理ajax返回的数据的显示的。一些关键的全局对象:- Communication - ajax请求对象
- CustomScript - response中包含的js代码封装后的对象
Yellow - China Team独有的超实用方法集合
- Utilities - 一个系统的辅助函数库
- Global - 系统Global对象,包含全局的消息框、正在加载效果等的控制
GlobalScript - 一个全局的自动以函数库
- jsonParse - 将json串转为对象
- jAlert - alert加强
- TableWalker - tablewalker相关对象
- initTableWalker - tablewalker相关对象
- TableWalkerAjax - tablewalker相关对象
- require - require对象,用于异步加载
define - 模块定义
系统中的ajax请求
Communication对象封装了系统常用的ajax请求,主要的方法有三个:
- Communication.LinkRequest - 页面跳转, 其实就是ajax替换了页面显示内容
- Communication.SerialRequest - 页面提交,返回的的内容将决定页面的跳转方向。ajax提交数据,返回一个新的页面内容。
- Communication.CustomRequest - 用于发送ajax请求,需要在后台自己定义返回的内容,同时提供回调方法处理返回结果。
详细的方法API请参考 Communication API
实例代码讲解
以OIC的一个页面为例,讲解页面加载过程,ajax请求过程
C:\mtstingray_OIH\stingrayrules\0\DF_FullQuote_OptionalCov.vrm
总结
一个核心:所有的请求都是ajax来完成
一个难点:理解三个方法是如何利用ajax来完成的
一个重点:充分掌握jQuery的ajax和回调
相关链接
stingray前端架构总体设计及运行过程的更多相关文章
- 前后端分离之Web前端架构设计
架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC运行过程
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践
05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...
- 基于React的PC网站前端架构分析
代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...
- Netflix:我们为什么要将GraphQL引入前端架构?
作者|Artem Shtatnov译者|无明 在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程 ...
- 基于Vue2.x的前端架构,我们是这么做的
通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...
- 基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
- 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践
说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...
- Spark Streaming架构设计和运行机制总结
本期内容 : Spark Streaming中的架构设计和运行机制 Spark Streaming深度思考 Spark Streaming的本质就是在RDD基础之上加上Time ,由Time不断的运行 ...
随机推荐
- cocos2d-x系列笔记技巧篇(2)---关于CREATE_FUNC宏的用法
FROM://http://blog.csdn.net/jinciyulang/article/details/8631889 阅读cocos2d-x demo的代码,我们会看到有些头文件中使用CRE ...
- sk_buff的数据预留和对齐
转自:http://blog.csdn.net/keepmovingnow/article/details/45850387 数据预留和对齐主要由skb_reserve().skb_put().skb ...
- Java实现用汉明距离进行图片相似度检测的
Google.Baidu 等搜索引擎相继推出了以图搜图的功能,测试了下效果还不错~ 那这种技术的原理是什么呢?计算机怎么知道两张图片相似呢? 根据Neal Krawetz博士的解释,原理非常简单易懂. ...
- Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton
ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...
- Android实现图片裁剪
MainActivity.java package com.kale.imagetailor; import java.io.File; import java.io.FileNotFoundExce ...
- LINQ to XML 建立,读取,增,删,改
LINQ to XML的出现使得我们再也不需要使用XMLDocument这样复杂的一个个的没有层次感的添加和删除.LINQ可以使的生成的XML文档在内存中错落有致.下面以一个小的例子说名LINQ ...
- 基于Vue、Bootstrap的Tab形式的进度展示
最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...
- Java命令学习系列(七)——javap
javap是jdk自带的一个工具,可以对代码反编译,也可以查看java编译器生成的字节码. 一般情况下,很少有人使用javap对class文件进行反编译,因为有很多成熟的反编译工具可以使用,比如jad ...
- [转]HIVE UDF/UDAF/UDTF的Map Reduce代码框架模板
FROM : http://hugh-wangp.iteye.com/blog/1472371 自己写代码时候的利用到的模板 UDF步骤: 1.必须继承org.apache.hadoop.hive ...
- 京东的Netty实践,京麦TCP网关长连接容器架构
背景 早期京麦搭建 HTTP 和 TCP 长连接功能主要用于消息通知的推送,并未应用于 API 网关.随着逐步对 NIO 的深入学习和对 Netty 框架的了解,以及对系统通信稳定能力越来越高的要求, ...