web前端之MVC的JavaScript Web富应用开发一MVC和类解析.docx
《web前端之MVC的JavaScript Web富应用开发一MVC和类解析.docx》由会员分享，可在线阅读，更多相关《web前端之MVC的JavaScript Web富应用开发一MVC和类解析.docx（19页珍藏版）》请在冰豆网上搜索。
web前端之MVC的JavaScriptWeb富应用开发一MVC和类解析
web前端之MVC的JavaScriptWeb富应用开发一：
MVC和类
开篇：
本书以assert（）和assertEqual（）函数来展示变量的值或者函数调用的结果。
assert（）是一种快捷表述方式，用来表示一个特定的变量（revolvestotrue）。
这在自动化测试中是一种非常常见的模式。
assert（）可以接收两个参数：
一个值和一个可选的消息。
如果运行结果不是真值，这个函数将抛出一个异常：
varassert=function（value,msg）{
if（!
value）
throw（msg||（value+"doesnotequaltrue"））;
};
assertEqual（）是表示一个值等于另外一个值的另一种表述。
它和assert（）类似，但接收两个值。
如果这两个值不相等，则这个断言失败：
varassertEqual=function（val1,val2,msg）{
if（val1!
==val2）
throw（msg||（val1+"doesnotequal"+val2））;
};
本书不会教给你JavaScript是一门什么样的语言，你可以阅读本人其它的博客进行学习，但是本书将会向你展示如何搭建复杂的JavaScript应用，教你创造不可思议的网络用户体验。
增加结构：
构建大型的JavaScript应用的秘诀是不要构建大型JavaScript应用。
相反，你应当把你的应用解耦成一系列相互平等且独立的部分。
开发者常犯的错误是创建应用时使用了很多互相依赖的部分，用了很多JavaScript文件，并在HTML页面中用大量的script标签引入这些文件。
这类应用非常难于维护和扩展，因此无论如何都应当避免这种情况的发生。
开始构建你的应用的时候，花点精力来做应用的架构，会为最终结果带来意想不到的改观。
不管你之前怎么看待JavaScript，从现在开始将它当做一门面向对象的编程语言来对待。
本书提倡使用MVC模式，这是一种久经考验的搭建应用的方式，可以确保应用的可维护性和可扩展性。
MVC模式完全适用于JavaScript应用。
什么是MVC：
MVC是一种设计模式，它将应用划分为3个部分：
数据（模型）、展现层（视图）和用户交互层（控制器）。
换句话说，一个事件的发生是这样的过程：
1．用户和应用产生交互。
2．控制器的事件处理器被触发。
3．控制器从模型中请求数据，并将其交给视图。
4．视图将数据呈现给用户。
我们可以不用类库或框架就实现这种MVC架构模式。
关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。
这样可以对每个部分进行独立开发、测试和维护。
模型：
模型用来存放应用的所有数据对象。
比如，可能有一个User模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。
模型不必知晓视图和控制器的细节，模型只需包含数据及直接和这些数据相关的逻辑。
任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。
将模型和视图的代码混在一起，是违反MVC架构原则的。
模型是最应该从你的应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。
也就是说，我们的数据是面向对象的（objectoriented），任何定义在这个数据模型上的函数或逻辑都可以直接被调用。
因此，不要这样做：
varuser=users[“foo”];
destroyUser（user）;
而要这样做：
varuser=User.find（“foo”）;
user.destroy（）;
视图：
视图层是呈现给用户的，用户与之产生交互。
在JavaScript应用中，视图大都是由HTML、CSS和JavaScript模板组成的。
除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。
实际上，和模型类似，视图也应当从应用的其他部分中解耦出来。
视图不必知晓模型和控制器中的细节，它们是相互独立的。
将逻辑混入视图之中是编程的大忌。
这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。
我们将视觉呈现逻辑归类为“视图助手”（helper）：
和视图有关的独立的小型工具函数。
来看下面的例子，视图中包含了逻辑，这是一个反例，平时不应当这样做：
//template.html
可以将视觉呈现逻辑剥离出来放入视图助手中，正如下面的代码就避免了这个问题，可以让这个应用的结构满足MVC。
//helper.js
varhelper={};
helper.formatDate=function（）{/*...*/};
//template.html
${helper.formatDate（this.date）}
所有视觉呈现逻辑都包含在helper变量中，这是一个命名空间，可以防止冲突并保持代码清晰、可扩展。
控制器：
控制器是模型和视图之间的纽带。
控制器从视图获得事件和输入，对它们进行处理（很可能包含模型），并相应地更新视图。
当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。
然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。
不用使用类库和框架也能实现控制器，下面这个例子就是使用简单的jQuery代码来实现的：
varController={};
//使用匿名函数封装一个作用域
（Controller.users=function（$）{
varnameClick=function（）{
/*....*/
};
//在页面加载是绑定事件监听
$（function（）{
$（"#view.name"）.click（nameClick）;
}）;
}）（jQuery）;
我们创建了users控制器，这个控制器是放在Controller变量下的命名空间。
然后，我们使用了一个匿名函数封装了一个作用域，以避免对全局作用域造成污染。
当页面加载时，程序给视图元素绑定了点击事件的监听。
向模块化进军，创建类：
JavaScript是基于原型的编程语言，并没有包含内置类的实现。
但通过JavaScript可以轻易地模拟出经典的类。
JavaScript中并没有真正的类，但JavaScript中有构造函数和new运算符。
构造函数用来给实例对象初始化属性和值。
任何JavaScript函数都可以用做构造函数，构造函数必须使用new运算符作为前缀来创建新的实例。
new运算符改变了函数的执行上下文，同时改变了return语句的行为。
实际上，使用new和构造函数和传统的实现了类的语言中的使用方法是很类似的：
varassert=function（value,msg）{
if（!
value）
throw（msg||（value+"doesnotequaltrue"））;
};
varassertEqual=function（val1,val2,msg）{
if（val1!
==val2）
throw（msg||（val1+"doesnotequal"+val2））;
};
varPerson=function（name）{
this.name=name;
};
//实例化一个Person
varalice=newPerson（"alice"）;
//检查这个实例
assert（aliceinstanceofPerson）;
构造函数的命名通常使用驼峰命名法，首字母大写，以此和普通的函数区分开来，这是一种习惯用法。
当使用new关键字来调用构造函数时，执行上下文从全局对象（window）变成一个空的上下文，这个上下文代表了新生成的实例。
因此，this关键字指向当前创建的实例。
默认情况下，如果你的构造函数中没有返回任何内容，就会返回this——当前的上下文。
要不然就返回任意非原始类型的值。
比如，我们可以返回一个用以新建一个新类的函数，第一步要做的是创建自己的类模拟库：
varClass=function（）{
varklass=function（）{
this.init.apply（this,arguments）;
};
klass.prototype.init=function（）{};
returnklass;
};
varPerson=newClass;
Person.prototype.init=function（）{
//基于Person的实例化
};
//用法：
varperson=newPerson;
给类添加函数：
在JavaScript中，在构造函数中给类添加函数和给对象添加属性是一模一样的：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
//www.w3.org/1999/xhtml"xml:
lang="en">
varClass=function（）{
varklass=function（）{
this.init.apply（this,arguments）;
};
klass.prototype.init=function（）{};
returnklass;
};
varPerson=newClass;
Person.prototype.init=function（）{
//基于Person的实例化
};
Person.find=function（id）{
alert（id）;
};
//用法：
varperson=newPerson.find
（1）;