构建更好的客户端JavaScript应用

2014-7-10 10:57| 发布者: joejoe0332| 查看: 3273| 评论: 0|原作者: 大漠驼铃, CodingKu, 瑞新|来自: 开源中国社区

摘要: 你可能注意到了，最近的一段时间越来越多的Web应用有变复杂的趋势，重心从服务端慢慢向着客户端转移。这是个正常的趋势么？我不知道。支持和反对者的讨论就像是在讨论复活者和圣诞节哪一个更好一样; 很难说哪一方观 ...

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

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

01var events = _.clone(Backbone.Events);
02var Animals = function() {
03};
04 
05Animals.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 
17var 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 
24NewAnimalView.prototype.addAnimal = function(e) {
25     e.preventDefault();
26     this.animals.add($('#new-animal textarea').val());
27 };
28 
29NewAnimalView.prototype.clearInput = function() {
30    $('#new-animal textarea').val('');
31};
32 
33var AnimalsView = function() {
34    events.on('animal:add', this.appendAnimal, this);
35};
36 
37AnimalsView.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.

01var Animal = Backbone.Model.extend({
02    url: '/animals'
03});
04 
05var Animals = Backbone.Collection.extend({
06    model: Animal
07});
08 
09var 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 
20var 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”，把需求转化为真正的产品的一个过程。但是，这是我们要讨论的另外一个主题。

12 / 2 页在本页阅读全文