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模拟实现简单的MVC的示例详解的文章就介绍到这了,更多相关JavaScript实现MVC内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理2014-03-03
setInterval 是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。下面通过本文给大家分享JS SetInterval 代码实现页面轮询，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了浅谈webpack 四个核心概念之Entry，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要为大家介绍了JavaScript的内置对象Math和字符串，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
webpack有两种组织模块依赖的方式，同步和异步，这篇文章主要介绍了webpack动态加载与打包方式，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法，一款功能强大的日期选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在前端开发中,为了优化用户的交互体验,常需要用到弹窗来进行提示,引导用户操作,下面这篇文章主要给大家介绍了关于uniapp中常用的几种提示弹框的相关资料,需要的朋友可以参考下2022-09-09
JavaScript 引用类型实例详解【数组、对象、严格模式等】
这篇文章主要介绍了JavaScript 引用类型,结合实例形式详细分析了JavaScript 数组、对象、严格模式引用类型相关概念、原理及操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了Javascript实现鼠标移入方向感知，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
最新评论