Javascript MV*模式

2024年4月14日 253次阅读 来源: 一流的人

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元素。

1.3 Controller(控制器)

2. MVP

3. MVVM

    原文作者：一流的人
    原文地址: https://segmentfault.com/a/1190000004596780
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞