百度技术沙龙第17期回顾：富客户端时代的JavaScript框架（含资料下载）

最新推荐文章于 2021-06-18 10:50:59 发布

原创最新推荐文章于 2021-06-18 10:50:59 发布 · 380 阅读

CC 4.0 BY-SA版权

百度技术沙龙活动分享了企业级RIA框架与Dojo在实际产品开发中的应用，包括整站式Ajax应用开发、ER框架介绍、Dojo框架的世界、实际产品开发流程及组件使用策略，以及开发者在开发过程中的经验和教训。

在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的前景”等话题。

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