對JavaScript客戶端應用編程的一些建議

 　　這篇文章主要介紹了對JavaScript客戶端應用編程的一些建議,主要針對MVC框架框架的一些相關使用問題,需要的朋友可以參考下

　　你可能注意到了，最近的一段時間越來越多的Web應用有變復雜的趨勢，重心從服務端慢慢向著客戶端轉移。 這是個正常的趨勢麼?我不知道。支持和反對者的討論就像是在討論復活者和聖誕節哪一個更好一樣; 很難說哪一方觀點就是完全正確的。因此，本文不會探討究竟哪一方是對的，不過我還是試圖解釋一下使用大家所熟知的面向對象編程也許可以成功的解決客戶端編程中存在的一些問題。

　　不太規范的代碼的示例

　　為了顧及一個應用的響應以及用戶體驗, 導致我們創建了持續增長的復雜的代碼, 這些代碼變得難於理解和維護。 你可以輕松的想到在沒有任何構架和遵循規則構建出客戶端的JavaScript應用代碼將會這樣:

　　?

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(''); } }); }); });

　　維護這一類的代碼將會很難。因為這短短的一段代碼與很多地方都有關聯: 它控制著很多的事件 (站點, 用戶, 網絡事件), 它要處理用戶的操作事件, 要解析服務器返回的應答並且產生HTML代碼。 有人可能說: “是的，你說的對， 但是如果這不是一個客戶端單頁的頁面應用?這最多算是一次過度使用jQuery類庫的例子” ——不是很有說服力的觀點, 因為眾所周知，易於維護和精心設計的代碼是非常重要的。特別是許多的工具或者是框架致力於保持代碼可用以便於我們能更簡單的去測試、維護、重用、和擴展它。

　　MVC是什麼?

　　談到這裡。我們能受益於那些基於MVC的JavaScript框架，但這些框架大部分不使用MVC，並且相當於Model和Videw的一種結合，或者在二都之間的一些東西，這很難去分清。這就是為什麼說大部分的Javascript框架是基於MV*。

　　改變方法或許可以提供項目中客戶端的組織和架構，這使得代碼可以在很長的一段時間內容易維護，即使重構已經有的代碼也變得相對容易。知道他如何工作和下面一些問題的答案是必需要要記住的。

　　我的應用裡有哪些類型的數據?-Model

　　用戶應該看到什麼?-View

　　誰是和用戶交互的程序?-Controller

　　使用MVC框架重構代碼

　　受用MVC重構代碼有什麼好處?

　　解除DOM和Ajax的依賴

　　代碼有更好的結構，並且更容易測試。

　　從 $(document).ready()中刪除多余的代碼,只留下使用Model創建Links的部分。

　　讓我們使用一些簡單步驟來重構一個典型的代碼塊

　　步驟 1: 創建視圖並移動Ajax請求

　　我們開始解除DOM和Ajax的依賴. 使用prototypes建造者,模式創建'Animals' 對象，並且添加一個 'add' 方法.同時創建視圖 'NewAnimalView' , 並且添加方法'addAnimal'、 'appendAnimal' 、'clearInput'.

　　代碼如下:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 var Animals = function() { };   Animals.prototype.add = function (options) { $.ajax({ url: '/animals', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); };   var NewAnimalView = function (options) { this.animals = options.animals; var add = $.proxy(this.addAnimal, this); $('# form').submit(add); };   NewAnimalView.prototype.addAnimal = function(e) { e.preventDefault(); var self = this;   this.animals.add({ text: $('#new-animal textarea').val(), success: function(data) { self.appendAnimal (data.text); self.clearInput(); } }); };   NewAnimalView.prototype.appendAnimal = function(text) { $('#animals ul').append('<li>' + data.text + '</li>'); }; NewAnimalView.prototype.clearInput = function() { $('#new-animal textarea').val(''); };   $(document).ready(function() { var animals = new Animals(); new NewAnimalView({ animals: animals }); });

　　步驟 2: 使用事件解除依賴.

　　這個例子，利用MVC框架是關鍵。我們將會用到事件機制, 事件使我們結合和觸發自定義事件. 因此，我們創建新的“AnimalsView”和“NewAnimalView”，並且賦予它們不同的顯示animals的職責。 使用事件就來區別職責非常簡單。如果在方法和事件之間傳遞職責，如下所示:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 var events = _.clone(Backbone.Events); var Animals = function() { };   Animals.prototype.add = function(text) { $.ajax({ url: '/animals', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('animal:add', data.text); } }); };   var NewAnimalView = function(options) { this.animals = options.animals; events.on('animal:add', this.clearAnimal, this); var add = $.proxy(this.addAnimal, this); $('# form').submit(add); };   NewAnimalView.prototype.addAnimal = function(e) { e.preventDefault(); this.animals.add($('#new-animal textarea').val()); };   NewAnimalView.prototype.clearInput = function() { $('#new-animal textarea').val(''); };   var AnimalsView = function() { events.on('animal:add', this.appendAnimal, this); };   AnimalsView.prototype.appendAnimal = function(text)