JavaScript 庫的設計與應用是怎樣的

本篇文章為大家展示了JavaScript 庫的設計與應用是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

在 4 月 16 日的百度技術沙龍里，我們邀請百度前端通用組技術組負責人雷志興和去哪兒網的前端組負責人胡金埔，在沙龍分別跟大家分享百度和去哪兒網在 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 庫的設計與應用是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。