javascript三个非常重要的架构模式:
MVC(模型-视图-控制器) backbone
MVP(模型-视图-表示器)
MVVM(模型-视图-视图模型)
1. MVC
将业务数据(Model),用户界面(View)隔离,(Controller)管理逻辑和用户输入
Model 代表特定于领域的数据,不了解用户界面(View(视图),Controller(控制器)).当一个Model(模型）改变时,它会通知它的观察者。
View 描述的是Model的当前状态。Observer模式用于让View了解Model什么时候更新或修改
Presentation由View关注,但不只是单个View(视图)和Controller(控制器),屏幕上显示的每个部分或者元素都需要View-Controller对。
Controller 在这个View-Controller对中的作用是处理用户交互(如按键和点击等动作),为View做决定。
1.1 Model(模型)
使用Backbone实现的一个非常简单的Model(模型)
var Photo = Backbone.Model.extend({ //photo的默认属性 defaults: { src: "placeholder.jpg", caption: "A default image", viewed: false }, //确保每个photo都有一个src initialize: function(){ this.set({"src": this.defaults.src}); }}); 在实际应用程序中使用Model(模型)时,我们一般也要求Model(模型）具持久化。持久化可以允许我们编辑和更新Model(模型),保存其最新状态在内存中、用户的localStorage数据存储中或者与数据库同步。
一个Model(模型)可能有多个观察它的View(视图)。
在集合组(Backbone)里管理Model(模型）允许我们根据从组中收到的通知编写应用程序逻辑,该组中包含的所有Model(模型)都应被改变。
var PhotoGallery = Backbone.Collection.extend({ //引用到集合模型 model: Photo, //过滤所有被查看过的图片 viewed: function(){ return this.filter(function(photo){ return photo.get("viewed"); }); }, //过滤所有未被查看过的图片 unviewed: function(){ return this.without.apply(this, this.viewed()); } }); 1.2 View(视图)
视图是Model(模型)的可视化表示,JavascriptView视图是关于构建和维护一个DOM元素。