JavaScript 庫的設(shè)計(jì)與應(yīng)用是怎樣的

本篇文章為大家展示了JavaScript 庫的設(shè)計(jì)與應(yīng)用是怎樣的，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

在 4 月 16 日的百度技術(shù)沙龍里，我們邀請(qǐng)百度前端通用組技術(shù)組負(fù)責(zé)人雷志興和去哪兒網(wǎng)的前端組負(fù)責(zé)人胡金埔，在沙龍分別跟大家分享百度和去哪兒網(wǎng)在 JavaScript 庫的設(shè)計(jì)和運(yùn)用實(shí)踐經(jīng)驗(yàn)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Qunar 的 JavaScript 模塊化之路（點(diǎn)擊下載音視頻、文字資料）

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

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

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

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

● 基于 Qunit

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

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

 ● 支持 Rake（使用 Ruby 語法）

OpenSpace

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

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

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

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

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

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

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

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

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

上述內(nèi)容就是JavaScript 庫的設(shè)計(jì)與應(yīng)用是怎樣的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。