您可能注意到，近年来越来越多的Web应用程序变得越来越复杂，重心从服务器逐渐向客户端移动，这是正常趋势吗不，我不知道。支持和反对的讨论是喜欢谈论复活，什么是更好的圣诞礼物；说一方是正确的是困难的。因此，本文将不讨论哪一方是正确的，但我还是尝试解释，采用面向对象的编程，你知道的解决客户端编程成功的几个问题。

不规范代码示例

为了考虑应用程序和用户体验的响应，我们创建了一个复杂的代码不断增长，这变得很难理解和维护：






$（函数（）{（））
$（#形式）。提交（功能（e）{
E.preventDefault（）；

$ ajax（{
URL：动物，
类型：'post，
DataType：'json，
数据：{文本：$（' #新动物）。发现（'textarea）。瓦迩（）}，
成功：函数（数据）{
$（#动物）。追加（+ data.text +）；
$（#新动物）。发现（'textarea'）瓦迩（‘）；
}
}）；
}）；
}）；



这将是很难保持这种类型的代码。因为这短代码是与许多地方有关：它控制了很多事件（网站、用户、网络事件），它处理用户的操作事件，解析服务器返回的响应，并生成HTML代码。有人可能会说：是的，你是对的，但如果它不是一个单一的网页应用程序客户端页面，最重要的是过度使用的例子，jQuery库——不是一个很有说服力的论点，因为大家都知道，易维护，设计良好的代码是非常重要的。特别是，许多工具或框架，致力于保持代码可用，我们可以使它容易测试、维护、重用和扩展。

什么是MVC

谈这个。我们可以从这些Javaｓｃｒｉｐｔ框架基于MVC的好处，但这些框架不使用MVC，这相当于一个组合的模型和videw，或很难区分两件事。这就是为什么大部分的Javaｓｃｒｉｐｔ框架是基于MV *。

更改方法可以提供项目中客户机的组织和体系结构，这使得代码很容易维护很长时间，即使重构的代码相对容易，还需要记住他是如何工作的以及对下列问题的回答。

我的应用程序有什么类型的数据-模型
用户应该看到什么视图
与用户交互的程序是谁-控制器


使用MVC框架重构代码

使用MVC重构代码的好处是什么

释放DOM和Ajax的依赖关系
代码结构更好，更容易测试。
从$（文档）Ready（）中删除冗余代码，只保留使用模型创建的链接的一部分。


让我们用一些简单的步骤来重构一个典型的代码块。

步骤1：创建视图并移动Ajax请求

我们开始重温DOM和Ajax的依赖性。我们使用原型生成器create'animals'objects加a'add法。同时，我们create'newanimalview'and add'addanimal '，'appendanimal'and'clearinput'。

代码如下：






var动物=函数（）{（）
}；

animals.prototype.add =功能（选项）{
$ ajax（{
网址： /动物，
类型：'post，
DataType：'json，
数据：{文本：选项。文本}，
成功：options.success
}）；
}；

无功newanimalview =功能（选项）{
this.animals = options.animals；
VaR加=美元。代理（this.addanimal，这个）；
（$ #形式）提交（添加）；
}；

newanimalview.prototype.addanimal =功能（e）{
E.preventDefault（）；
var =；

This.animals.add（{
正文：$（' #新动物textarea）。瓦迩（），
成功：函数（数据）{
Self.appendAnimal（数据。文本）；
Self.clearInput（）；
}
}）；
}；

newanimalview.prototype.appendanimal =功能（文本）{
$（#动物UL）。追加（+ data.text +）；
}；
newanimalview.prototype.clearinput =函数（）{
$（#新动物textarea）瓦迩（）；
}；

$（文档）Ready（函数（）{）
动物=新动物（）；
新的newanimalview（{动物：动物}）；
}）；



步骤2：使用事件删除依赖项。

在这种情况下，使用MVC框架是关键，我们将使用事件机制来集成和触发定制事件。因此，我们创造新的animalsview和newanimalview，并给他们展示动物不同的责任。这是非常简单的使用一个事件来区分责任，如果责任的方法和事件之间通过，下面是如下：






风险事件= _。克隆（骨干。事件）；
var动物=函数（）{（）
}；

animals.prototype.add =功能（文本）{
$ ajax（{
URL：动物，
类型：'post，
DataType：'json，
数据：{文本：文本}，
成功：函数（数据）{
Events.trigger（'animal：添加的数据。文本）；
}
}）；
}；

无功newanimalview =功能（选项）{
this.animals = options.animals；
events.on（'animal：添加，this.clearanimal，这个）；
VaR加=美元。代理（this.addanimal，这个）；
（$ #形式）提交（添加）；
}；

newanimalview.prototype.addanimal =功能（e）{
E.preventDefault（）；
this.animals.add（$（' #新动物textarea）。瓦迩（））；
}；

newanimalview.prototype.clearinput =函数（）{
$（#新动物textarea）瓦迩（）；
}；

无功animalsview =函数（）{（）
events.on（'animal：添加，this.appendanimal，这个）；
}；

animalsview.prototype.appendanimal =功能（文本）{
$（#动物UL）。追加（+ data.text +）；
}；

$（文档）Ready（函数（）{）
动物=新动物（）；
新的newanimalview（{动物：动物}）；
新的animalsview（）；
}）；



步骤3：将数据结构传递给核心框架

最后，我们使用的最重要的步骤：模型、视图和集合。






VaR的动物= backbone.model.extend（{
URL：动物
}）；

VaR的动物= backbone.collection.extend（{
动物模型：
}）；

无功animalsview = backbone.view.extend（{
初始化：函数（）{
This.collection.on（'add '，this.appendanimal，这个）；
}，

appendanimal：功能（动物）{
这种美元。（'ul）。追加（+ animal.escape（中的）+）；
}
}）；


无功newanimalview = backbone.view.extend（{
事件：{
提交表单：'addanimal
}，

初始化：函数（）{
This.collection.on（'add '，this.clearinput，这个）；
}，

addanimal：功能（e）{
E.preventDefault（）；
this.collection.create（{文本：本。$（'textarea）。瓦迩（）}）；
}，

ClearInput：函数（）{
这（'textarea美元。）瓦迩（）；
}
}）；

$（文档）Ready（函数（）{）
动物=新动物（）；
新的newanimalview（{ $（' # EL：新动物），收集：动物}）；
新的animalsview（{：$（El #动物），收集：动物}）；
}）；



总结

我们取得了什么成就我们在高抽象层次上工作，代码的维护、重构和扩展变得更容易了。我们已经极大地优化了代码的结果，是否很有吸引力那太好了。然而，我可能要泼你冷水，即使是最好的框架，开发的代码仍然是脆弱和难以维持。所以，如果你想用一个更好的MV*框架来解决所有问题的代码是错误的。记住，在重构的过程中，在第二步骤，代码会变得更好，我们不使用框架的主要组成部分。

记住MV框架是好的，但是所有的关注点都是如何来开发一个应用程序，它允许程序开发人员决定什么，每一个框架的补充，特别是当项目的领域非常复杂时，将是域驱动设计方法。这将更多地关注以下几个方面：什么是将需求转化为真实产品的过程，但这是我们要讨论的另一个主题。