Javascript MV*模式

一流的人發表於2016-03-13
JavaScript模式

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

相關文章