stingray前端架构总体设计及运行过程

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_OIHstingrayrulesDF_FullQuote_OptionalCov.vrm

总结

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

相关链接

Communication API

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