溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用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層修改數據，然后再展示到界面。
const myApp = {};
myApp.Model = function () {}
myApp.View = function () {}
myApp.Controller = function () {}
(function () {
var controller = new myApp.Controller();
controller.init();
})();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
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
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”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
