«

怎么用JavaScript模拟实现简单的MVC

时间:2024-5-13 09:00     作者:韩俊     分类: Javascript


本篇内容主要讲解“怎么用JavaScript模拟实现简单的MVC”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用JavaScript模拟实现简单的MVC”吧!

MVC
是一种常见的软件架构模式,将一个应用程序分为三个核心的部分:模型(
Model
)、视图(
View
)和控制器(
Controller
)。
MVC
模式的目的是将应用程序的数据、用户界面和控制逻辑分离,提高代码的可维护性,可拓展性和可重用性。

在我们前端看来:

    Model
    模型层,用来获取、存放所有的对象的数据

    View
    表现层,呈现信息给用户

    Controller
    控制层,模型和视图之间的纽带。

下面我们就按照这三层划分用

js
实现一个
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
。创建一个
index.js
代码逻辑放到
index.js

核心思想

环境已经准备好,下面给我开始搞!

在搞之前,我们首先要知道

MVC
的核心思想是个啥?开头的时候已经讲过了三个核心的部分,那如何让这三个核心的部分串起来呢?

首先代码运行起来要有一个初始化的过程。

Controller
是模型和视图之间的枢纽。首先需要对
Controller
,并且需要在
Controller
里面对
Model
View
之间建立关系。初始化的时候将
Model
中的数据,渲染到
View
中,同时
View
层对界面中的行为事件进行监听,如果界面想要修改数据则触发
View
层中的监听行为,需要在
Controller
中通知
Model
层修改数据,然后再展示到界面。

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();
  };
};

当执行

init
的时候,会对
Model
View
进行初始化,在初始化
View
时,需要将
Controller
本身传入。为什么要传入呢?下面看
View
的时候会介绍。在
model
中有个
register
的方法,需要将初始化的
view
注册到
model
中,同时需要触发
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
中的数据,渲染到界面上。当数据发生变化的时候,
render
方法会重新执行,重新渲染。下面两个按钮监听了两个事件,是
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
对值的读取。还定义了一个数组
views
。还记得上面
controller
的时候
model.register(view)
吗?初始化的时候,将
view
存入到
model
views
中。
notify
就是通知
view
更新的。执行
notify
的时候,对
views
中的每个
view
遍历,然后执行
view
render
方法,这就是发布订阅模式。

标签: javascript

热门推荐