RIA

RIA / Web

RIA - Rich Internet Application

Web

• 新浪微博
• Google/百度
• Facebook
• 知乎
• ...

RIA

• Gmail
• QZone
• Evernote Web
• ...

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

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

技术选择

---

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

框架选择

---

主流前端库/框架

• jQuery/Underscore/Mootools/Prototype.js
• YUI3/Dojo/ExtJS/KISSY
• Backbone/KnockoutJS/Emberjs
• AngularJS
• Bootstrap
• Semantic UI
• Jade
• SeaJS/Require.js

分为几大类

• DOM 操作跨浏览器兼容
• JS 语言扩展
• 前端MV*
• 响应式布局
• 模块化加载
• 组件控件
• 模板引擎
• 特殊渲染效果

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

业务需求

• 主流浏览器兼容（IE8+）
• 部分刷新页面
• 图表

技术需求

• 跨浏览器兼容
• Ajax 部分更新
• Chart 控件

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

必须

• DOM 操作跨浏览器兼容
• JS 语言扩展
• 组件控件

可选

• 前端MV*
• 响应式布局
• 模块化加载
• 模板引擎
• 特殊渲染效果

最精简框架选择（A）

• jQuery
• Undersore
• jQuery UI

大而全解决方案（B）

• ExtJS 4+

紧跟时代选择方案（C）

• jQuery
• Undersore
• Bootstrap
• RequireJS
• Chart.js

大而全的 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>

• 传统方式会有大量 HTML/JS 文件。JS 文件通过在 HTML 文件中使用 <script> 来引入 JS。每一个链接会指向特定的 HTML。
• RIA 推荐只有一个 HTML 的文件，所有的渲染通过 JS 来完成。所有 JS 通过模块加载器来加载。每一个链接都指向自己，但是通过区别不同事件触发控件，用 JS 来渲染内容。
• 相比于传统方式，RIA 更容易做到模块化，因为 JS 比 HTML 更容易模块化。

模块化组织 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 文档显得非常重要。

• 工具生成：Extjs-doc
  • 不单单对 Extjs 有效，其实所有 Javascript 都可以通过这个来生成静态页面文档。
• 自己写文档