SPA

单页应用程序,在一个页面内用ajax技术实现所有的功能的web程序,我们称之为单页应用,明显的特点就是第一次加载之后地址栏非参数部分不再发生变化。大家观察会发现
WIP系统就是一个SPA。我们所有的项目也都是SPA。

Stingray SPA系统架构以及原理

SPA系统的架构可以简单分成两部分:

  1. 页面第一请求时加载所需的资源文件
  2. 用户事件触发ajax请求,更新页面内容
    是不是简单? 抓住这两点,所有的问题都很好理解了。我们系统加载执行js之后会注册一些关键的系统对象和函数,主要是用来发送ajax请求,以及处理ajax返回的数据的显示的。一些关键的全局对象:

    1. Communication - ajax请求对象
    2. CustomScript - response中包含的js代码封装后的对象
    3. Yellow - China Team独有的超实用方法集合

    4. Utilities - 一个系统的辅助函数库
    5. Global - 系统Global对象,包含全局的消息框、正在加载效果等的控制
    6. GlobalScript - 一个全局的自动以函数库

    7. jsonParse - 将json串转为对象
    8. jAlert - alert加强
    9. TableWalker - tablewalker相关对象
    10. initTableWalker - tablewalker相关对象
    11. TableWalkerAjax - tablewalker相关对象
    12. require - require对象,用于异步加载
    13. define - 模块定义

系统中的ajax请求

Communication对象封装了系统常用的ajax请求,主要的方法有三个:

  1. Communication.LinkRequest - 页面跳转, 其实就是ajax替换了页面显示内容
  2. Communication.SerialRequest - 页面提交,返回的的内容将决定页面的跳转方向。ajax提交数据,返回一个新的页面内容。
  3. Communication.CustomRequest - 用于发送ajax请求,需要在后台自己定义返回的内容,同时提供回调方法处理返回结果。
    详细的方法API请参考 Communication API

实例代码讲解

以OIC的一个页面为例,讲解页面加载过程,ajax请求过程
C:\mtstingray_OIH\stingrayrules\0\DF_FullQuote_OptionalCov.vrm

总结

一个核心:所有的请求都是ajax来完成
一个难点:理解三个方法是如何利用ajax来完成的
一个重点:充分掌握jQuery的ajax和回调

相关链接

Communication API

posted @ 2017-02-27 22:40 by Mark

stingray前端架构总体设计及运行过程的更多相关文章

  1. 前后端分离之Web前端架构设计

    架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...

  2. 【ASP.NET MVC系列】浅谈ASP.NET MVC运行过程

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  3. 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践

    05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...

  4. 基于React的PC网站前端架构分析

    代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...

  5. Netflix:我们为什么要将GraphQL引入前端架构?

    作者|Artem Shtatnov译者|无明 在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程 ...

  6. 基于Vue2.x的前端架构,我们是这么做的

    通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...

  7. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  8. 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践

    说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...

  9. Spark Streaming架构设计和运行机制总结

    本期内容 : Spark Streaming中的架构设计和运行机制 Spark Streaming深度思考 Spark Streaming的本质就是在RDD基础之上加上Time ,由Time不断的运行 ...

随机推荐

  1. cocos2d-x系列笔记技巧篇(2)---关于CREATE_FUNC宏的用法

    FROM://http://blog.csdn.net/jinciyulang/article/details/8631889 阅读cocos2d-x demo的代码,我们会看到有些头文件中使用CRE ...

  2. sk_buff的数据预留和对齐

    转自:http://blog.csdn.net/keepmovingnow/article/details/45850387 数据预留和对齐主要由skb_reserve().skb_put().skb ...

  3. Java实现用汉明距离进行图片相似度检测的

    Google.Baidu 等搜索引擎相继推出了以图搜图的功能,测试了下效果还不错~ 那这种技术的原理是什么呢?计算机怎么知道两张图片相似呢? 根据Neal Krawetz博士的解释,原理非常简单易懂. ...

  4. Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton

    ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...

  5. Android实现图片裁剪

    MainActivity.java package com.kale.imagetailor; import java.io.File; import java.io.FileNotFoundExce ...

  6. LINQ to XML 建立,读取,增,删,改

      LINQ to XML的出现使得我们再也不需要使用XMLDocument这样复杂的一个个的没有层次感的添加和删除.LINQ可以使的生成的XML文档在内存中错落有致.下面以一个小的例子说名LINQ ...

  7. 基于Vue、Bootstrap的Tab形式的进度展示

    最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...

  8. Java命令学习系列(七)——javap

    javap是jdk自带的一个工具,可以对代码反编译,也可以查看java编译器生成的字节码. 一般情况下,很少有人使用javap对class文件进行反编译,因为有很多成熟的反编译工具可以使用,比如jad ...

  9. [转]HIVE UDF/UDAF/UDTF的Map Reduce代码框架模板

    FROM : http://hugh-wangp.iteye.com/blog/1472371 自己写代码时候的利用到的模板   UDF步骤: 1.必须继承org.apache.hadoop.hive ...

  10. 京东的Netty实践,京麦TCP网关长连接容器架构

    背景 早期京麦搭建 HTTP 和 TCP 长连接功能主要用于消息通知的推送,并未应用于 API 网关.随着逐步对 NIO 的深入学习和对 Netty 框架的了解,以及对系统通信稳定能力越来越高的要求, ...