javascript - MVC 模式中的 "Hello World"

Question

在某公司的面试中，被问到这个问题。

您知道哪些设计模式...然后我被告知要基于 MVC 设计模式编写最简单的“hello world”应用程序。

我想出了一个 JavaScript 程序

var arr = ["a","b","c","d"];   // this is an array, same as store or model
alert(arr[0]);                // this is controller
//and browser alert is a view.

后来有人告诉我 alert 是一个 View 。我所知道的关于 MVC 的基本概念是模型中的任何更改都会报告给 View 。并且在两者之间有一个 Controller 来调用这些方法。

您能否纠正我的方法，或者为 hello world MVC 应用程序提出替代解决方案。还解释了 MVC 的微妙方面。

谢谢。

Answer 1

var M = {}, V = {}, C = {};

M.data = "hello world";

V.render = function (M) { alert(M.data); }

C.handleOnload = function () { V.render(M); }

window.onload = C.handleOnLoad;

Controller (C) 监听某种交互/事件流。在本例中，它是页面的加载事件。

模型(M)是数据源的抽象。

View (V) 知道如何从 Model 渲染数据。

Controller 告诉 View 对 Model 中的某事进行处理。

在这个例子中

• View 除了实现一些接口(interface)外对模型一无所知
• 模型对 View 和 Controller 一无所知
• Controller 知道模型和 View ，并告诉 View 去处理来自模型的数据。

请注意，以上示例是出于演示目的而进行的严格简化。对于 JS MVC 世界中的真实“hello world”示例，请查看todoMVC。