Javascript MV*模式

Warren 发布于2019-08-19 17:49 / 605人阅读

摘要：描述的是的当前状态。持久化可以允许我们编辑和更新模型保存其最新状态在内存中用户的数据存储中或者与数据库同步。引用到集合模型过滤所有被查看过的图片过滤所有未被查看过的图片视图视图是模型的可视化表示视图是关于构建和维护一个元素。

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

云服务器私有云 javascript命令模式 javascript严格模式 javascript设计模式 mv

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78875.html

Javascript MVC框架简介

摘要：当前有超过个框架，但是其中很多没有使用。扮演了的角色，使用处理用户输入同时检索数据为数据格式化，用于展现类似，提供了和之间的数据绑定借鉴了其他模式，没有特定的名称。 https://speakerdeck.com/addyosmani/digesting-javascript-mvc 这里看了一个关于js mvc框架的ppt，作者是一位google的工程师，感觉挺全面挺有意思，适合像我...

jsyzchen 2019-08-21 12:23 评论0 收藏0
如何实现一个MV*模式（MVC/MVP/MVVM）

摘要：首先我们要大概搞清楚一些什么模式。什么模式是等的一个统称，它们各有不同，但本质上其实是一个东西。不关心它会被如何显示或是如何被操作。效果图如下，我们只关心功能实现，所以样式丑我们先忍一下。假如让你不依托任何前端框架（React/Vue/Angular等等），单纯用Javascript编写一个网站应用，你还知道怎么开发吗？举个例子，产品经理让你实现一个网页，上面有一张猫咪的图片，猫咪...

Cc_2011 2019-08-22 16:57 评论0 收藏0
MVC，MVP 和 MVVM 模式如何选择？

摘要：如何同步的变更。在没有环境下对进行单元测试的时候，业务逻辑的正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这方面的讨...

Worktile 2019-08-16 12:30 评论0 收藏0