Javascript MV*形式

2019年8月30日 178次阅读 来源: 一流的人

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞