原文来自: 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产品,其实还是非常牛逼的。
-
JS框架
主要用的ExtJS。提供漂亮的面向对象框架;提供完整的UI控件库,包括漂亮的基于Canvas和SVG的图形,易于使用;提供完整清晰的UI控件声明周期,易于扩展;提供丰富的辅助类库,包括与服务器交互的Reader和Writer,生成HTML的template,各种工具方法。总之用起来很是顺手,尤其是初学者,很容易适应,也很容完成功能。但是,要想用得好,还是要下功夫的,需要仔细理解其控件生命周期,理解其布局,理解它的样式,否则很可能在解决复杂任务时,写出性能非常差的代码。
为了解决JS的依赖用了RequireJS,应该比ExtJS4自带的依赖库要好,因为ExtJS4似乎仅可以解决自身类的依赖,而RequireJS则是解决所有js的依赖。
-
CSS框架
通常RIA的CSS都会复杂的,尤其时系统复杂的时候,考虑跨浏览器,如恶心的IE。所以我们用来Compass,基于Sass的一个CSS框架。Compass实际上是一个CSS的编译器,输入是Sass风格的类Css语言,编译输出就是Css。当然Compass基于Sass的功能提供了很多函数,这样可以很容易做到跨浏览器,譬如圆角,按列布局等等。
-
解决浏览器前进、后退
这是一个小细节问题,但是很重要,通常是借助浏览器地址栏中URL的hash fragment identifier,如http://localhost/detail#name=ramon,其中#以后的都作为hash id。浏览器地址栏的url主体不变,只是变化hash fragment identifier的话,浏览器是不会重新加载页面的,但是这个时候我们可以从location.href.hash中获取到hash指,这样可以得到相应的参数以修改页面展示的内容,同时把整个url存入浏览器的history里面,这样点击前进或后退的时候,地址栏会设置为相应的url,而我们通过hash知道要显示的内容。
-
提供了一个JS的数据模型框架 这个是最牛逼的地方。在服务器端我们定义了一堆用XML来表示的数据类型,用它来描述各种业务对象,譬如Person。这些XML在系统初始化的时候都会加载到客户端,并且反序列化为JS对象,当然JS对象也很容易序列化为XML,从而作为请求的内容发到服务器去。所有这些对象又直接对应这服务器端的数据持久化对象,如Person对象就可能有save, update, insert, delete方法。这样很容易在客户端直接调用Person.delete来请求服务器删除一个对象。当然服务器需要实现一套Rest service以支持这些请求。