本篇内容主要讲解“怎么用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方法,这就是发布订阅模式。