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
stingray前端架构总体设计及运行过程-LMLPHP

总结

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

相关链接

Communication API

posted @ 2017-02-27 22:40 by Mark
05-12 23:54