web前端之MVC的JavaScript Web富应用开发一MVC和类Word文件下载.docx

web前端之MVC的JavaScript Web富应用开发一MVC和类Word文件下载.docx

《web前端之MVC的JavaScript Web富应用开发一MVC和类Word文件下载.docx》由会员分享，可在线阅读，更多相关《web前端之MVC的JavaScript Web富应用开发一MVC和类Word文件下载.docx（19页珍藏版）》请在冰豆网上搜索。

};

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

<

div>

<

script>

functionformatDate（date）{

/*...*/

};

/script>

${formatDate（this.date）}

/div>

可以将视觉呈现逻辑剥离出来放入视图助手中，正如下面的代码就避免了这个问题，可以让这个应用的结构满足MVC。

//helper.js

varhelper={};

helper.formatDate=function（）{/*...*/};

${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和构造函数和传统的实现了类的语言中的使用方法是很类似的：

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"

>

htmlxmlns="

//www.w3.org/1999/xhtml"

xml:

lang="

en"

head>

metahttp-equiv="

Content-Type"

content="

text/html;

charset=UTF-8"

title>

/title>

scripttype="

text/javascript"

Person.find=function（id）{

alert（id）;

varperson=newPerson.find

（1）;

/head>

body>

/body>

/html>

要想给构造函数添加实例函数，则需要用到构造函数的prototype：

//www.w3.org/1999/x