百度技术沙龙第 13 期内容回顾：JavaScript 库的设计与应用

在 4 月 16 日的百度技术沙龙里，我们邀请百度前端通用组技术组负责人雷志兴和去哪儿网的前端组负责人胡金埔，在沙龙分别跟大家分享百度和去哪儿网在 JavaScript 库的设计和运用实践经验。本文对他们的分享做简单回顾。并提供相关音视频、文字资料下载。

百度前端的七巧板——Tangram Javascript 库（点击下载音视频、文字资料）

雷志兴在他的分享中向我们介绍了百度设计 Tangram 库的原因，设计目标，以及 Tangram 库的架构和特点。

在分享中雷志兴提到百度的产品主要分为三类：

● 搜索类产品：用户的需求是想尽可能快的得到响应，尽快获取自己想要的内容。● 社区类产品：这类产品每天都在变化，以适应不同用户各种情况下的需求。

● 商业类产品：大家了解的比较少，比如百度的广告管家，是面向客户的应用，对页面交互要求很高。注重的是用户体验。

百度自 99 年成立到现在，前端产品有很多遗留的代码。一方面是为了解决这些遗留代码，另一方面是为了更好的设计产品，让工程师快速开发出好的可持续维护的前端产品。百度前端通用技术组设计了他们的 JS 库——Tangram

百度的 JS 代码可以分为四层：

● 第一层：Base 基础库，职能单一的基础方法。为其他层提供基本的操作支持。● 第二层：Component，跨产品线级别的通用组件。

● 第三层：Widget，不包含任何业务代码，是一种能够让所有产品线方便开发的机制。

● 第四层：App，业务逻辑，前面三层都是为这一层服务的。

接下来，雷志兴开始介绍 Tangram 库的设计特点。

● 提供容易封装的静态方法。● 按需装载，保证从中调出的代码都是最小的。

● 增加兼容性，实现与现有的系统零冲突。

● 尽量拆分控件功能特性，让所有特性实现可插拔

● 提供多种初始化方式，让用户根据自己的需要选择。

最后，雷志兴又对他们的 UI 系统结构做了简单介绍。通过建立这样一个适合百度所有产品的库，不仅能让产品线高效开发 JavaScript，而且也让前端项目变的持续可维护。

Qunar 的 JavaScript 模块化之路（点击下载音视频、文字资料）

胡金埔是去哪儿网的前端架构师、前端组负责人，他在本期沙龙跟大家分享的是去哪儿网建设 JavaScript 库的实践经验。在分享的开始，胡金埔先给大家看了一段糟糕的代码，引出这次分享的话题。

用 LabJs 实现更好的加载，采用 Ant、Rake、Nginx 等实现文件的压缩和合并。如果做到这些，对前端开发来说是不是就足够了呢？这样的话，对一个简单页面来说是足够的，但是对于现在的富客户端只能说是可能足够。

在去哪儿网产品发展的过程中，他们也采用过许多优秀的 JavaScript 开源框架，但因为缺乏具体的针对性，一些老代码的维护工作变的非常繁重。在产品开发的实践过程中，去哪儿网开发出了自己的 JavaScript 库 Module.js 和 Qtest。胡金埔在沙龙现场向大家分享和演示了 Module.js 和 Qtest，并特别介绍了 Qtest。

Qtest 是一个基于本地浏览器的 JavaScript 测试工具，具有以下优点：

● 基于 Qunit● 真实浏览器环境（可测试多个浏览器）

● 可方便的添加插件（Jshint、Keywords）

● 支持 Rake（使用 Ruby 语法）

OpenSpace

在沙龙最后的环节依旧是讲师、嘉宾和参会者共同参与的交流，本次我们邀请的嘉宾是淘宝北京的前端工程师罗克彪同学。本次 OpenSpace 的话题：

去哪儿网——林浩：QTEST 代码测试化之路

我们在做前端测试时，发现测试是前端开发一个重要环节。轻松快速的实现测试，就是 Qtest 的设计目标，刚才我简单介绍了 Qtest 的一些基础的东西。同时也希望大家在活动后可以上网查看一下，现在前端测试框架和手段有哪些，用测试的手段控制代码的质量，弥补不足，提高代码的质量。

百度——雷志兴：如何设计适合自己团队的 JS 库

我们组大部分人都是在自己公司自己的内部做通用的研发的。在讨论中发现大家对如何设计还是有些问题的。对什么时间做什么事情，以及如何提供技术支持，还比较模糊。这是一个值得长期研究的问题。我总结一下我的经验，在设计的时候要考虑两件事情，一是产品，第二就是团队。

淘宝——罗克彪：多人协作代码组织

我们讨论的问题是每个公司都会遇到的，就是一些老的产品中有一些代码，在新产品中往往还要写，造成工作的重复，如何避免这种重复，讨论到最后讨论到管理上面了，就是看大老板肯不肯下决心花费金钱和人力来整理这些代码。

中软国际——王磊：前端的安全问题，过多的业务逻辑放在前端，是否有安全隐患

我之所以提出这个问题，是因为我自己做了一个网站，只有一张页面，能实现局部刷新。我把所有页面组装都放在了浏览器端。但是有一个问题，设定的值很可能会被用户给改掉，刷新之后就会出现混乱。如何能避免这个问题？最后的结论是没有办法，因为数据到了浏览器端后是可以被修改的。第二个问题就是一个网站可否完全用阿贾克斯局部刷新来实现，讨论的结果是可以，但是比较麻烦。主要是因为 JS 代码维护起来比较难。

参会者博客

本期沙龙结束之后，有部分热心的同学把自己参会的过程和笔记整理成博客，和大家一起分享。摘录如下：

参加“百度技术沙龙”JavaScript 库的设计与应用笔记中，作者把他在雷志兴的分享中记的笔记跟大家做了分享；另外在 JavaScript 库的设计与应用——百度技术沙龙第十三期图文放送！！中作者对两位讲师的分享做了一下总结，并贴上了图片和大家一起共享。非常感谢这些热心的同学，也欢迎大家继续通过博客或微博分享在沙龙中的心得。

下期百度技术沙龙的开放日期预定为 5 月 21 日，大家可以随时登陆 InfoQ 官方微博或者百度技术沙龙微博群了解最新动向。同时也欢迎大家登陆新浪微博，提出对沙龙的期望和建议，发布相关话题时，请注意标注#百度技术沙龙#。谢谢！