快捷導(dǎo)航

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

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

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

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

在我們前端看來：

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

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

場(chǎng)景

這里我們就來模擬一個(gè)場(chǎng)景。

點(diǎn)擊increase按鈕，就增加，點(diǎn)擊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)建一個(gè)index.js代碼邏輯放到index.js中

核心思想

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

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

首先代碼運(yùn)行起來要有一個(gè)初始化的過程。Controller是模型和視圖之間的樞紐。首先需要對(duì)Controller,并且需要在Controller里面對(duì)Model和View之間建立關(guān)系。初始化的時(shí)候?qū)?code>Model中的數(shù)據(jù)，渲染到View中，同時(shí)View層對(duì)界面中的行為事件進(jìn)行監(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的時(shí)候，會(huì)對(duì)Model和View進(jìn)行初始化，在初始化View時(shí)，需要將Controller本身傳入。為什么要傳入呢？下面看View的時(shí)候會(huì)介紹。在model中有個(gè)register的方法，需要將初始化的view注冊(cè)到model中，同時(shí)需要觸發(fā)model的notify完成初始化的整個(gè)過程。

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。定義一個(gè)render方法，這個(gè)方法初始化的時(shí)候，會(huì)獲取model中的數(shù)據(jù)，渲染到界面上。當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，render方法會(huì)重新執(zhí)行，重新渲染。下面兩個(gè)按鈕監(jiān)聽了兩個(gè)事件，是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對(duì)值增加，sub對(duì)值減少。getVal對(duì)值的讀取。還定義了一個(gè)數(shù)組views。還記得上面controller的時(shí)候model.register(view)嗎？初始化的時(shí)候，將view存入到model的views中。notify就是通知view更新的。執(zhí)行notify的時(shí)候，對(duì)views中的每個(gè)view遍歷，然后執(zhí)行view的render方法，這就是發(fā)布訂閱模式。

到此這篇關(guān)于JavaScript模擬實(shí)現(xiàn)簡(jiǎn)單的MVC的示例詳解的文章就介紹到這了,更多相關(guān)JavaScript實(shí)現(xiàn)MVC內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: