web前端之MVC的JavaScriptWeb富应用开发一：MVC和类课案.doc

web前端之MVC的JavaScript Web富应用开发一：MVC和类 开篇： 本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果。 assert() 是一种快捷表述方式， 用来表示一个特定的变量（ revolves to true）。 这在自动化测试中是一种非常常见的模式。 assert() 可以接收两个参数 ： 一个值和一个可选的消息。 如果运行结果不是真值， 这个函数将抛出一个异常 ： var assert = function(value, msg) { if ( !value ) throw(msg || (value + does not equal true)); }; assertEqual() 是表示一个值等于另外一个值的另一种表述。 它和 assert() 类似， 但接收两个值。 如果这两个值不相等， 则这个断言失败 ： var assertEqual = function(val1, val2, msg) { if (val1 !== val2) throw(msg || (val1 + does not equal + val2)); }; 本书不会教给你 JavaScript 是一门什么样的语言， 你可以阅读本人其它的博客进行学习， 但是本书将会向你展示如何搭建复杂的 JavaScript 应用， 教你创造不可思议的网络用户体验。 增加结构： 构建大型的 JavaScript 应用的秘诀是不要构建大型 JavaScript 应用。 相反， 你应当把你的应用解耦成一系列相互平等且独立的部分。 开发者常犯的错误是创建应用时使用了很多互相依赖的部分， 用了很多 JavaScript 文件， 并在 HTML 页面中用大量的 script 标签引入这些文件。 这类应用非常难于维护和扩展， 因此无论如何都应当避免这种情况的发生。 开始构建你的应用的时候， 花点精力来做应用的架构， 会为最终结果带来意想不到的改观。 不管你之前怎么看待 JavaScript， 从现在开始将它当做一门面向对象的编程语言来对待。 本书提倡使用 MVC 模式， 这是一种久经考验的搭建应用的方式， 可以确保应用的可维护性和可扩展性。 MVC 模式完全适用于 JavaScript 应用。 什么是 MVC： MVC 是一种设计模式， 它将应用划分为 3 个部分 ： 数据（ 模型）、 展现层（ 视图） 和用户交互层（ 控制器）。 换句话说， 一个事件的发生是这样的过程 ： 1． 用户和应用产生交互。 2． 控制器的事件处理器被触发。 3． 控制器从模型中请求数据， 并将其交给视图。 4． 视图将数据呈现给用户。 我们可以不用类库或框架就实现这种 MVC 架构模式。 关键是要将 MVC 的每部分按照职责进行划分， 将代码清晰地分割为若干部分， 并保持良好的解耦。 这样可以对每个部分进行独立开发、 测试和维护。 模型： 模型用来存放应用的所有数据对象。 比如， 可能有一个 User 模型， 用以存放用户列表、他们的属性及所有与模型有关的逻辑。 模型不必知晓视图和控制器的细节， 模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、 视图模板， 以及那些和模型无关的逻辑都应当隔离在模型之外。 将模型和视图的代码混在一起， 是违反 MVC 架构原则的。 模型是最应该从你的应用中解耦出来的部分。 当控制器从服务器抓取数据或创建新的记录时， 它就将数据包装成模型实例。 也就是说，我们的数据是面向对象的（ object oriented）， 任何定义在这个数据模型上的函数或逻辑都可以直接被调用。 因此， 不要这样做 ： var user = users[“foo”]; destroyUser(user); 而要这样做 ： var user = User.find(“foo”); user.destroy(); 视图： 视图层是呈现给用户的， 用户与之产生交互。 在JavaScript应用中， 视图大都是由HTML、CSS和JavaScript模板组成的。 除了模板中简单的条件语句之外， 视图不应当包含任何其他逻辑。 实际上， 和模型类似， 视图也应当从应用的其他部分中解耦出来。 视图不必知晓模型和控制器中的细节， 它们是相互独立的。 将逻辑混入视图之中是编程的大忌。 这并不是说 MVC 不允许包含视觉呈现相关的逻辑， 只要这部分逻辑没有定义在视图之内即可。 我们将视觉呈现逻辑归类为“ 视图助手”（ helper） ： 和视图有关的独立的小型工具函数。 来看下面的例子， 视图中包含了逻辑， 这是一个反例， 平时不应当这样做 ： // tem