继松耦合之后,JavaScript模型视图控制器(MVC)和模板是本书要强调的另一个设计模式。它们提供了一个可以把程序各方面解耦的结构。 1.2.1 MVC MVC是一种鼓励松耦合的设计模式。它把驱动程序的数据从显示数据的视觉界面上分离出来。采用MVC框架后,可以在不修改底层数据的情况下改变前端界面的风格。因为MVC将关注点分解到了三个相互关联的组件中:模型、视图和控制器,如图1-1所示。 图1-1 MVC中3个组件之间的关系 1. 模型 MVC中的组件模型就是驱动程序的数据。你可以把模型层看作程序的域逻辑层,它是程序要处理的全部数据。在一个简单的介绍性网站中,模型层可能只包含几个表示网站内容的对象:文本、图片路径,等等。而比较复杂的程序通常会用大量的模型来表示程序所需的各种数据。其中一个例子就是表示用户的模型(用户名、密码,等等)。 模型中的数据通常会保存在数据库中,或者本地存储这样的数据存储库中。那样数据能跨越多个会话存留。 2. 视图 视图的职责就是展示用户界面。在Web程序中,视图产生的最终结果就是HTML标记,因为它要把内容显示在屏幕上。但视图要比简单的标记复杂,它必须重新处理来自模型中的数据,将其变成可以作为HTML标记呈现的格式。 比如说,数据在模型中是以UNIX时间戳的形式存在的,但你不想就那样把它显示给用户。视图层拿到系统时间值后,将其转换为可读的形式,比如“8月4日”或“提交于5分钟前”。然后把这个经过整理的时间戳作为HTML标记显示,比如: <div class="post-date">提交于5分钟以前</div> 把它跟页面所需的其他标记合在一起,就得到了最终的视图。 3. 控制器 控制器负责在模型和视图之间传递数据。它负责根据用户的输入修改模型,并且最终也是它负责根据修改后的数据更新视图。表单处理器就是我们工作中经常碰到的控制器。在用户提交表单之后,控制器对提交上来的数据进行处理,然后修改模型中相应的数据。之后模型的变化又通过控制器传递回来,更新视图。 4. 整合这些组件 单独来看这些组件都干不了什么,但把三个相互独立的碎片拼到一起就能得到一个程序。比如说,程序中通常会有一个表单用来管理用户数据:用户名、密码等。这些数据又会保存在模型中,通常是在数据库中。视图从模型中得到这些数据,并用它们作默认值来渲染表单(老的用户名、twitter帐号等),如图1-2所示。 图1-2 视图在表单中显示来自模型的数据 然后用户可以通过这个表单和系统交互,修改他们想要修改的输入域。一旦提交之后,控制器会处理用户的请求,更新表单,然后修改数据模型并根据情况将其保存下来。就像图1-1所展示的那样,这个可以重复进行。 第3章对MVC做了更详细的介绍,还讨论了什么情况下适合用MVC框架——它们并不是在所有项目中都适用。 1.2.2 模板 JavaScript模板是MVC中的“V”:帮助构建视图的工具。但遵循MVC设计模式无需使用模板,模板也不是只能用于MVC中。实际上,我希望不管你用不用MVC都能用到JavaScript模板。 如果你已经熟悉了PHP或其他后台语言中模板的用法,那你很幸运,因为JavaScript模板的工作方式本质上跟那些模板是一样的。 1. 模板如何使用 这里有一个很基础的JavaScript模板文件的例子。 <hgroup> <h1><%=title %></h1> <h2><%=subtitle %></h2> </hgroup> <section class="content"> <p> <%=content %> </p> </section> 这个模板基本上就是HTML标记和一些放在<% %>中的变量。在不同的情况下,可以把不同的变量值传到模板中显示不同的内容。现在不要管模板的语法,不同的模板框架所用的语法也不同,并且一般都可以根据需要修改。 第4章深入探讨了JavaScript模板引擎。 2. 为什么要用模板 使用模板在视图中展示模型更容易。模板引擎中有循环遍历集合的语法,比如一个包含产品数据的数组;如果想让视图显示产品的价格,访问产品对象的价格属性也很容易。 如果不用模板,拼接HTML标记字符串的代码和任务代码就会混杂在一起,把JavaScript代码搞得一团糟。如果因为风格或语义的原因要修改这些标记,那情况就会变得更糟,你只能在JavaScript中跟踪这些修改。因此,在JavaScript中凡是涉及HTML标记的地方都应该用模板,哪怕只是一个标签。
JavaScript编程实战——1.2 JavaScript MVC和模板
书名: JavaScript编程实战
作者: [美] Jon Raasch
出版社: 人民邮电出版社
原作名: JavaScript programming: pushing the limits
译者: 吴海星
出版年: 2014-3
页数: 320
定价: 59.00
装帧: 平装
ISBN: 9787115345486