构建更好的客户端 JavaScript 应用

你可能注意到了，最近的一段时间越来越多的Web应用有变复杂的趋势，重心从服务端慢慢向着客户端转移。这是个正常的趋势么？我不知道。支持和反对者的讨论就像是在讨论复活者和圣诞节哪一个更好一样; 很难说哪一方观点就是完全正确的。因此，本文不会探讨究竟哪一方是对的，不过我还是试图解释一下使用大家所熟知的面向对象编程也许可以成功的解决客户端编程中存在的一些问题。

不太规范的代码的示例

为了顾及一个应用的响应以及用户体验, 导致我们创建了持续增长的复杂的代码, 这些代码变得难于理解和维护。你可以轻松的想到在没有任何构架和遵循规则构建出客户端的JavaScript应用代码将会这样:

01
$(function(){

02
    $('#form').submit(function(e) {

03
        e.preventDefault();

04
 
05
        $.ajax({

06
            url: '/animals',

07
            type: 'POST',

08
            dataType: 'json',

09
            data: { text: $('#new-animal').find('textarea').val() },

10
            success: function(data) {

11
                $('#animals').append('<li>' + data.text + '</li>');

12
                $('#new-animal').find('textarea').val('');

13
            }

14
         });

15
     });

16
});

维护这一类的代码将会很难。因为这短短的一段代码与很多地方都有关联: 它控制着很多的事件 (站点, 用户, 网络事件), 它要处理用户的操作事件, 要解析服务器返回的应答并且产生HTML代码。有人可能说: “是的，你说的对，但是如果这不是一个客户端单页的页面应用?这最多算是一次过度使用jQuery类库的例子” ——不是很有说服力的观点, 因为众所周知，易于维护和精心设计的代码是非常重要的。特别是许多的工具或者是框架致力于保持代码可用以便于我们能更简单的去测试、维护、重用、和扩展它。

MV*是什么？

谈到这里。我们能受益于那些基于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'.

代码如下:

01
var Animals = function() {

02
};

03
 
04
Animals.prototype.add = function (options) {

05
     $.ajax({

06
         url: '/animals',

07
         type: 'POST',

08
         dataType: 'json',

09
         data: { text: options.text },

10
         success: options.success

11
     });

12
};

13
 
14
 var NewAnimalView = function (options) {

15
    this.animals = options.animals;

16
    var add = $.proxy(this.addAnimal, this);

17
    $('# form').submit(add);

18
 };

19
 
20
 NewAnimalView.prototype.addAnimal = function(e) {

21
     e.preventDefault();

22
     var self = this;

23
 
24
     this.animals.add({

25
         text: $('#new-animal textarea').val(),

26
         success: function(data) {

27
             self.appendAnimal (data.text);

28
             self.clearInput();          

29
         }

30
     });

31
 };

32
 
33
NewAnimalView.prototype.appendAnimal = function(text) {

34
    $('#animals ul').append('<li>' + data.text + '</li>');

35
};

36
NewAnimalView.prototype.clearInput = function() {

37
    $('#new-animal textarea').val('');

38
};

39
 
40
 $(document).ready(function() {

41
     var animals = new Animals();

42
     new NewAnimalView({ animals: animals });

43
 });

步骤 2: 使用事件解除依赖.

这个例子，利用MVC框架是关键。我们将会用到事件机制, 事件使我们结合和触发自定义事件. 因此，我们创建新的“AnimalsView”和“NewAnimalView”，并且赋予它们不同的显示animals的职责。使用事件就来区别职责非常简单。如果在方法和事件之间传递职责，如下所示:

01
var events = _.clone(Backbone.Events);

02
var Animals = function() {

03
};

04
 
05
Animals.prototype.add = function(text) {

06
     $.ajax({

07
         url: '/animals',

08
         type: 'POST',

09
         dataType: 'json',

10
         data: { text: text },

11
         success: function(data) {

12
            events.trigger('animal:add', data.text);

13
         }

14
     });

15
};

16
 
17
var NewAnimalView = function(options) {

18
    this.animals = options.animals;

19
    events.on('animal:add', this.clearAnimal, this);

20
    var add = $.proxy(this.addAnimal, this);

21
    $('# form').submit(add);

22
 };

23
 
24
NewAnimalView.prototype.addAnimal = function(e) {

25
     e.preventDefault();

26
     this.animals.add($('#new-animal textarea').val());

27
 };

28
 
29
NewAnimalView.prototype.clearInput = function() {

30
    $('#new-animal textarea').val('');

31
};

32
 
33
var AnimalsView = function() {

34
    events.on('animal:add', this.appendAnimal, this);

35
};

36
 
37
AnimalsView.prototype.appendAnimal = function(text) {

38
    $('#animals ul').append('<li>' + data.text + '</li>');

39
};

40
 
41
$(document).ready(function() {

42
     var animals = new Animals();

43
     new NewAnimalView({ animals: animals });

44
     new AnimalsView();

45
});

步骤 3: 传递数据结构到核心框架

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

01
var Animal = Backbone.Model.extend({

02
    url: '/animals'

03
});

04
 
05
var Animals = Backbone.Collection.extend({

06
    model: Animal

07
});

08
 
09
var AnimalsView = Backbone.View.extend({

10
    initialize: function() {

11
        this.collection.on('add', this.appendAnimal, this);

12
    },

13
 
14
    appendAnimal: function(animal) {

15
        this.$('ul').append('<li>' + animal.escape('text') + '</li>');

16
    }

17
});

18
 
19
 
20
var NewAnimalView = Backbone.View.extend({

21
    events: {

22
        'submit form': 'addAnimal'

23
    },

24
 
25
    initialize: function() {

26
        this.collection.on('add', this.clearInput, this);

27
    },

28
 
29
    addAnimal: function(e) {

30
        e.preventDefault();

31
        this.collection.create({ text: this.$('textarea').val() });

32
    },

33
 
34
    clearInput: function() {

35
        this.$('textarea').val('');

36
    }

37
});

38
 
39
$(document).ready(function() {

40
    var animals = new Animals();

41
    new NewAnimalView({ el: $('#new-animal'), collection: animals });

42
    new AnimalsView({ el: $('#animals'), collection: animals });

43
});

总结

我们已经实现什么呢？我们在高度的抽象上工作。代码的维护、重构和扩展变得更容易。我们极大的优化了代码结果，是不是很迷人？太棒了。但是，我可能要给你泼冷水，即使最好的框架，开发的代码仍旧是脆弱并且难以维护。因此，如果你认为使用了一个较好的MV*框架能解决所有代码上的问题是错误的。记住在重构过程中，经历了第二步，代码会变得好很多，我们不使用框架的主要组件。

记住MV*框架是好的这一点，但是所有关注在‘How’去开发一个应用，这让程序开发人员头决定‘What’。每个框架的一个补充，尤其是当项目的Domain很复杂，将是Domain驱动设计方法，这将更关注与下面的方面：“what”，把需求转化为真正的产品的一个过程。但是，这是我们要讨论的另外一个主题。