[005]JS专研系列 | 前端架构初体验(一)

一、背景

以前自己做的一些Web应用，基本上都是按照非常传统的方式：

1. 服务器端渲染模板；
2. 利用jQuery的ajax进行异步数据交换。

所以首次接触前端架构类的东西，难免有点无从下手。

经过几天的奋战，以及参阅国内外大牛们的各种Tutorial之后，终于拨开迷雾，缕了些头绪，自己也试着从传统的方式过渡（重构）出了所谓的架构性的代码。

二、传统代码

$(function(){
  $('#new-todo form').submit(function(e){
    e.preventDefault();
    var that = this;

    $.ajax({
      url: '/add',
      type: 'POST',
      dataType: 'json',
      data: { todoContent: $(this).find('textarea').val() },
      success: function(data){
        $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
        $(that).find('textarea').val('');
      }
    });
  });
});

上面的一段代码我想应该都是大家非常熟悉的做法。看上去貌似挺好的啊，也没啥问题，程序跑得也还行。

虽说是一段简简单单的代码，但是包含的东西可不少：监听页面事件、用户事件、网络事件，接收用户的输入、执行网络的I/O、解析服务端返回的数据、动态生成HTML结构。看起来很棒 [nice].gif

可是就这么一个小小的应用，完全违反了咱们软件开发中的“单一职责原则”，逻辑和架构上都已经臃肿了。估计一个大应用的话，那就挺乱的吧！

三、怎样重构？

咱们先提个需求吧！咋们要求也不高，搞成这样子，应该也差不多了：

• 在$(document).ready当中只保留一些应用程序的初始化代码即可，即应用的启动程序。
• 干掉乱如麻的逻辑，使得其符合咱们的“单一职责原则”，方便测试。
• 减小ajax和DOM的耦合，其实也算是第2条。

1、第一次重构：最基本重构规则，ajax分离到一个方法里面去。

var addTodo = function(){
  $.ajax({
    url: '/add',
    type: 'POST',
    dataType: 'json',
    data: { todoContent: $('#new-todo').find('textarea').val() },
    success: function(data){
      $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
      $('#new-todo').find('textarea').val('');
    }
  });
};

$(function(){
  $('#new-todo form').submit(function(e){
    e.preventDefault();
    
    addTodo();
  });
});

仔细看看上面的代码发现：data和success属性仍然保留了对DOM的依赖，接下来就来摆脱此依赖(将其调整为函数的参数来传递)

2、第一次重构：将其调整为函数的参数来传递

var addTodo = function(options){
  $.ajax({
    url: '/add',
    type: 'POST',
    dataType: 'json',
    data: { todoContent: options.todoContent },
    success: options.success
  });
};

$(function(){
  $('#new-todo form').submit(function(e){
    e.preventDefault();
    
    addTodo({
      todoContent: $('#new-todo').find('textarea').val(),
      success: function(data){
        $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
        $('#new-todo').find('textarea').val('');
      }
    });
  });
});

这样就很完美了。可以还有点问题，怎么此时addTodo()方法暴露在全局环境内？ 怎么可以让任何人随随便便调用我呢？此时作为一名后端攻城湿对于前端还是有点要求的，给你加个命名空间吧！

3、第三次重构：加命名空间

var TodoList = function(){};

TodoList.prototype.add = function(options){
  $.ajax({
    url: '/add',
    type: 'POST',
    dataType: 'json',
    data: { todoContent: options.todoContent },
    success: options.success
  });
};

$(function(){
  var todoList = new TodoList();

  $('#new-todo form').submit(function(e){
    e.preventDefault();
    
    todoList.add({
      todoContent: $('#new-todo').find('textarea').val(),
      success: function(data){
        $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
        $('#new-todo').find('textarea').val('');
      }
    });
  });
});

nice！不错！现在已经现在的submit事件中只关注DOM操作了，那么我们直接把他引入视图View，把他移到外层去，让$(document).ready之中只剩下启动代码。

4、第四次重构：引入视图View

var TodoList = function(){};

TodoList.prototype.add = function(options){
  $.ajax({
    url: '/add',
    type: 'POST',
    dataType: 'json',
    data: { todoContent: options.todoContent },
    success: options.success
  });
};

var NewTodoView = function(options){
  var todoList = options.todoList;

  $('#new-todo form').submit(function(e){
    e.preventDefault();
    
    todoList.add({
      todoContent: $('#new-todo').find('textarea').val(),
      success: function(data){
        $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
        $('#new-todo').find('textarea').val('');
      }
    });
  });
};

$(function(){
  var todoList = new TodoList();
  new NewTodoView({ todoList: todoList });
});

现在代码已经组件化了，需求也完成的差不多了。可是，怎么NewTodoView看起来不像是对象的一个行为呀！为了更加完美些，我们将他移出来。

5、第五次重构：完美化

var TodoList = function(){};

TodoList.prototype.add = function(options){
  $.ajax({
    url: '/add',
    type: 'POST',
    dataType: 'json',
    data: { todoContent: options.todoContent },
    success: options.success
  });
};

var NewTodoView = function(options){
  this.todoList = options.todoList;

  $('#new-todo form').submit($.proxy(this.addTodo, this));
};

NewTodoView.prototype.addTodo = function(e){
  e.preventDefault();
    
  this.todoList.add({
    todoContent: $('#new-todo').find('textarea').val(),
    success: function(data){
      $('#todo-list ul').append('<li>' + data.todoContent + '</li>');
      $('#new-todo').find('textarea').val('');
    }
  });
};

$(function(){
  var todoList = new TodoList();
  new NewTodoView({ todoList: todoList });
});

由于以上存在一个作用域问题，所以上面用了jQuery中的$.proxy()方法来解决this作用域的问题

现在我们的重构的第一个版本其实就算得上大功告成了，已经达到需求的要求啦！可以下班了！