百度技術沙龍第 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