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不断的运行 ...
随机推荐
- Map HashMap 排序 迭代循环 修改值
HashMap dgzhMap = Dict.getDict("dgzh"); Iterator it_d = dgzhMap.entrySet().iterator(); whi ...
- [shiro学习笔记]第四节 使用源码生成Shiro的CHM格式的API文档
版本号为1.2.3的shiro API chm个事故文档生成. 获取shiro源码 编译生成API文档 转换成chm格式 API 获取shiro源码 shiro官网: http://shiro.apa ...
- java 日历类Calendar用法
如何获取昨天?取昨天的日期,本想的截出来日期减一就好了.又一想不对,如果今天是一号怎么办? 现有两个办法 1: Date as = new Date(new Date().getTime()-24*6 ...
- [Android Security] APK自我保护 - 字符串处理
cp : https://segmentfault.com/a/1190000005128037 在开发过程中字符串不可避免,但是这些字符串也可能是破解的关键点,比如服务器的地址和错误提示这些敏感的字 ...
- [Android Security] DEX文件格式分析
copy from : https://segmentfault.com/a/1190000007652937 0x00 前言 分析 dex 文件格式最好的方式是找个介绍文档,自己再写一个简单的 de ...
- go语言之进阶篇接口转换
1.go语音之进阶篇 示例: package main import "fmt" type Humaner interface { //子集 sayhi() } type Pers ...
- 如何使用.net访问Access数据库 （转）
前言:今天整理程序,看到之前写的一个Demo,也不知道是从哪里参考的了,写到这里,留作备用吧. 使用.net访问Access数据库:1.BL层:新增一个DataAccess类. Code].Defau ...
- [leetcode]Reverse Words in a String @ Python
原题地址:https://oj.leetcode.com/problems/reverse-words-in-a-string/ 题意: Given an input string, reverse ...
- [leetcode]Path Sum II @ Python
原题地址:https://oj.leetcode.com/problems/path-sum-ii/ 题意: Given a binary tree and a sum, find all root- ...
- Combination Sum II leetcode java
题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...