Javascript MV*模式

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