BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

百度技术沙龙第1​7期回顾:​富客户端时代的JavaScript框架(含资料下载)

| 作者 贾国清 关注 0 他的粉丝 发布于 2011年8月25日. 估计阅读时间: 7 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

在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富客户端有了更多的了解,谢谢组织者和分享话题的各位。

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

​有关百度技术沙龙的更多信息,可以通过新浪微博关注@百度技术沙龙,或者加入百度技术沙龙微群,InfoQ上也总结了过往15期所有百度技术沙龙的演讲视频和资料等,感兴趣的读者可以直接浏览阅读

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这个一定要支持! by 囧 南风囧

呵呵dojo框架,我们同样应用到了产品中!

Re: 这个一定要支持! by 贾 国清

呵呵dojo框架,我们同样应用到了产品中!

中文站相关Dojo文章可以参考:www.infoq.com/cn/search.action?queryString=dojo
另外,IBM的成富一直在负责做Dojo的社区推广工作,可以通过新浪微博和他交流,他的账号是@成富_Alex

好文。。。 by guo owen

好文。。。。。。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT