快捷導(dǎo)航

JavaScript模擬實現(xiàn)簡單的MVC的示例詳解

更新時間：2023年04月12日 08:44:08 作者：翰玥

MVC是一種常見的軟件架構(gòu)模式，MVC模式的目的是將應(yīng)用程序的數(shù)據(jù)、用戶界面和控制邏輯分離，提高代碼的可維護性，可拓展性和可重用性。本文就來用用JS模擬實現(xiàn)一個簡單的MVC吧

MVC是一種常見的軟件架構(gòu)模式，將一個應(yīng)用程序分為三個核心的部分:模型（Model）、視圖（View）和控制器（Controller）。MVC模式的目的是將應(yīng)用程序的數(shù)據(jù)、用戶界面和控制邏輯分離，提高代碼的可維護性，可拓展性和可重用性。

在我們前端看來：

Model模型層，用來獲取、存放所有的對象的數(shù)據(jù)
View表現(xiàn)層，呈現(xiàn)信息給用戶
Controller控制層，模型和視圖之間的紐帶。

下面我們就按照這三層劃分用js實現(xiàn)一個MVC。

場景

這里我們就來模擬一個場景。

點擊increase按鈕，就增加，點擊decrease就減少

<body>
	<div id="num"></div>
	<button id="increase">increase</button>
	<button id="decrease">decrease</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script src="./index.js"></script>

為了方便操作dom我們引入了jquery。創(chuàng)建一個index.js代碼邏輯放到index.js中

核心思想

環(huán)境已經(jīng)準備好，下面給我開始搞！

在搞之前，我們首先要知道MVC的核心思想是個啥？開頭的時候已經(jīng)講過了三個核心的部分，那如何讓這三個核心的部分串起來呢？

首先代碼運行起來要有一個初始化的過程。Controller是模型和視圖之間的樞紐。首先需要對Controller,并且需要在Controller里面對Model和View之間建立關(guān)系。初始化的時候?qū)?code>Model中的數(shù)據(jù)，渲染到View中，同時View層對界面中的行為事件進行監(jiān)聽，如果界面想要修改數(shù)據(jù)則觸發(fā)View層中的監(jiān)聽行為，需要在Controller中通知Model層修改數(shù)據(jù)，然后再展示到界面。

init

const myApp = {};

myApp.Model = function () {}

myApp.View = function () {}

myApp.Controller = function () {}

(function () {
  var controller = new myApp.Controller();
  controller.init();
})();

Controller

myApp.Controller = function () {
  var view, model;

  this.init = function () {
    model = new myApp.Model();
    view = new myApp.View(this);

    model.register(view);
    model.notify();
  };

  this.increase = function () {
    model.add(1);
    model.notify();
  };

  this.decrease = function () {
    model.sub(1);
    model.notify();
  };
};

當(dāng)執(zhí)行init的時候，會對Model和View進行初始化，在初始化View時，需要將Controller本身傳入。為什么要傳入呢？下面看View的時候會介紹。在model中有個register的方法，需要將初始化的view注冊到model中，同時需要觸發(fā)model的notify完成初始化的整個過程。

View

// View
myApp.View = function (controller) {
  var $num = $("#num"),
    $inc = $("#increase"),
    $dec = $("#decrease");

  this.render = function (model) {
    $num.text(model.getVal() + "rem");
  };

  $inc.click(controller.increase);
  $dec.click(controller.decrease);
};

在view中，獲取界面需要操作的dom。定義一個render方法，這個方法初始化的時候，會獲取model中的數(shù)據(jù)，渲染到界面上。當(dāng)數(shù)據(jù)發(fā)生變化的時候，render方法會重新執(zhí)行，重新渲染。下面兩個按鈕監(jiān)聽了兩個事件，是controller中increase和decrease方法。這就是為什么需要將controller傳入到view中。

Model

//Model
myApp.Model = function () {
  var val = 0;

  this.add = function (v) {
    val += v;
  };

  this.sub = function (v) {
    val -= v;
  };

  this.getVal = function () {
    return val;
  };

  var self = this,
    views = [];

  this.register = function (view) {
    views.push(view);
  };

  this.notify = function () {
    for (var i = 0; i < views.length; i++) {
      views[i].render(self);
    }
  };
};

在Model層中，定義了初始值val，add對值增加，sub對值減少。getVal對值的讀取。還定義了一個數(shù)組views。還記得上面controller的時候model.register(view)嗎？初始化的時候，將view存入到model的views中。notify就是通知view更新的。執(zhí)行notify的時候，對views中的每個view遍歷，然后執(zhí)行view的render方法，這就是發(fā)布訂閱模式。