Javascript MV*模式

Warren 發布于2019-08-19 17:49 / 678人閱讀

摘要：描述的是的當前狀態。持久化可以允許我們編輯和更新模型保存其最新狀態在內存中用戶的數據存儲中或者與數據庫同步。引用到集合模型過濾所有被查看過的圖片過濾所有未被查看過的圖片視圖視圖是模型的可視化表示視圖是關于構建和維護一個元素。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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