web前端之MVC的JavaScript Web富应用开发一MVC和类解析.docx

1、web前端之MVC的JavaScript Web富应用开发一MVC和类解析web前端之MVC的JavaScript Web富应用开发一：MVC和类开篇：本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果。 assert() 是一种快捷表述方式， 用来表示一个特定的变量（ revolves to true）。 这在自动化测试中是一种非常常见的模式。 assert() 可以接收两个参数 ： 一个值和一个可选的消息。 如果运行结果不是真值， 这个函数将抛出一个异常 ：var assert = function(value, msg) if ( !value

2、 ) 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 是一门什么样的语言， 你可以阅读本人其它的博客进行学习， 但是本书将会向你展示如何搭建复杂的 JavaS

3、cript 应用， 教你创造不可思议的网络用户体验。增加结构：构建大型的 JavaScript 应用的秘诀是不要构建大型 JavaScript 应用。 相反， 你应当把你的应用解耦成一系列相互平等且独立的部分。 开发者常犯的错误是创建应用时使用了很多互相依赖的部分， 用了很多 JavaScript 文件， 并在 HTML 页面中用大量的 script 标签引入这些文件。 这类应用非常难于维护和扩展， 因此无论如何都应当避免这种情况的发生。开始构建你的应用的时候， 花点精力来做应用的架构， 会为最终结果带来意想不到的改观。 不管你之前怎么看待 JavaScript， 从现在开始将它当做一门面向对

4、象的编程语言来对待。本书提倡使用 MVC 模式， 这是一种久经考验的搭建应用的方式， 可以确保应用的可维护性和可扩展性。 MVC 模式完全适用于 JavaScript 应用。什么是 MVC：MVC 是一种设计模式， 它将应用划分为 3 个部分 ： 数据（ 模型）、 展现层（ 视图） 和用户交互层（ 控制器）。 换句话说， 一个事件的发生是这样的过程 ： 1 用户和应用产生交互。 2 控制器的事件处理器被触发。 3 控制器从模型中请求数据， 并将其交给视图。 4 视图将数据呈现给用户。我们可以不用类库或框架就实现这种 MVC 架构模式。 关键是要将 MVC 的每部分按照职责进行划分， 将代码清晰

5、地分割为若干部分， 并保持良好的解耦。 这样可以对每个部分进行独立开发、 测试和维护。模型：模型用来存放应用的所有数据对象。 比如， 可能有一个 User 模型， 用以存放用户列表、他们的属性及所有与模型有关的逻辑。 模型不必知晓视图和控制器的细节， 模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、 视图模板， 以及那些和模型无关的逻辑都应当隔离在模型之外。 将模型和视图的代码混在一起， 是违反 MVC 架构原则的。 模型是最应该从你的应用中解耦出来的部分。 当控制器从服务器抓取数据或创建新的记录时， 它就将数据包装成模型实例。 也就是说，我们的数据是面向对象的（ object

6、oriented）， 任何定义在这个数据模型上的函数或逻辑都可以直接被调用。 因此， 不要这样做 ： var user = users“foo”; destroyUser(user); 而要这样做 ： var user = User.find(“foo”); user.destroy();视图：视图层是呈现给用户的， 用户与之产生交互。 在JavaScript应用中， 视图大都是由HTML、CSS和JavaScript模板组成的。 除了模板中简单的条件语句之外， 视图不应当包含任何其他逻辑。 实际上， 和模型类似， 视图也应当从应用的其他部分中解耦出来。 视图不必知晓模型和控制器中的细节， 它

7、们是相互独立的。 将逻辑混入视图之中是编程的大忌。 这并不是说 MVC 不允许包含视觉呈现相关的逻辑， 只要这部分逻辑没有定义在视图之内即可。 我们将视觉呈现逻辑归类为“ 视图助手”（ helper） ： 和视图有关的独立的小型工具函数。 来看下面的例子， 视图中包含了逻辑， 这是一个反例， 平时不应当这样做 ：/ template.html function formatDate(date) /* . */ ; $ formatDate(this.date) 可以将视觉呈现逻辑剥离出来放入视图助手中， 正如下面的代码就避免了这个问题， 可以让这个应用的结构满足 MVC。/ helper.js

8、var helper = ;helper.formatDate = function() /* . */ ;/ template.html $ helper.formatDate(this.date) 所有视觉呈现逻辑都包含在 helper 变量中， 这是一个命名空间， 可以防止冲突并保持代码清晰、 可扩展。控制器：控制器是模型和视图之间的纽带。 控制器从视图获得事件和输入， 对它们进行处理（ 很可能包含模型）， 并相应地更新视图。 当页面加载时， 控制器会给视图添加事件监听， 比如监听表单提交或按钮点击。 然后， 当用户和你的应用产生交互时， 控制器中的事件触发器就开始工作了。 不用使用类库

9、和框架也能实现控制器， 下面这个例子就是使用简单的 jQuery 代码来实现的 ：var Controller=;/使用匿名函数封装一个作用域(Controller.users=function($) var nameClick=function() /*.*/ ; /在页面加载是绑定事件监听 $(function() $(#view .name).click(nameClick); );)(jQuery);我们创建了 users 控制器， 这个控制器是放在 Controller 变量下的命名空间。 然后， 我们使用了一个匿名函数封装了一个作用域， 以避免对全局作用域造成污染。 当页面加载时，

10、 程序给视图元素绑定了点击事件的监听。向模块化进军， 创建类：JavaScript 是基于原型的编程语言， 并没有包含内置类的实现。 但通过 JavaScript 可以轻易地模拟出经典的类。 JavaScript 中并没有真正的类， 但 JavaScript 中有构造函数和 new 运算符。 构造函数用来给实例对象初始化属性和值。 任何 JavaScript 函数都可以用做构造函数， 构造函数必须使用 new 运算符作为前缀来创建新的实例。 new 运算符改变了函数的执行上下文， 同时改变了 return 语句的行为。 实际上， 使用 new和构造函数和传统的实现了类的语言中的使用方法是很类似

11、的 ：var assert = function(value, msg) if ( !value ) throw(msg | (value + does not equal true);var assertEqual = function(val1, val2, msg) if (val1 != val2) throw(msg | (val1 + does not equal + val2);var Person=function(name) this.name=name;/实例化一个Personvar alice=new Person(alice);/检查这个实例assert(alice i

12、nstanceof Person);构造函数的命名通常使用驼峰命名法， 首字母大写， 以此和普通的函数区分开来， 这是一种习惯用法。当使用 new 关键字来调用构造函数时， 执行上下文从全局对象（ window） 变成一个空的上下文， 这个上下文代表了新生成的实例。 因此， this 关键字指向当前创建的实例。默认情况下， 如果你的构造函数中没有返回任何内容， 就会返回 this当前的上下文。要不然就返回任意非原始类型的值。 比如， 我们可以返回一个用以新建一个新类的函数，第一步要做的是创建自己的类模拟库 ：var Class=function() var klass=function() t

13、his.init.apply(this,arguments); ; klass.prototype.init=function(); return klass;var Person =new Class;Person.prototype.init=function() /基于Person的实例化;/用法：var person =new Person;给类添加函数：在 JavaScript 中， 在构造函数中给类添加函数和给对象添加属性是一模一样的 ：var Class=function() var klass=function() this.init.apply(this,arguments); ; klass.prototype.init=function(); return klass;var Person =new Class;Person.prototype.init=function() /基于Person的实例化;Person.find=function(id) alert(id);/用法：var person =new Person.find(1);要想给构造函数添加实例函数， 则需要用到构造函数的 prototype ：html xmlns=http:/www.w3.org/1999