构建更好的客户端JavaScript应用

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

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

　　你可能注意到了，最近的一段时间越来越多的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类库的例子” ——不是很有说服力的观点, 因为众所周知，易于维护和精心设计的代码是非常重要的。特别是许多的工具或者是框架致力于保持代码可用以便于我们能更简单的去测试、维护、重用、和扩展它。

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

代码如下:

view sourceprint?

01var Animals = function() {
02};
03 
04Animals.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 
33NewAnimalView.prototype.appendAnimal = function(text) {
34    $('#animals ul').append('<li>' + data.text + '</li>');
35};
36NewAnimalView.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 });