百度技术沙龙第 1​7 期 富客户端时代的 JavaScript 框架

在 8 月 20 日百度主办、InfoQ 策划组织实施的第 17 期百度技术沙龙活动上，来自百度商务搜索部前端工程师董睿以及 IBM 中国开发中心的高级软件工程师成富，分别分享了 JavaScript 框架的相关话题，话题涉及企业级 RIA 框架的应用以及实际产品开发中的 Dojo 框架。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

 

主题一：整站式 Ajax 应用开发与 ER（Enterprise RIA）框架（视频，MP3 和 Slides 等资料下载）

 

来自百度的前端工程师董睿第一个为大家分享，演讲内容涵盖整站式 Ajax 应用介绍、ER（Enterprise RIA）框架介绍以及整站式 Ajax 与 ER 框架的应用开发，其中重点讲述了整站式 Ajax 与 ER 框架在实际开发中的应用。董睿首先列举了常见开发中遇到的问题：​​​​​​

 

URL 敏感

浏览器的前进后退

处理 Location 对应的请求行为（数据加载、视图渲染等）

Action 太多，乱七八糟

数据怎么管理

数据可能被多个场景使用

在 JavaScript 里写 HTML 片段很不爽（换行、转义等）

UI 控件管理界面交互

复杂区块的渲染

频繁的 new 与 append

进入页面的时候加载的 Js 文件太大​

在 ER 框架中，主要的解决方法有：

 

封装 Locator（当 Locator 变更时，Locator 通知 Router 分发到某个 JavaScript Function 进行处理）

Controller 转交给某个 Object 进行处理（Action）

Action 对模型与视图进行选择与匹配，完成用户行为的处理

对相似业务逻辑的 Action 进行归类

数据的存储容器

针对 propertychange 的事件监听机制

public 与 private 分级

使用 HTML 注释

支持不闭合声明

支持对 model 和 JS Object 的引用：${}

不提供流程控制的支持

通过自定义 ui 标签来实现便捷的控件创建方式

通过“*”来实现方便的引用 Context 中的数据

controller 根据 path 选择 Action 时，自动加载，以此来解决加载 Js 文件太大的问题

此外，董睿还分别从目录结构、架构的分层结构、开发时的 JavaScript 管理、开发时的 CSS 管理、开发时的 template 管理以及打包与压缩等常见的场景，通过具体的代码示例以及相应的总结，将其在开发中的经验加以分享。

 

最后，董睿总结了 ER 框架所具备的特性：实现了历史记录，前进后退等功能的封装、URL 敏感，处理 Location 对应的请求，提供数据环境，数据模型，HTML 片段编写的便利性，控件的加载与业务行为，按需加载，目录结构以及开发时的源代码管理等。​

 

主题二：实际产品开发中的 Dojo（视频，MP3 和 Slides 等资料下载）

 

成富主要从 JavaScript 框架的世界讲起，阐述为什么要选择 Dojo 这么一个开源的产品，然后介绍了实际产品和项目中的 Dojo 开发，最后总结了其在长期的使用过程中所遇到的经验与教训。

 

成富在演讲中提到，之所以 IBM 选择 Dojo 作为 IBM 的 RIA 标准框架，是因为 Dojo 具有交互性要求高、企业内联网和适合团队开发等特点。目前在 IBM，广泛使用 Dojo 框架的产品有 IBM Mashup Center、IBM Connections、Lotus Live。

 

接下来成富重点介绍了实际项目中的 Dojo 开发流程以及注意事项，只用 Dojo 的基本开发流程为：

 

界面草图（草图设计）

布局（使用布局组件手动控制）

组件（使用标准组件、扩展标准组件、自定义组件或是复用其它组件等）

界面（组件交互）

成富建议的组件使用路线图为：找到组件、直接使用组件、扩展组件，以及把组件功能发挥到极致的自定义组件。此外，成富还对组件从属性和方法的层面进行了剖析，介绍了组件的创建、销毁、交互以及扩展的注意点。在自定义组件时有以下几点需要注意：​

 

组件粒度的权衡（可复用性 vs 性能）。

组件的生命周期管理（创建与销毁）。

遵循惯例（属性和方法的命名，使用 dijit._widget 的方法）。

善用模板和容器（用 HTML 模板来创建基本骨架，继承 dijit._Container 来管理内部子组件）。

​最后，成富分享了其在开发中的经验和教训，目前主要面临的非功能性需求主要有：

 

性能问题

内存占有率和内存泄露问题

可访问性

单元测试​

以上问题的应对机制分别为：打包和压缩代码、控制页面上的组件数量，添加正确的组件销毁逻辑等。此外 Dojo 是首个提供支持完全可访问性组件库的 JavaScript 框架，还支持 W3C 的 ARIA 标准。单元测试的工作是通过 D.O.H 来进行逻辑单元测试的，同时使用 D.O.H Robot 还可进行界面相关的单元测试。

 

Open Space（开放式讨论环节）

 

和以往的环节一样，​为了让参会者能够有更多的时间进行相互的交流，本次活动依然设置了 Open ​Space（开放式讨论）环节。除了讲师​董睿和成富外，王文明、杨飞、贾珣也参与了小组讨论。在 Open Space 的总结环节，几位嘉宾​分别对讨论的内容进行了总结：​​

 

董睿分享了“Web 资源（文本）压缩”的话题，主要提到了 JavaScript 和 HTML 的一些压缩策略以及针对搜索引擎的优化策略等。​​成富则继续他演讲的话题“JS 框架在实际开发中的应用”，参会者对 Dojo 产生了浓厚的兴趣，成富对相关问题进行了解答，大家进行了深入的讨论，最后还讨论了关于常见 RIA 框架的一些问题。此外，王文明、杨飞、贾珣分别分享了“Zend Framework 快速开发和 PHP 性能优化”、“富客户端与轻量级互联网应用”以及“Node.js 的前景”等话题。

 

​​​​会后一些网友在新浪微博分享了他们参会的感受：

 

@陆明在京：今天下午百度技术沙龙主题和实用性都不错，蛮有价值的。

 

@北京辛星：# 百度技术沙龙 # 今天参加百度技术沙龙，对 js 富客户端有了更多的了解，谢谢组织者和分享话题的各位。

 

@甘志：# 百度技术沙龙 # 提供的冰啤酒不错，内容也很精彩，以后要多参加。