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

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

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

不太規範的代碼的樣本

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

$(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'.

代碼如下:
 

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的職責。 使用事件就來區別職責非常簡單。如果在方法和事件之間傳遞職責，如下所示:
 

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) {  $('#animals ul').append('<li>' + data.text + '</li>');}; $(document).ready(function() {   var animals = new Animals();   new NewAnimalView({ animals: animals });   new AnimalsView();});

步驟 3: 傳遞資料結構到核心架構

最後，最重要的一步，我們使用: models, views and collections.
 

var Animal = Backbone.Model.extend({  url: '/animals'}); var Animals = Backbone.Collection.extend({  model: Animal}); var AnimalsView = Backbone.View.extend({  initialize: function() {    this.collection.on('add', this.appendAnimal, this);  },   appendAnimal: function(animal) {    this.$('ul').append('<li>' + animal.escape('text') + '</li>');  }});  var NewAnimalView = Backbone.View.extend({  events: {    'submit form': 'addAnimal'  },   initialize: function() {    this.collection.on('add', this.clearInput, this);  },   addAnimal: function(e) {    e.preventDefault();    this.collection.create({ text: this.$('textarea').val() });  },   clearInput: function() {    this.$('textarea').val('');  }}); $(document).ready(function() {  var animals = new Animals();  new NewAnimalView({ el: $('#new-animal'), collection: animals });  new AnimalsView({ el: $('#animals'), collection: animals });});

總結

我們已經實現什麼呢？我們在高度的抽象上工作。代碼的維護、重構和擴充變得更容易。我們極大的最佳化了代碼結果，是不是很迷人？太棒了。但是，我可能要給你潑冷水，即使最好的架構，開發的代碼仍舊是脆弱並且難以維護。因此，如果你認為使用了一個較好的MV*架構能解決所有代碼上的問題是錯誤的。記住在重構過程中，經曆了第二步，代碼會變得好很多，我們不使用架構的主要組件。

記住MV*架構是好的這一點，但是所有關注在‘How'去開發一個應用，這讓程式開發人員頭決定‘What'。每個架構的一個補充，尤其是當項目的Domain很複雜，將是Domain驅動設計方法，這將更關注與下面的方面：“what”， 把需求轉化為真正的產品的一個過程。但是，這是我們要討論的另外一個主題。