百度技术沙龙第 13 期 JavaScript 库的设计与应用

本文做者：HelloDeveloper

在 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 库的设计与应用——百度技术沙龙第十三期图文放送！！中做者对两位讲师的分享作了一下总结，并贴上了图片和你们一块儿共享。很是感谢这些热心的同窗，也欢迎你们继续经过博客或微博分享在沙龙中的心得。

 

原文连接地址：https://developer.baidu.com/topic/show/290173