RIA

2014-02-12  本文已影响201人  liyinkan

RIA / Web

RIA - Rich Internet Application

Web
RIA

相比于传统Web1.0/2.0，RIA 所适用的场景，更类似于【信息管理】这样的需求。

曾经类似需求会选择 Flash 或者 Sliverlight 这样的插件方式的实现。
当出现 AJAX 之后，AJAX 已经成为主流。

技术选择

HTML(5) + CSS(3) + Javascript + Ajax

框架选择

主流前端库/框架

分为几大类

框架/库，同时拥有一个、多个甚至全部特性。

业务需求

技术需求

所以在几大类中分为必须和可选两类

必须
可选
最精简框架选择（A）
大而全解决方案（B）
紧跟时代选择方案（C）

大而全的 B 是很多 ERP 以及内部管理系统（包括淘宝）使用的方案。ExtJS 4 可以支持前端MV、前端模块化、复杂控件，最大的缺陷在于，昂贵的收费、扩展受限和性能。*

最精简 A 只做必须的内容，舍去响应式布局、模块加载、特殊渲染效果。依托 jQuery UI 社区提供控件来呈现页面。

C 方案把 A 中 jQuery UI 替换成 Bootstrap，从而引入更统一和可维护的控件风格，以及响应式支持。加入 Chart.js 来提供更强大的图表功能。引入 RequireJS 来做模块化加载

可用 Semantic UI 替换 Bootstrap

Bootstrap 在功能上和 Semantic UI 相同，但是 Semantic 拥有更小得体积以及更灵活的定制。但同时，需要学习更多地标签。

可以使用 d3.js 来绘制更复杂的图表

d3.js 可以说是现在最强力的前端图表展现库，不仅仅图表，很多数据可视化会推荐使用 d3.js。也因为这样 d3 的体积和复杂度远远高于 Chart.js。

文件组织架构

传统组织方式

<pre>
|-- js
|-- common
|-- ManageUser.js
|-- Index.js
|-- img
|-- css
|-- all.css
|-- print.css
|-- Index.html
|-- ManageUser.html
</pre>

RIA 方式

<pre>
|-- js
|-- /* 模块化组织 Javascript 文件 */
|-- img
|-- css
|-- all.css
|-- print.css
|-- Index.html
</pre>

模块化组织 JS 文件

根据功能（A）

<pre>
|-- Common
|-- Views
|-- Index.js
|-- ManageUserView.js
|-- Controllers
|-- Index.js
|-- ManageUserView.js
</pre>

根据需求（B）

<pre>
|-- Common
|-- Index
|-- Index.js
|-- ManageUser
|-- ManageUserView.js
</pre>

A和B没有绝对的优劣，都非常好用。个人更偏向B。

复用控件

Example：下拉框控件

HTML
<select id="test">
    <option value ="vol">Volvo</option>
    <option value="audi">Audi</option>
    <option value ="as">Austin Martin</option>
</select>
Bootstrap
<select id="test" class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

以上是通过HTML方式来定义下拉框。最麻烦的地方在于，如果在一个、多个页面中都有下拉框这样的东西的时候，我们不得不到处粘贴差不多的重复代码。如果需要统一修改下拉框的样式或者统一添加下拉框的显示效果，将变得比较麻烦。

可以尝试通过Javascript的方式来渲染下拉框。

HTML
<span id="test"></span>
Javascript
封装公用控件类
/* Common 下添加 combo.js */
if(!Y) Y = {}
Y.Combo = function(){
    this._items = []
}
Y.Combo.prorotype.addItem = function(key,value){
    this._items.push({key:key,value:value})
}
Y.Combo.prototype.toDom = function(){
  var dom = []
  dom.push("<select>")
  for(var i=0,l=this._items.length;i<l;i++){
    dom.push("<option value='"+ item[i].key +"'>"+ item[i].value +"</option>")
  }
  dom.push("</select>")
  return dom.join('')
}
Y.Combo.prototype.render = function(id){
  var dom = document.getElementById(id)
  if(!dom) return;
  dom.innerHTML = this.toDom();
}
在页面中调用
/* ManageUserView.js 中使用的时候 */
var combo = new Y.Combo({
    width:100
})
combo.addItem('vol','Volvo')
combo.addItem('audi','Audi')
combo.addItem('as','Austin Martin')
combo.render('test')

上面例子中 combo.js 应该放到放到 common 文件夹下面，在加载页面文件之前加载。

所以针对每一个使用到的控件都可以做类似的封装，不单单是简单控件，复杂控件、组合控件同样需要。

API 文档

由于 Javascript 语言特性 API 文档显得非常重要。

上一篇 下一篇

猜你喜欢

热点阅读