opoa介绍
一 定义
One Page, One Application(后面缩写为OPOA,或者1P1A), 含义很简单:一个页面就是一个应用。不再使用iframe, 页面提交不能再使用submit方式。
在众多的基于Web的MIS系统中,没有人关心页面的组织形式;大多数稍微复杂的MIS系统,都采用分祯(Frame)的方式来组织页面,这样,在进行业务操作的时候,url的变化表现在一个框架页面内,从浏览器的地址看起来,只有一个地址;更有甚者,一些应用干脆弹出一个去掉了浏览器菜单、工具条、地址栏、状态栏的窗口(比如招商银行、民生银行的网上银行系统),连地址都看不见。因此,一个页面就是一个应用,从用户的角度来说,对于操作型系统,是一种非常自然的体现。用户无需了解每一个具体的操作对应的地址是什么。
这种设计背后的含义实际是:是希望由程序来控制用户的行为,还是反过来。在操作型系统中,每一步的操作往往被业务含义严格定义,无论是应用的设计者,还是其使用者,都希望在一种受控的状况下来进行操作。例如,一个审批动作,用户更希望是通过一个按钮来触发,而不是访问类似于/approve.action?itemid=123的方式。
这样的好处是:很多东西,例如:JS,CSS,HEAD等整个系统都只需加载一次。加快响应速度。客户体验也有所提高,不再弹出窗口,不再整个页面进行刷新。
二 场景
显然,OPOA的设计只能针对那些对URL不敏感的系统,或者说操作型系统。绝大多数MIS系统都属于这一范畴,Email系统也是这一范畴,其他领域,如监控系统,聊天室等都可以采用这种思路。反面的例子是,对于内容型系统,如新闻系统,Blog系统,论坛系统,用户更希望能够通过一个明确的URL来定位页面内容,搜索引擎也喜欢这种地址。这种应用需要的是一个合理,易懂,明确的地址。
三 设计与实现
大多数MIS系统,无论是有意识或者无意识,都遵循了OPOA的思路。要么采用框架,要么采用弹出窗口来屏蔽URL的直接访问。实现上也很简单,这里就不再赘述了。注意到上述的OPOA地实现只是对用户而言,看起来好像是一个页面一样,但实际上还是有众多的action, page在后面工作。
下面我要说的一种实现是,采用buffalo技术来实现真正意义上的OPOA. 简而言之:主页面(或者称布局页面)只加载一次,其他的操作页面通过buffalo技术来加载,并将其中的操作脚本与布局内容分开,最后进行展示。
首先存在一个布局页面,这个页面定义了一个应用大致的外观,(例如,大部分MIS系统按照上中下三栏,中间部分左右两栏分别为顶部logo, 操作菜单,具体操作内容,底部状态栏)。用你喜欢的网页编辑工具,将这个页面设计美观,然后按照应用的要求,将页面进行拆分。此时的拆分不用Frame了,只需要在不同的部位加上
然后在主页面定义一个函数,例如switchPage, 将这个函数使用在需要进行页面切换的地方。switchPage函数这样实现:
pageBuffalo.remoteCall(”pageService.loadPage”, [page], function(reply) {
var pageObj = reply.getResult();
Buffalo.getElementById(”body”).innerHTML = pageObj.html;
if (pageObj.script != null || pageObj.script != “”) {
execScript(pageObj.script);
}
});
}
剩下的工作都可以想象了。你可以将web应用的网页资源全部用html编写,并放在一个不为人知的地方,而通过pageService来读取他们;你可以任意组织你的应用外观,更加自如的切换他们。应用的URL地址永远只有真正的一个,你的应用也要比别人快很多,因为只加载那么一小块内容。
项目实践过程中遇到的问题:
1. 须保证页面元素ID唯一,全系统JS函数名唯一 [定义一个规范]
2. 回调函数处理 [封闭buffalo提交的方式,增加回调处理]
3. FORM提交 [使用buffalo的form提交]
4. JS加载问题 [使用与buffalo组件绑定的方式加载]
5. 事务同步问题 [通过设置buffalo提交参数,并且自己在回调进行特殊处理]
……
四 小结
AJAX的兴起为我们开阔了很多视野。比起原来的web框架,这种OPOA的方式能够更快,减少更多的编码量,并提供更好的用户体验。当然,上文中提出的只是一个原型实现,如果尝试自行实现,可能更多的东西需要考虑,如安全,缓存,事件回调机制,内存管理等等。但这将是一个方向,一个可以提高开发体验与用户体验的方向。
这是我们项目第一次使用OPOA思想,在大概一个月的摸索道路上,需要解决的问题是比较多的。而且前期开发的压力也是比较大!思想不同了,处理方式不同了,带来了更高的客户体验! 有得必有失,权衡中间的得失才是最重要的!我们正在成长,在OPOA的道路上!
善于总结,我们就能提高,善于发现,我们就有机会!
opoa介绍的更多相关文章
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- MySQL高级知识- MySQL的架构介绍
[TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...
- Windows Server 2012 NIC Teaming介绍及注意事项
Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...
- Linux下服务器端开发流程及相关工具介绍(C++)
去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...
- JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
随机推荐
- Win7 64位使用IDA Pro 6.8调试64位exe程序
有点小坑,记录备忘. 首先搞个IDA Pro6.8,写本文时能找到的最高版本,试了下果然比6.6强大许多,其实6.6也没怎么用过...... 32位版本有个Local Win32 debugger,但 ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记十五之铭文升级版
铭文一级:[木有笔记] 铭文二级: 第12章 Spark Streaming项目实战 行为日志分析: 1.访问量的统计 2.网站黏性 3.推荐 Python实时产生数据 访问URL->IP信息- ...
- Apache Thrift的C++多线程编程定式
Facebook贡献给Apache的开源RPC组件Thrift有着广泛的应用,C++中使用Thrift也十分普遍,但由于Thrift的Handler会被多个线程调用,因而多线程中应用并不直接的友好,利 ...
- document.getElementById("xx").style.xxx中的 全部属性
CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borde ...
- [ 10.03 ]CF每日一题系列—— 534B贪心
Descripe: 贪心,贪在哪里呢…… 给你初始速度,结尾速度,行驶秒数,每秒速度可变化的范围,问你行驶秒数内最远可以行驶多少距离 Solution: 贪心,我是否加速,就是看剩下的时间能不能减到原 ...
- WPF 显示 mp3 专辑图片
mp3 专辑图片是属于 mp3 的 tag 的一部分,安装 taglib# 的 nuget 安装包到项目.这里使用 TagLib.Portable https://www.nuget.org/pack ...
- Nhibernate入门篇连接Sqlserver的增删查改
第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...
- 由百度 “PHP薪资” 引发的思考
昨天晚上睡觉的时候百度了一下 “PHP薪资”,看到了各种各样的答案,从百度知道到知乎,再到各个论坛……答案也是从 2k-16k 不等(不过说实话,2k是吓到我了),其中一些答案说到了在中国从事某一行业 ...
- Sublime Text3176激活码
此激活码为版本号为3176的激活码: 首先更改hosts文件防止Sublime Text3联网验证: Mac上hosts文件路径为/etc/hosts,所以需要sudo vim /etc/hosts ...
- 初识Telerik for AJAX
由于项目需要,本人又刚入门.net开发,项目经理介绍了一个.net流行的开发框架telerik.于是我开始慢慢学习了,发现这个控件还是不错的,学习到的内容和初学者一起探讨一下. 1:第一步 什么是te ...