可笑的技术名词OPOA(One Page One Application)

原文来自： http://ramonblog.cloudfoundry.com/blog/4ffc59354e1ef7b729000001

无聊查看了一下猎头发的职位列表，发现一知名电商在杭州招聘一个年薪40w+的前端工程师，这个待遇还是渴望的。再看列出的要求里面包含一个OPOA(One Page One Application)，没有见过，但是我猜得到应该是指RIA(Rich Internet Application)。具体Google之，发现网上相关的内容不多，英文的更是没有。看了一下置顶的文章，One Page, One Application，全中文的。最相关的英文文章可能算Wiki上的Single-page application。

大概看了一下那篇中文的，其实没有什么新东西，RIA本身就是这样的，不知道为什么自己要造一个新的名词，害得我咯噔一下，以为自己又落伍了。不过可喜的是，咱中国人也在IT领域造了一个新名词。我是不感兴趣的，更多的是关注本质。不过借此机会倒是可以谈一下我曾经参加过的一个OPOA产品，其实还是非常牛逼的。

1. JS框架

   主要用的ExtJS。提供漂亮的面向对象框架；提供完整的UI控件库，包括漂亮的基于Canvas和SVG的图形，易于使用；提供完整清晰的UI控件声明周期，易于扩展；提供丰富的辅助类库，包括与服务器交互的Reader和Writer，生成HTML的template，各种工具方法。总之用起来很是顺手，尤其是初学者，很容易适应，也很容完成功能。但是，要想用得好，还是要下功夫的，需要仔细理解其控件生命周期，理解其布局，理解它的样式，否则很可能在解决复杂任务时，写出性能非常差的代码。

   为了解决JS的依赖用了RequireJS，应该比ExtJS4自带的依赖库要好，因为ExtJS4似乎仅可以解决自身类的依赖，而RequireJS则是解决所有js的依赖。

2. CSS框架

   通常RIA的CSS都会复杂的，尤其时系统复杂的时候，考虑跨浏览器，如恶心的IE。所以我们用来Compass，基于Sass的一个CSS框架。Compass实际上是一个CSS的编译器，输入是Sass风格的类Css语言，编译输出就是Css。当然Compass基于Sass的功能提供了很多函数，这样可以很容易做到跨浏览器，譬如圆角，按列布局等等。

3. 解决浏览器前进、后退

   这是一个小细节问题，但是很重要，通常是借助浏览器地址栏中URL的hash fragment identifier，如http://localhost/detail#name=ramon,其中#以后的都作为hash id。浏览器地址栏的url主体不变，只是变化hash fragment identifier的话，浏览器是不会重新加载页面的，但是这个时候我们可以从location.href.hash中获取到hash指，这样可以得到相应的参数以修改页面展示的内容，同时把整个url存入浏览器的history里面，这样点击前进或后退的时候，地址栏会设置为相应的url，而我们通过hash知道要显示的内容。

4. 提供了一个JS的数据模型框架 这个是最牛逼的地方。在服务器端我们定义了一堆用XML来表示的数据类型，用它来描述各种业务对象，譬如Person。这些XML在系统初始化的时候都会加载到客户端，并且反序列化为JS对象，当然JS对象也很容易序列化为XML，从而作为请求的内容发到服务器去。所有这些对象又直接对应这服务器端的数据持久化对象，如Person对象就可能有save, update, insert, delete方法。这样很容易在客户端直接调用Person.delete来请求服务器删除一个对象。当然服务器需要实现一套Rest service以支持这些请求。