QQ地帶

提到JavaScript庫，相信很多讀者首先就會想到一系列著名的JavaScript庫，例如jQuery、Dojo、YUI、Prototype、ExtJS、Google Closure等。這些都是由國外的組織或人員主持開發的，并且大都是開源項目，在中國大陸也受到了開發人員的普遍歡迎。

 

其實，在國內也存在著一些比較優秀的前端開發框架，并且也大多是開源的，這里以騰訊、淘寶和百度使用的JavaScript前端開發框架為例進行介紹。

 

 

騰訊內部使用的前端開發框架，名為JX，由騰訊的Web前端團隊Alloy Team(簡稱TAT，Tencent Alloy Team)主持研發。根據JX官方首頁的描述，JX 框架同時適用于 Web Page 和 Web App 項目的開發，特別適合構建和組織大規模、工業級的Web App，騰訊WebQQ、Q+等產品的前端均是基于此框架開發的。JX于2009年在Google Code上對外開源發布，并于2012年切換到GitHub進行后續研發和維護。

 

與jQuery等框架類似的是，JX的核心組件(JX Core)也是針對JavaScript進行功能增強，并做了大量的跨瀏覽器兼容處理。此外，JX還采用命名空間、閉包等方式建立了模塊化的封裝體系,JX內部采用分層設計，支持模塊自由拼湊。值得注意的是，JX支持多版本共存，如采用的Jx版本過舊，舊有的Javascript代碼不能與新版本Jx兼容，則可以采用多版本共存的方式保持程序的可延續性。此外，JX還可以與其他各類JS框架進行無縫集成，例如：jQuery、YUI、Prototype、Mootools、Mini、Sizzle。

 

JX還提供對應的UI組件，類似于jQuery UI，常用的Button、TextBox、Calendar、Panel、RichEditor、Tab、Loading、DivSelect、ContextMenu等組件均有提供。

 

JX的最新開源地址是http://alloyteam.github.com/JX/。

 

 

 

 

淘寶內部使用的前端開發框架名為KISSY，也是由淘寶自己的前端「攻城師」發起創建的一個開源的JavaScript類庫。

 

與JX類似的是，KISSY也主要分為Core和UI組件兩部分，Core部分就不多說什么了，不過在UI部分，KISSY居然實現了一些相對比較時尚的功能組件，例如flash、graph、chart、velocity(模板引擎)、randombox(轉盤搖獎)、ua-extra(國產瀏覽器探測)、checkcode(播放語音驗證碼，屬Util組件)。

 

不過值得吐槽的是，不知道是由于「藏私」還是工作繁忙所致，KISSY對外公開的API文檔和Demo給人的感覺是還不夠完善，部分的入門講解估計無法讓人入門，可能還會使人迷路(至少在筆者編寫此文時如此)……

 

KISSY的官方網址是http://docs.kissyui.com/。

 

 

 

 

 

 

百度內部目前主要使用的前端JavaScript開發框架叫做Tangram(中文名：七巧板)，也是由百度自己的JS小組負責主持研發的。按照Tangram官方網站的描述來說，Tangram的API和jQuery極其相似(保持高度兼容)，編程風格也提倡jQuery的鏈式編程風格，但是比jQuery更加高效。

 

百度內部使用Tangram的部分產品：

 

Tangram和jQuery本身一樣，只包括JavaScript處理核心部分，并不包含UI組件；至于UI組件部分，則以產品的形式獨立對外發布，百度的UI組件產品名叫Magic。百度的Magic與其他前端產品相比，組件數量相對較少，目前只包含10個UI組件。值得注意的是，Magic的底層依賴既可以使用百度的Tangram，也可以使用jQuery。

 

令人郁悶的是，Tangram的Demo打包下載下來居然無法直接運行Demo，還需要下載額外的文件并配置后才能正確運行。

 

Tangram的官方網址是http://tangram.baidu.com/。

 

Magic的官方網址是http://tangram.baidu.com/magic/。

 

 

 

Qwrap是百度有啊(現已轉型為愛樂活)前端開發團隊WedTeam推出的一個JavaScript框架，在BSD協議下開源發布。Qwrap支持jQuery、YUI、Prototype等多種不同風格的編碼方式。

 

 

//像prototype一樣這樣寫： 
new Date().format(); 
 
//像jquery一樣，這樣寫： 
W("#aaa a.aaa").click(fun).css("color", "red"); 
W("body").css("color", "black").query(">h1").color("red"); 
 
//還可以像YUI3一樣這樣寫： 
use("Drag,Valid", function(){ alert([Drag, Valid]);}); 
 
//當然，也可以像YUI2一樣用靜態方法(當然，我們不推薦YUI2這種用法)： 
Dom.setStyle(el, "color", "red"); 

此外，我們還驚奇地發現，不僅百度自己在使用Qwrap，曾經的「3B大戰」的另一方360居然也在使用Qwrap，甚至連Qwrap官方的CDN托管地址也是指向360的。這果然是「技術沒有國界」的又一偉大證明。

 

 

 

Qwrap的官方網址是http://www.qwrap.com/。 使用Qwrap的部分用戶如下：

 

奇虎問答、360安全快遞、圈樂、愛樂活(http://www.leho.com)360云盤、酷六、360影視、360安全網址音樂、

百度開放云平臺、當然，除了騰訊、淘寶、百度之外，國內還有一些比較優秀的JavaScript前端開發框架，現將其網址列舉如下，此處就不再一一贅述了。

 

Como JS – http://www.comojs.com

EdoJs – http://www.edojs.com/

KindEditor – https://github.com/kindsoft/kindeditor

NJF – http://code.google.com/p/njf/

JSI – http://code.google.com/p/jsi/