AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

  • 2011-08-24
  • 本文字数:2303 字

    阅读完需:约 8 分钟

在 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 期所有百度技术沙龙的演讲视频和资料等,感兴趣的读者可以直接浏览阅读

2011-08-24 20:284652
用户头像

发布了 156 篇内容, 共 55.7 次阅读, 收获喜欢 7 次。

关注

评论

发布
暂无评论
发现更多内容

HarmonyOS运动开发:户外运动中计算卡路里

王二蛋和他的张大花

鸿蒙 os

安全产品//等保一体机

黑龙江陆陆信息测评部

提升效率,从一个时间戳转换工具开始,CodeBuddy Craft 实战分享

不惑

CodeBuddy首席试玩官

HarmonyOS NEXT 中级开发笔记:音乐播放器ArkUI实践

chengxujianke

大厂外包VS小公司,你会怎么选?

王中阳Go

Go 外包 小公司

AI辅助写作 从提笔难到高效创作的智能升级

郑州埃文科技

高分辨率LED显示屏:选购前的7个关键点

Dylan

商业 广告 LED显示屏 全彩LED显示屏 led显示屏厂家

WebGL 的开发框架

北京木奇移动技术有限公司

软件外包公司 webgl开发 webgl开发公司

CAD如何导出PDF?PDF如何转CAD?详细教程来了

在路上

cad cad看图 CAD看图软件

AI技术在英语口语学习中的应用

北京木奇移动技术有限公司

软件外包公司 AI口语练习 AI英语学习

从清华实验室到京东零售技术:一位算法工程师的风控实战录

京东零售技术

MySQL派生条件下推优化导致自定义变量结果错误问题分析

GreatSQL

全新开源鸿蒙电脑开鸿Bot系列即将上市,搭载的KaihongOS桌面版四大体验引期待

科技热闻

WebGL开发框架的性能比较

北京木奇移动技术有限公司

软件外包公司 webgl外包开发 webgl开发公司

【CodeBuddy】三分钟开发一个实用小功能之:马赛克生成器

jimaks

CSS

NocoBase 本周更新汇总:模板打印支持批量打印

NocoBase

开源 低代码 零代码 版本更新 模板打印

SEUs获取与续证流程

ShineScrum

敏捷

Second-Brain 如何用 NocoBase 为金融企业构建 AI 系统

NocoBase

开源 AI 低代码 AI系统 决策系统

【FAQ】HarmonyOS SDK 闭源开放能力 —Live View Kit (3)

HarmonyOS SDK

harmoyos

HarmonyOS NEXT 中级开发笔记:基于ArkUI的健身体操应用界面实践

chengxujianke

【HarmonyOS 5】鸿蒙mPaaS详解

GeorgeGcs

鸿蒙 HarmonyOS mPaaS

WebGL技术在行业中的应用

北京木奇移动技术有限公司

软件外包公司 webgl开发 webgl技术

如何设计一个高性能可扩展的自旋锁

程序员老王

如何将CAD图纸直接导出为工程蓝图?

在路上

cad cad看图 CAD看图王

vivo 官网 APP 首页端智能业务实践

vivo互联网技术

深度学习 算法 前端

WebGL开发框架的比较

北京木奇移动技术有限公司

软件外包公司 webgl开发 webgl外包开发

告别静态UI!Guineration用AI打造用户专属动态界面

鼎道智联

HarmonyOS NEXT 中级开发笔记:基于ArkUI的燃脂运动应用实践

chengxujianke

AI只不过是"普通"技术 [翻译&阅读笔记]

技艺的尾巴

容器技术驱动云原生与小程序生态融合:应用开发新范式

xuyinyin

深入浅出DDD:从理论到落地的关键

百度Geek说

Go 后端

百度技术沙龙第1​7期回顾:​富客户端时代的JavaScript框架(含资料下载)_Web框架_贾国清_InfoQ精选文章