Jquery中发送ajax的重构（组件化思想）
一、背景
以前自己做的一些Web应用，基本上都是按照非常传统的方式：
服务器端渲染模板；
利用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作用域的问题
现在我们的重构的第一个版本其实就算得上大功告成了，已经达到需求的要求啦！可以下班了！
作者：ZeroIce
链接：https://juejin.im/post/5d570cc8e51d453b39774394
来源：掘金
