這篇文章主要介紹了對JavaScript客戶端應(yīng)用編程的一些建議,主要針對MVC框架框架的一些相關(guān)使用問題,需要的朋友可以參考下
你可能注意到了,最近的一段時間越來越多的Web應(yīng)用有變復(fù)雜的趨勢,重心從服務(wù)端慢慢向著客戶端轉(zhuǎn)移。 這是個正常的趨勢么?我不知道。支持和反對者的討論就像是在討論復(fù)活者和圣誕節(jié)哪一個更好一樣; 很難說哪一方觀點就是完全正確的。因此,本文不會探討究竟哪一方是對的,不過我還是試圖解釋一下使用大家所熟知的面向?qū)ο缶幊桃苍S可以成功的解決客戶端編程中存在的一些問題。
不太規(guī)范的代碼的示例
為了顧及一個應(yīng)用的響應(yīng)以及用戶體驗, 導(dǎo)致我們創(chuàng)建了持續(xù)增長的復(fù)雜的代碼, 這些代碼變得難于理解和維護。 你可以輕松的想到在沒有任何構(gòu)架和遵循規(guī)則構(gòu)建出客戶端的JavaScript應(yīng)用代碼將會這樣:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(function(){ $('#form').submit(function(e) { e.preventDefault(); $.ajax({ url: '/animals', type: 'POST', dataType: 'json', data: { text: $('#new-animal').find('textarea').val() }, success: function(data) { $('#animals').append('<li>' + data.text + '</li>'); $('#new-animal').find('textarea').val(''); } }); }); });維護這一類的代碼將會很難。因為這短短的一段代碼與很多地方都有關(guān)聯(lián): 它控制著很多的事件 (站點, 用戶, 網(wǎng)絡(luò)事件), 它要處理用戶的操作事件, 要解析服務(wù)器返回的應(yīng)答并且產(chǎn)生HTML代碼。 有人可能說: “是的,你說的對, 但是如果這不是一個客戶端單頁的頁面應(yīng)用?這最多算是一次過度使用jQuery類庫的例子” ——不是很有說服力的觀點, 因為眾所周知,易于維護和精心設(shè)計的代碼是非常重要的。特別是許多的工具或者是框架致力于保持代碼可用以便于我們能更簡單的去測試、維護、重用、和擴展它。
MVC是什么?
談到這里。我們能受益于那些基于MVC的JavaScript框架,但這些框架大部分不使用MVC,并且相當(dāng)于Model和Videw的一種結(jié)合,或者在二都之間的一些東西,這很難去分清。這就是為什么說大部分的Javascript框架是基于MV*。
改變方法或許可以提供項目中客戶端的組織和架構(gòu),這使得代碼可以在很長的一段時間內(nèi)容易維護,即使重構(gòu)已經(jīng)有的代碼也變得相對容易。知道他如何工作和下面一些問題的答案是必需要要記住的。
我的應(yīng)用里有哪些類型的數(shù)據(jù)?-Model
用戶應(yīng)該看到什么?-View
誰是和用戶交互的程序?-Controller
使用MVC框架重構(gòu)代碼
受用MVC重構(gòu)代碼有什么好處?
解除DOM和Ajax的依賴
代碼有更好的結(jié)構(gòu),并且更容易測試。
從 $(document).ready()中刪除多余的代碼,只留下使用Model創(chuàng)建Links的部分。
讓我們使用一些簡單步驟來重構(gòu)一個典型的代碼塊
步驟 1: 創(chuàng)建視圖并移動Ajax請求
我們開始解除DOM和Ajax的依賴. 使用prototypes建造者,模式創(chuàng)建'Animals' 對象,并且添加一個 'add' 方法.同時創(chuàng)建視圖 'NewAnimalView' , 并且添加方法'addAnimal'、 'appendAnimal' 、'clearInput'.
新聞熱點
疑難解答
圖片精選