One Page One Application单页面应用[OPOA或1P1A],也就是说,一个页面就是一个应用系统,整个系统只有一个页面,不再使用iframe, 页面提交不能再使用submit方式。
这样的好处是:很多东西,例如:JS,CSS,HEAD等整个系统都只需加载一次。加快响应速度。客户体验也有所提高,不再弹出窗口,不再整个页面进行刷新。
我们项目是使用dojo进行开发,使用ajax方式提交,当然也可以使用.do的方式提交,只不过返回的话,就是一个页面的信息,这个页面的信息放在一个div里,就像是粘贴过来的页面一样。由于dojo解释,加载时都是比较慢,整个项目如果全部使用dojo的组件,性能可能会有问题。现项目主要使用了dojo,tree, titlepane, layoutpane, contentpane, dialog等主要的组件,丢弃不需要的dojo组件。
项目实践过程中遇到的问题:
1. 须保证页面元素ID唯一,全系统JS函数名唯一 [定义一个规范]
2. 回调函数处理 [封闭Dojo提交的方式,增加回调处理]
3. FORM提交 [使用dojo的form提交]
4. JS加载问题 [使用与dojo组件绑定的方式加载,另一种方式,可以使用dojo的require方式进行加载]
5. 附件上传问题 [使用dojo.io.iframe解决附件上传问题]
6. 事务同步问题 [通过设置dojo提交参数,并且自己在回调进行特殊处理]
……
一点心得:
在OPOA项目中,FORM—ID是一个非常重要的标志,很多元素都是通过FORM去找的。很多页面的交互也是通过FORM_ID去查找。一定要保证ID的唯一!!!
由于使用DOJO,脚本的加载是一个比较大的问题,如果将所有脚本在进入系统时统一加载,这样网络传输的数据也会很大,系统性能有所影响!如果是按需加载,懒加载,可以提高进入系统的响应速度,但因为DOJO的限制,有些脚本不会生效,必须放在特殊的地方,例如:include进来的页面, JS脚本是不会执行的,必须放在包含页面的主页面上。这对于页面比较简单的应用来说,还是可以的,但如果页面交互比较复杂,业务逻辑比较复杂的话,JS将会非常之乱!后续维护工作压力也会比较大!经过一些实验,使用dojo,require机制进行动态加载脚本是一个不错的选择。
例如:可以把一个业务模块的脚本全部放在一起, 使用require进行唯一加载!
if(!dojo._hasResource["holly.oss.SDH"]){
dojo._hasResource["holly.oss.SDH"] = true;
dojo.provide("holly.oss.SDH");
dojo.declare("holly.oss.SDH", null,
{
showSDHMsg: function() {
showMsgDialog("haha", "成功了!", true);
});
}
这是我们项目第一次使用OPOA思想,在大概一个月的摸索道路上,需要解决的问题是比较多的。而且前期开发的压力也是比较大!思想不同了,处理方式不同了,带来了更高的客户体验! 有得必有失,权衡中间的得失才是最重要的!我们正在成长,在OPOA的道路上!
善于总结,我们就能提高,善于发现,我们就有机会!
分享到:
- 2008-06-23 13:40
- 浏览 1644
- 评论(2)
- 论坛回复 / 浏览 (1 / 4887)
- 查看更多
相关推荐
mat-opoa Installation npm install --save-dev mat-opoa Usage var mat = require('mat'); var rap = require('mat-rap'); var opoa = require('mat-opoa'); // rap mock数据环境 mat.task('default', function () ...
OPOAdemo.rar extjs得单页系统实例
2012年10月,随着iPad等平板设备的普及,支付宝开始重视高分辨率屏幕的显示效果,采用了CSS3特效来提升视觉体验,并引入了OPOA(Object Pooling Object Adapter)模式,优化了资源管理和页面渲染效率。此外,...
单页应用(OPOA)的兴起使得用户体验达到了一个新的高度。 - **技术趋势**:这一时期,团队采用了更为先进的框架如YUI3、Kissy等,并开始探索前端MVC模式的应用。HTML5和CSS3等新兴技术的应用也成为主流。 #### 三、...
整个系统都使用了AJAX(Asynchronous JavaScript and XML)技术,与服务器交互采用异步方式,真正实现了OPOA(One Page One Application)单页程序。减少了用户等待的时间,抛弃了传统的B/S那种,提交>等待>刷新。
OPOA(One Page One Application)应用。Magix 对 View 进行了父子结构抽象,通过 VOM(View Object Model)对象,管理带有父子关系的 View 的展示生命周期。Magix 特别注意避免单页应用的浏览器内存大量积累和内存...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地...理解它们的区别,并根据项目需求选择合适的技术,是优化网页开发效率和用户体验的关键。同时,关注内存管理工具如sIEve,也是提高Web应用质量的重要一环。
作者引入了OPOA组件式开发方法,但是这种方法会增加js文件的总量。为了解决这个问题,作者推荐使用yui-compressor对js文件进行压缩混淆。 yui-compressor是Yahoo!开发的一款js压缩工具,可以将js文件压缩到原来的1/...
配合网易自主研发的第五代AJAX引擎、OPOA框架和自定义组件库,邮箱性能得到了显著提升,邮件到达速度加快,通信协议得到优化,页面加载速度提高35%。此外,智能动态组件系统确保了页面元素生成和显示的高效性,以及...
2. △OBP∽△OPA,即 OBOPOPOA=,变形为 2OPOA OB=×. 3. OPOBPAkOAOPPB===. 这些性质可以应用于解决各种问题,如确定圆心和半径、求解点的坐标等。 四、练习题和解答 我们提供了四个练习题和解答: 1. 已知 A...
这篇文章主要探讨了如何利用Ext框架设计和实现一个单页系统(One Page Application,OPOA),这是一种优化用户体验的Web应用模式,旨在提高响应速度和用户交互性。文章首先介绍了Ext和单页系统的概念。 **1. Ext...
例如,Android平台上的Web App方案会针对WebView组件进行优化和扩展,利用Webkit引擎提升性能,并通过界面优化技术如OPOA(Offscreen Page Cache)减少页面刷新,提升响应速度。 然而,HTML5技术目前仍存在成熟度...
Magix npm install magix 简介 Magix适合用来构建大型的、交互复杂的应用。应用可以是前后端分离的单页...示例项目 magix-project 集成常见组件及开发中的功能,seajs+jquery magix-os web桌面系统 KISSY版本 点击这里