學習設計模式之MVC、MVP、MVVM

時間 2019-11-24

標籤學習設計模式 mvc mvp mvvm 简体版

原文原文鏈接

引言：認真學習了下廣義MVC模式下前端怎麼寫，狹義的MVC實際上是有一個變化過程：MVC MVP MVVM，網上看了不少的關於這方面的介紹，之前老是將視圖數據邏輯寫一個模塊，最近嘗試分開並用組件式的開發的方式...javascript

MVC

MVC是模型(Model)－視圖(View)－控制器(Controller)的縮寫，是設計模式中最經常使用的軟件架構。html

視圖（View）：用戶界面。
控制器（Controller）：業務邏輯
模型（Model）：數據保存前端

全部方式都是單向通訊：vue

View 接受用戶交互請求
View 將請求轉交給Controller處理
Controller 操做Model進行數據更新保存
數據更新保存以後，Model會通知View更新
View 更新變化數據使用戶獲得反饋

MVC簡化模型java

//頁面加載後建立MVC對象
$(function(){
    //建立MVC對象
    var MVC=MVC||{}；
    //初始化MVC數據模型層
    MVC.model=function(){}();
    //初始化MVC視圖層
    MVC.view=function(){}();
    //初始化MVC控制器層
    MVC.controller=function(){}();
});

MVC數據模型層

//MVC數據模型層
MVC.model=function(){
    //內部數據對象
    var M={};
    //服務器端獲取數據，一般經過Ajax獲取並存儲
    M.data={};
    //配置數據
    M.config={};
    return {
        //獲取服務器端數據
        getData:function(m){
            return M.data[m];
        },
        //獲取配置數據
        getConfig:function(c){
            //根據數據字段獲取數據
            return M.config[c]
        },
        //設置服務器數據
        setData:function(m,v){
            M.data[m]=v;
            return this;
        },
        //設置配置數據
        setConfig:function(c,v){
            M.data[c]=v;
            return this;
        }
    };
}();

MVC視圖層

//MVC視圖層
MVC.view=function(){
    //模型數據層對象操做方法引用
    var M=MVC.model;
    //內部視圖建立方法對象
    var V={};
    //獲取視圖的接口方法
    return function(v){
        //根據視圖名詞返回視圖
        V[v]();
    }
}();

MVC控制器層

//MVC控制器層
MVC.controller=function(){
    //模型數據層對象操做方法引用
    var M=MVC.model;
    //視圖數據層對象操做方法引用
    var V=MVC.view;
    //控制器建立方法對象
    var C={};
}();