
對(duì)于JS,相信很多的強(qiáng)語(yǔ)言開(kāi)發(fā)人員都深?lèi)和唇^,沒(méi)有類(lèi)型定義,沒(méi)有官方正統(tǒng)的繼承方式,沒(méi)有強(qiáng)大的類(lèi)庫(kù),容易出錯(cuò)…要細(xì)數(shù)JS的缺點(diǎn),任何一個(gè)開(kāi)發(fā)人員都可以滔滔不絕講上幾個(gè)小時(shí)。但不可否認(rèn)的是,JS擁有其他語(yǔ)言所不及的靈活性,并且JS已經(jīng)成為最流行的開(kāi)發(fā)語(yǔ)言之一,github排名也保持在第一位。

為了適應(yīng)快速發(fā)展的JS,技術(shù)實(shí)現(xiàn)上出現(xiàn)了三種分支。
1. 包裝式技術(shù)。例如GWT,JSF,利用其他技術(shù)生成對(duì)應(yīng)的JS代碼,這種方式結(jié)局已經(jīng)很明了,GWT已經(jīng)關(guān)閉,而JSF最新的2.2標(biāo)準(zhǔn)是二年前發(fā)布的,還僅僅是標(biāo)準(zhǔn)!
2. 基于JS,實(shí)現(xiàn)傳統(tǒng)view端的再次分離。例如Backbone,AngularJS,Ember等,這種方式目前是主流,并且有成熟的解決方案。
3. 第三種是使用JS的超集,例如typescript,atscript來(lái)實(shí)現(xiàn)模塊,類(lèi)以及類(lèi)依賴(lài)。這是JS的大勢(shì)所趨,ES5以及ES6的標(biāo)準(zhǔn)也都注重于這些,AngularJS2.0就是使用ATScript進(jìn)行開(kāi)發(fā),但是目前還未成熟。
今天,我們就來(lái)比較一下第二種方案中提到的兩個(gè)框架:Backbone 和 AngularJS。對(duì)于Backbone以及AngularJS,我在實(shí)際的項(xiàng)目中使用過(guò),希望通過(guò)我對(duì)這兩個(gè)框架的見(jiàn)解,讓更多的人在選擇前端框架時(shí),有更好的依據(jù)。
1. Backbone
首先來(lái)說(shuō)說(shuō)Backbone的缺點(diǎn)。
1) Backbone嚴(yán)格來(lái)說(shuō)是MVR框架,M代表Model,V代表View,R代表Route。讀者也許看出來(lái)了,并沒(méi)有Controller,因?yàn)锽ackbone中使用View來(lái)代替Controller的處理,也就必然導(dǎo)致View中大量的DOM操作,煩不勝煩,也會(huì)導(dǎo)致JS代碼量的飆升。
2) Backbone只是提供了一個(gè)輕量級(jí)的框架原型,一般性的操作例如模板的渲染,Model的填充以及收集,RestfulAPI等操作都是需要開(kāi)發(fā)人員手動(dòng)去做的;
3) Backbone沒(méi)有組件的概念,導(dǎo)致很多類(lèi)似的模板存在多個(gè)版本的情況,并不能實(shí)現(xiàn)復(fù)用。所以在使用Backbone的項(xiàng)目中,JS模板都是抄來(lái)抄去!
很多讀者在看完如上Backbone的缺點(diǎn)后,對(duì)Backbone大失所望,決定放棄Backbone? 那你就錯(cuò)了。存在即合理。Backbone也有很多自己的優(yōu)點(diǎn)!
1) 正是由于Backbone的輕量化,可以使得項(xiàng)目的框架更具靈活性??蓪?shí)現(xiàn)高度的封裝,也可隨意的進(jìn)行自定義并重寫(xiě)。
2) 很容易和其他的類(lèi)庫(kù)進(jìn)行結(jié)合。RequireJS,Alertify,bootbox,bootstrap,jquery....等等。
3) 學(xué)習(xí)曲線(xiàn)很平滑!看得懂JS就可以使用Backbone。
4) 社區(qū)很活躍,現(xiàn)在很多不錯(cuò)的基于Backbone的Plugin。例如marionette。
5) 很多知名的項(xiàng)目都選擇使用Backbone,例如OpenERP,eteams。推薦想學(xué)Backbone的同學(xué)可以去看這兩個(gè)項(xiàng)目的前臺(tái)源碼,OpenERP使用了后端組件來(lái)彌補(bǔ)Backbone沒(méi)有組件的缺陷,是非常值得借鑒的。
2. AngularJS
這個(gè)就是大名鼎鼎的Google收購(gòu)并支持的框架。請(qǐng)千萬(wàn)別迷信Google,選擇的時(shí)候要慎重?。?!因?yàn)镚WT也是Google支持的,最后的結(jié)局,你懂得。一開(kāi)始我是沒(méi)有選擇AngularJS的,因?yàn)锳ngularJS的自定義指令,讓我想起了當(dāng)年開(kāi)發(fā)JSF的痛苦,所以沒(méi)有深入了解就直接拋棄了。休假期間,無(wú)聊看了幾本AngularJS的書(shū),讓我對(duì)它充滿(mǎn)了好奇,并且得以在項(xiàng)目中使用。首先呢,也講下我認(rèn)為的AngularJS的不足之處(防止被噴)
1) AngularJS雖然遵循AMD,但并沒(méi)有提供Lazy Load的實(shí)現(xiàn),也很難結(jié)合使用RequireJS模塊加載器,很多讀者可能會(huì)說(shuō),使用Grunt來(lái)合并并壓縮模板以及JS文件,我曾經(jīng)嘗試過(guò),但最后放棄了。第一由于我的開(kāi)發(fā)是基于SOA思想的,合并文件明顯違反SOA的架構(gòu),打包安裝時(shí)也不好處理。第二,我忍受不了用戶(hù)不使用也要下載的機(jī)制。當(dāng)然,讀者可以去Google搜索RequireJS+AngularJS的完美結(jié)合方案,國(guó)外有大牛還是實(shí)現(xiàn)的了(百度你絕對(duì)搜不到),如果有讀者感興趣,請(qǐng)私信我要解決方案。
2) 難于學(xué)習(xí)。Module,Controller,Service,F(xiàn)ilter,Directive,DI...... 一大頓的新名詞撲面而來(lái),嚇退了很多的開(kāi)發(fā)人員。并且AngularJS的開(kāi)發(fā)思想完全有別于傳統(tǒng)的JQuery開(kāi)發(fā),已經(jīng)視JQuery是“銀彈”的同學(xué),絕對(duì)會(huì)顛覆你的“程序員觀(guān)”!
3) 雙向數(shù)據(jù)綁定,導(dǎo)致難于Debug。很多時(shí)候,你都不知道一個(gè)指令到底是在那個(gè)Controller中。
4) 不夠靈活。在很多的大型項(xiàng)目中,各種復(fù)雜的特殊需求煩不勝煩,它們往往會(huì)顛覆原有的框架,如果設(shè)計(jì)不夠靈活,往往會(huì)讓你使用各種Hack,最后導(dǎo)致你的項(xiàng)目成為“意大利面式”的設(shè)計(jì)。AngularJS的Controller并沒(méi)有提供繼承重寫(xiě)的概念,對(duì)于這些需求,AngularJS有些吃力。我目前也在研究這個(gè)Case的解決方案。
5) 很難與其他的JS類(lèi)庫(kù)相結(jié)合。JQuery發(fā)展這么多年,市場(chǎng)上到處是JQuery式的組件,都很難封裝為AngularJS的組件。
6) Google并沒(méi)有使用AngularJS,我一直也沒(méi)找到大型并且成功的AngularJS的項(xiàng)目。
相比于這些缺點(diǎn),AngularJS的優(yōu)點(diǎn)絕對(duì)會(huì)讓很多程序員心動(dòng)??!
1) Model自動(dòng)綁定,不用開(kāi)發(fā)人員手動(dòng)填充以及收集數(shù)據(jù);
2) 指令自動(dòng)綁定Controller,不用手動(dòng)綁定事件,大大節(jié)省代碼量??!有多大大??請(qǐng)自己去百度搜索Backbone和AngularJS的對(duì)比;
3) 自定義組件。這個(gè)!!這個(gè)簡(jiǎn)直是“銀彈”!!可以完全拋棄JSP Tag,F(xiàn)reeMarker Macro,JSF Component這些蛋疼的服務(wù)器組件技術(shù),實(shí)現(xiàn)前端的組件重用,而不用頻繁的和服務(wù)器進(jìn)行交互;
4) 依賴(lài)注入(DI)!?。。?!這個(gè)NB絕逼不亞于自定義組件的好處!什么?你不懂依賴(lài)注入的好處........ 赫赫有名的Spring框架的兩大基礎(chǔ)就是依賴(lài)注入和AOP!
5) Filter簡(jiǎn)潔方便的實(shí)現(xiàn)前段的數(shù)據(jù)格式化,而不用開(kāi)發(fā)者到處格式化數(shù)據(jù);
當(dāng)然,AngularJS不僅僅這些優(yōu)點(diǎn),不過(guò)相信這些足夠讓讀者在選擇前臺(tái)框架時(shí)做出最適合自己的選擇。
Backbone的靈活性,可以給設(shè)計(jì)足夠多的空間,但是很多功能需要開(kāi)發(fā)者自己去實(shí)現(xiàn)。而AngularJS的大而全,卻也限制設(shè)計(jì)的靈活性。
我目前正在使用AngularJS,如上我講到的AngularJS的缺點(diǎn),如果讀者有可行的解決方案,歡迎指教!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線(xiàn),公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。