在4月16日的百度技術(shù)沙龍里，我們邀請百度前端通用組技術(shù)組負責人雷志興和去哪兒網(wǎng)的前端組負責人胡金埔，在沙龍分別跟大家分享百度和去哪兒網(wǎng)在JavaScript庫的設(shè)計和運用實踐經(jīng)驗。本文對他們的分享做簡單回顧。

　　百度前端的七巧板——Tangram Javascript庫

　　雷志興在他的分享中向我們介紹了百度設(shè)計Tangram庫的原因，設(shè)計目標，以及Tangram庫的架構(gòu)和特點。

　　在分享中雷志興提到百度的產(chǎn)品主要分為三類：

● 搜索類產(chǎn)品：用戶的需求是想盡可能快的得到響應(yīng)，盡快獲取自己想要的內(nèi)容。

● 社區(qū)類產(chǎn)品：這類產(chǎn)品每天都在變化，以適應(yīng)不同用戶各種情況下的需求。

● 商業(yè)類產(chǎn)品：大家了解的比較少，比如百度的廣告管家，是面向客戶的應(yīng)用，對頁面交互要求很高。注重的是用戶體驗。

　　百度自99年成立到現(xiàn)在，前端產(chǎn)品有很多遺留的代碼。一方面是為了解決這些遺留代碼，另一方面是為了更好的設(shè)計產(chǎn)品，讓工程師快速開發(fā)出好的可持續(xù)維護的前端產(chǎn)品。百度前端通用技術(shù)組設(shè)計了他們的JS庫——Tangram

　　百度的JS代碼可以分為四層：

● 第一層：Base基礎(chǔ)庫，職能單一的基礎(chǔ)方法。為其他層提供基本的操作支持。

● 第二層：Component，跨產(chǎn)品線級別的通用組件。

● 第三層：Widget，不包含任何業(yè)務(wù)代碼，是一種能夠讓所有產(chǎn)品線方便開發(fā)的機制。

● 第四層：App，業(yè)務(wù)邏輯，前面三層都是為這一層服務(wù)的。

　　接下來，雷志興開始介紹Tangram庫的設(shè)計特點。

● 提供容易封裝的靜態(tài)方法。

● 按需裝載，保證從中調(diào)出的代碼都是最小的。

● 增加兼容性，實現(xiàn)與現(xiàn)有的系統(tǒng)零沖突。

● 盡量拆分控件功能特性，讓所有特性實現(xiàn)可插拔

● 提供多種初始化方式，讓用戶根據(jù)自己的需要選擇。

　　最后，雷志興又對他們的UI系統(tǒng)結(jié)構(gòu)做了簡單介紹。通過建立這樣一個適合百度所有產(chǎn)品的庫，不僅能讓產(chǎn)品線高效開發(fā)JavaScript，而且也讓前端項目變的持續(xù)可維護。

　　Qunar的JavaScript模塊化之路

　　胡金埔是去哪兒網(wǎng)的前端架構(gòu)師、前端組負責人，他在本期沙龍跟大家分享的是去哪兒網(wǎng)建設(shè)JavaScript庫的實踐經(jīng)驗。在分享的開始，胡金埔先給大家看了一段糟糕的代碼，引出這次分享的話題。

用LabJs實現(xiàn)更好的加載，采用Ant、Rake、Nginx等實現(xiàn)文件的壓縮和合并。如果做到這些，對前端開發(fā)來說是不是就足夠了呢？這樣的話，對一個簡單頁面來說是足夠的，但是對于現(xiàn)在的富客戶端只能說是可能足夠。

　　在去哪兒網(wǎng)產(chǎn)品發(fā)展的過程中，他們也采用過許多優(yōu)秀的JavaScript開源框架，但因為缺乏具體的針對性，一些老代碼的維護工作變的非常繁重。在產(chǎn)品開發(fā)的實踐過程中，去哪兒網(wǎng)開發(fā)出了自己的JavaScript庫Module.js和Qtest。胡金埔在沙龍現(xiàn)場向大家分享和演示了Module.js和Qtest，并特別介紹了Qtest。

　　Qtest是一個基于本地瀏覽器的JavaScript測試工具，具有以下優(yōu)點：

● 基于Qunit

● 真實瀏覽器環(huán)境（可測試多個瀏覽器）

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

● 支持Rake（使用Ruby語法）

　　OpenSpace

　　在沙龍最后的環(huán)節(jié)依舊是講師、嘉賓和參會者共同參與的交流，本次我們邀請的嘉賓是淘寶北京的前端工程師羅克彪同學(xué)。本次OpenSpace的話題：

　　去哪兒網(wǎng)——林浩：QTEST代碼測試化之路

我們在做前端測試時，發(fā)現(xiàn)測試是前端開發(fā)一個重要環(huán)節(jié)。輕松快速的實現(xiàn)測試，就是Qtest的設(shè)計目標，剛才我簡單介紹了Qtest的一些基礎(chǔ)的東西。同時也希望大家在活動后可以上網(wǎng)查看一下，現(xiàn)在前端測試框架和手段有哪些，用測試的手段控制代碼的質(zhì)量，彌補不足，提高代碼的質(zhì)量。

　　百度——雷志興：如何設(shè)計適合自己團隊的JS庫

我們組大部分人都是在自己公司自己的內(nèi)部做通用的研發(fā)的。在討論中發(fā)現(xiàn)大家對如何設(shè)計還是有些問題的。對什么時間做什么事情，以及如何提供技術(shù)支持，還比較模糊。這是一個值得長期研究的問題。我總結(jié)一下我的經(jīng)驗，在設(shè)計的時候要考慮兩件事情，一是產(chǎn)品，第二就是團隊。

　　淘寶——羅克彪：多人協(xié)作代碼組織

我們討論的問題是每個公司都會遇到的，就是一些老的產(chǎn)品中有一些代碼，在新產(chǎn)品中往往還要寫，造成工作的重復(fù)，如何避免這種重復(fù)，討論到最后討論到管理上面了，就是看大老板肯不肯下決心花費金錢和人力來整理這些代碼。

　　中軟國際——王磊：前端的安全問題，過多的業(yè)務(wù)邏輯放在前端，是否有安全隱患

我之所以提出這個問題，是因為我自己做了一個網(wǎng)站，只有一張頁面，能實現(xiàn)局部刷新。我把所有頁面組裝都放在了瀏覽器端。但是有一個問題，設(shè)定的值很可能會被用戶給改掉，刷新之后就會出現(xiàn)混亂。如何能避免這個問題？最后的結(jié)論是沒有辦法，因為數(shù)據(jù)到了瀏覽器端后是可以被修改的。第二個問題就是一個網(wǎng)站可否完全用阿賈克斯局部刷新來實現(xiàn)，討論的結(jié)果是可以，但是比較麻煩。主要是因為JS代碼維護起來比較難。

　　參會者博客

　　本期沙龍結(jié)束之后，有部分熱心的同學(xué)把自己參會的過程和筆記整理成博客，和大家一起分享。摘錄如下：

　　參加“百度技術(shù)沙龍”JavaScript庫的設(shè)計與應(yīng)用筆記中，作者把他在雷志興的分享中記的筆記跟大家做了分享；另外在JavaScript庫的設(shè)計與應(yīng)用——百度技術(shù)沙龍第十三期圖文放送！！中作者對兩位講師的分享做了一下總結(jié)，并貼上了圖片和大家一起共享。非常感謝這些熱心的同學(xué)，也歡迎大家繼續(xù)通過博客或微博分享在沙龍中的心得。

　　下期百度技術(shù)沙龍的開放日期預(yù)定為5月21日，大家可以隨時登陸InfoQ官方微博或者百度技術(shù)沙龍微博群了解最新動向。同時也歡迎大家登陸新浪微博，提出對沙龍的期望和建議，發(fā)布相關(guān)話題時，請注意標注#百度技術(shù)沙龍#。謝謝！

it知識庫：JavaScript庫的設(shè)計與應(yīng)用，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。