我们在前面3章节学习过的一些创建型,结构型和行为型设计模式可以组合在一起,成为架构型设计模式。
8.1 MVC模式
MVC(Model-View-Controller,模型-视图-控制器)模式可以把JavaScript应用程序的代码划分为3个独立的部分:模型(Model),负责把代码中的与底层数据构成相关的代码组合在一起,包括对数组对存储和读取;视图(View),负责将那些用于把模型中所保存的数据显示在屏幕上的代码组合一起,本质上就是对各DOM元素进行处理;控制器(Controller),负责处理系统中的业务逻辑,并在需要时更新模型和视图,它使得模型和视图不需要在彼此之间直接沟通,实现了它们之间的松解耦连接。关注点分离(Spearation Of Concerns,SOC)会使得代码更易于理解和处理,更易于测试,并可使工作于相同项目的多位开发者根据应用程序的模型,视图,控制器3个层次进行任务划分。
MVC架构模式实际上是将我们在第6章和第7章所学过的3种特定设计模式结合到一起使用,即观察者模式,组合模式和策略模式。当模型中的数据发生改变时,就会运用观察者模式来触发事件,传出更新后的数据,以供系统中的其他部分使用。同样,视图也会使用相同的观察模式来监听模型中数据的变化,并使用更新后的数据来更新用户界面。视图只能从模型直接读取数据,并不能修改数据,那是控制器的职责。视图还能包含子视图,用作处理较大型UI的可重用的部分。可运用组合模式,这样确保控制器就不需要清楚其逻辑所需影响的视图数量了。最后,控制器将使用策略模式来应用一个特定的视图至它本身,使得较大型系统中的多个视图可以共享相同的控制器逻辑,前提是这些视图都暴露一个相似的方法。我选择把此方法命名为render()。该方法接收来自于模型的数据,并将视图放置在当前页面,把视图与系统的其余部分广播发布的事件进行绑定设置,以使视图准备就绪。值得注意的是,在JavaScript应用程序中,模型通常时通过Ajax连接至一个作为数据库(用于保存系统所表示的数据)的后台服务器的。
代码清单8-1展示了我们时如何创建一个“类”来处理一个采用MVC模式的简单系统中的模型数据的表示的,此系统用于屏幕上email地址列表的管理。
代码清单8-1 模型