构建更好的客户端 JavaScript 应用 已翻译 100%

oschina 投递于 2014/07/05 06:38 (共 6 段, 翻译完成于 07-06)
阅读 7217
收藏 182
6
加载中

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

木川瓦兹
木川瓦兹
翻译于 2014/07/05 07:29
2

不太规范的代码的示例

为了顾及一个应用的响应以及用户体验, 导致我们创建了持续增长的复杂的代码, 这些代码变得难于理解和维护。 你可以轻松的想到在没有任何构架和遵循规则构建出客户端的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类库的例子” ——不是很有说服力的观点, 因为众所周知,易于维护和精心设计的代码是非常重要的。特别是许多的工具或者是框架致力于保持代码可用以便于我们能更简单的去测试、维护、重用、和扩展它。

木川瓦兹
木川瓦兹
翻译于 2014/07/05 07:57
1

MV*是什么?

谈到这里。我们能受益于那些基于MVC的JavaScript框架,但这些框架大部分不使用MVC,并且相当于Model和Videw的一种结合,或者在二都之间的一些东西,这很难去分清。这就是为什么说大部分的Javascript框架是基于MV*。

改变方法或许可以提供项目中客户端的组织和架构,这使得代码可以在很长的一段时间内容易维护,即使重构已经有的代码也变得相对容易。知道他如何工作和下面一些问题的答案是必需要要记住的。

  • 我的应用里有哪些类型的数据?-Model

  • 用户应该看到什么?-View

  • 谁是和用户交互的程序?-Controller

大漠驼铃
翻译于 2014/07/05 08:21
2

使用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 });
 });
瑞新
瑞新
翻译于 2014/07/05 08:27
2

步骤 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 });
});
瑞新
瑞新
翻译于 2014/07/05 13:33
2

总结

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

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

大漠驼铃
翻译于 2014/07/06 12:55
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(50)

s
seeit
see it www.xuetub.com
刘-冬-冬
刘-冬-冬
到底使用什么东西来架构来编写我觉得是与你要做的东西相关的,每个东西都有存在的价值。
wpzero
wpzero
其实就自己看来说,如果你看懂并习惯了的话,应该更好维护是真的,效率也应该可以提高,没事儿可以玩玩backbone。但也不是说什么标不标准吧,自己习惯,并且可以实现功能就好。
灵瞳

引用来自“CarltonCheng”的评论

今天群里一个哥们说,angularjs+node ,php要谢幕了。。
我洗干净菊花坐等3年,看看会不会谢幕。
我也在瞄这个事,但是这跟菊花妹啥关系吧
悟空太多啦
悟空太多啦
感觉太罗嗦了
巴拉巴拉啦啦
巴拉巴拉啦啦

引用来自“爪哇小贩”的评论

看了文章很惶恐,看了评论很安慰
同感
巴拉巴拉啦啦
巴拉巴拉啦啦

引用来自“酱哥哥”的评论

乍一眼看不懂的东西,就不是好东西
同意,一个简单的ajax,加Backbone、 undersocre 还这么多行代码
mahengyang
mahengyang
没看懂
高耳鸡
高耳鸡
mvc是个好东西,如果你的项目没有别人接手的话
金拱门
金拱门

引用来自“CarltonCheng”的评论

今天群里一个哥们说,angularjs+node ,php要谢幕了。。
我洗干净菊花坐等3年,看看会不会谢幕。

引用来自“CHJ_chj”的评论

angularjs也好景不长,我还没看到知道google为啥要搞这个的人。
就国内的环境,node连个开源商城都没,还敢叫嚣php会消失。ghost不知道现在进展如何。替换掉wp再说吧
返回顶部
顶部