首頁(yè) 猿問(wèn) 對(duì)于前端 MVC 來(lái)說(shuō), DOM...

對(duì)于前端 MVC 來(lái)說(shuō), DOM API 是否是過(guò)度封裝了?

JavaScript

慕容708150 2019-04-06 16:57:40

沒(méi)從C++/Java學(xué)起,對(duì)MVC和面向?qū)ο蟮睦斫膺€是后來(lái)慢慢積累起來(lái)的相對(duì)我覺(jué)得腳本語(yǔ)言各種范式各種靈活,只是缺少面向?qū)ο蠼M織代碼的整齊呆板而且從前使用DOMAPI時(shí)候就覺(jué)得DOM就像一種數(shù)據(jù)類(lèi)型,JS操作數(shù)據(jù)同時(shí),也在更改界面.通過(guò)直接訪(fǎng)問(wèn)界面,也能讀取數(shù)據(jù),很強(qiáng)大對(duì)吧但我接觸Backbone一段時(shí)間,困惑也覺(jué)得越來(lái)越多而從前靈活解決前端問(wèn)題的思路,隨著MVC提出的分離有了各種阻礙,或者不方便直接JSDOM操作吧MVC在Backbone里是Model和View-Controller兩者分離,另加上Collection.每次Model(Collection)發(fā)生改變,View重新渲染一次,然后搞定或者DOM上的事件從Controller傳到Model里進(jìn)行一次改變,View跟著改變好這樣其實(shí)jQuery豐富的DOM操作就顯得無(wú)所用處如果在Backbone的應(yīng)用里加上大量的DOM操作,View刷新時(shí)又變得尷尬為了性能,JS在進(jìn)行DOM操作時(shí)會(huì)講操作全在HTML字符串里存儲(chǔ)好,一次寫(xiě)入可在Backbone里,如果小的item也是Model,那么render也是分開(kāi)了自己做的我理解,這樣兩者就不能夠很好地兼容,至少有一個(gè)方面要打折扣了另一個(gè)功能是實(shí)時(shí)保存和更新,純的DOM操作,JS監(jiān)聽(tīng)DOM,在背后保存數(shù)據(jù)很簡(jiǎn)單可在MVC里Model被監(jiān)聽(tīng),每次更新操作就會(huì)導(dǎo)致界面被重新繪制,也顯得很怪

查看完整描述

2 回答

翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

最早的時(shí)候，業(yè)務(wù)很簡(jiǎn)單，我們寫(xiě)樣的代碼。$.ajax({url:'http://ooxx.cn/getUser'success:function(user){//進(jìn)行DOM操作$('#name').val(user.name);$('#email').val(user.email);}})后來(lái)，user的字段越來(lái)越多。$.ajax({url:'http://ooxx.cn/getUser'success:function(user){//進(jìn)行DOM操作$('#name').val(user.name);$('#email').val(user.email);$('#address').val(user.address);$('#phone').val(user.phone);$('#blog').val(user.blog);//可能還有更多的字段，并且DOM操作不一定這么簡(jiǎn)單只是值的修改//可能還要負(fù)責(zé)整個(gè)視圖是否出現(xiàn)：比如isVIP為false時(shí)，出現(xiàn)付費(fèi)引導(dǎo)等。}})于是我們考慮將對(duì)象與模版進(jìn)行綁定，進(jìn)一步抽離$.ajax({url:'http://ooxx.cn/getUser'success:function(user){rener(user);}})varrender=function(obj){//進(jìn)行DOM操作$('#name').val(user.name);$('#email').val(user.email);$('#address').val(user.address);$('#phone').val(user.phone);$('#blog').val(user.blog);}只是簡(jiǎn)單的代碼封裝，整個(gè)結(jié)構(gòu)就清晰很多。但緊接著，我們開(kāi)始使用websocket來(lái)做界面的即時(shí)更新，于是代碼再次修改。這是一個(gè)用戶(hù)列表socket=newWebSocket("ws://192.168.1.71:7070");socket.onmessage=function(data){varobj=JSON.parse(data)if(obj.action==="update"){render(userList);}}varrender=function(obj){//進(jìn)行DOM操作$('#name').val(user.name);$('#email').val(user.email);$('#address').val(user.address);$('#phone').val(user.phone);$('#blog').val(user.blog);}很棒，接著我們想像到這個(gè)user將會(huì)有非常多的function，如果到處是$("")這樣的方式進(jìn)行DOM操作，如果有一天，HTML上的id/class要稍變一下，那改起來(lái)就痛苦了。把用戶(hù)這個(gè)做成Model，加上render(),showPhone(),sendEmail()這樣各種的方法。將大大增加代碼的組織能力。-------------------------其實(shí)上面寫(xiě)了這么多，只是想說(shuō)明，需求在不斷增加的時(shí)候，項(xiàng)目不斷變大的時(shí)候，原有的代碼組織無(wú)法滿(mǎn)足需要，需要站在各高的層次，將項(xiàng)目中常用的方法進(jìn)行抽離封裝。于是，便有了框架。backbone做得事很專(zhuān)注，充分發(fā)揮MVC的組織分層能力，繼續(xù)把DOM交給jQuery去做。而更新的前端MVC框架，如：angularjs,emberjs等，將model與template(HTML)進(jìn)行綁定，直接幫助你渲染，讓我們不用再關(guān)心渲染、DOM處理，而是把注意力集中在業(yè)務(wù)及交互處理上。既然是框架，解決的必然是復(fù)雜的、復(fù)雜的事情。如果只是簡(jiǎn)單的幾個(gè)DOM處理，用框架肯定是太重太浪費(fèi)了。

反對(duì) 回復(fù) 2019-04-06

富國(guó)滬深

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊

Backbone基本沒(méi)有關(guān)于Dom渲染的功能.所以從jQuery角度講,數(shù)據(jù)ajax過(guò)來(lái)后直接操作Dom感覺(jué)很直觀(guān),沒(méi)必要在重新定義一個(gè)model.但是如果同樣的數(shù)據(jù)在同一個(gè)頁(yè)面多處使用呢?同一個(gè)數(shù)據(jù)在多個(gè)頁(yè)面多出使用呢.作為SPA,所以都在一個(gè)頁(yè)面上,這樣把a(bǔ)jax過(guò)來(lái)的數(shù)據(jù)抽象成一個(gè)model,就比較方便.但Backbone的view沒(méi)有加入bind的功能,所以感覺(jué)上還需要在view上監(jiān)聽(tīng)model變化再render刷新整個(gè)view.建議使用一個(gè)插件modelbinder.這樣數(shù)據(jù)變化后就不需要刷新整個(gè)view而是只更新某個(gè)屬性對(duì)應(yīng)的小dom,一般就是span標(biāo)簽或某個(gè)input標(biāo)簽,這樣大大簡(jiǎn)化程序復(fù)雜度,代碼方便,而且性能更好.backbone,由于沒(méi)有C,整個(gè)都是view里面,而view的設(shè)計(jì)有沒(méi)有集成模板和dom渲染,顯得有些不太好用.所以其他的框架例如angularjs,knockout都提出ViewModel的概念就是數(shù)據(jù)綁定的概念,只要model變化了數(shù)據(jù),view會(huì)自動(dòng)變化,非常方便.而backbone并沒(méi)有提供這些功能,而只是一個(gè)代碼組織的框架.angular里面基本不在需要jQuery操作DOM,就是數(shù)據(jù)和View是一體的.數(shù)據(jù)和view是綁定的,沒(méi)有在單獨(dú)操作dom的概念.

反對(duì) 回復(fù) 2019-04-06