在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官方微博或者百度技術沙龍微博群了解最新動向。同時也歡迎大家登陸新浪微博，提出對沙龍的期望和建議，發布相關話題時，請注意標注#百度技術沙龍#。謝謝！