“你好世界”在MVC模式中

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.

我被告知警报是一个视图。我所知道的关于 MVC 的基本概念是模型中的任何更改都会报告给视图。中间有一个控制器来调用这些方法。

您能否纠正我的方法，或者为 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;

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

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

视图 (V) 知道如何渲染模型中的数据。

控制器告诉视图使用模型中的某些内容执行某些操作。

在这个例子中，

• 视图除了实现一些接口之外，对模型一无所知。
• 模型对视图和控制器一无所知，
• 控制器知道模型和视图，并告诉视图对模型中的数据执行某些操作。

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

Answer 2

更好的例子

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

/* Model View Controller Pattern with Form Example */


/* Controller Handles the Events */

M = {
    data: {
        userName : "Dummy Guy",
        userNumber : "000000000"
    }, 
    setData : function(d){
        this.data.userName = d.userName;
        this.data.userNumber = d.userNumber;
    },
    getData : function(){
        return data;
    }
}

V = {
    userName : document.querySelector("#inputUserName"),
    userNumber : document.querySelector("#inputUserNumber"),
    update: function(M){
        this.userName.value = M.data.userName;
        this.userNumber.value = M.data.userNumber;
    }
}

C = {
    model: M,
    view: V,
    handler: function(){
        this.view.update(this.model);
    }
}

document.querySelector(".submitBtn").addEventListener("click", function(){
    C.handler.call(C);
}); 

/* Model Handles the Data */

/* View Handles the Display */

Answer 3

MVC架构

我写过一篇关于MVC架构的文章。这里仅提供一些代码，希望有人发现它有帮助。

---

//Modal
var modal = { data: "This is data"};

//View
var view =  { display : function () { 
    console.log ("////////////////////////////");
    console.log ( modal.data);
    console.log ("////////////////////////////");
    }
};

//Controller
var controller = ( function () {
    view.display();
    })();

---

从上面的例子中可以看出，这个设计中有三个不同的单元，每个单元都有一个特定的工作要执行。让我们从上面的基础结构构建MVC设计。可以有多个视图和观察者，这里只先创建另一个视图。

---

// Modal
var modal = { data: "This is data"};
// View
var slashView =  { display : function () { 
    console.log ("////////////////////////////");
    console.log ( modal.data);
    console.log ("////////////////////////////");
    }
};
var starView =  { display : function () { 
    console.log ("****************************");
    console.log ( modal.data);
    console.log ("****************************");
    }
};

// Controller
var controller = ( function () {
    slashView.display();
    starView.display();
})(); 

---

这里要理解的是，模态不能依赖于视图或查看者或对数据执行的操作。数据模式可以独立，但需要视图和控制器，因为一个需要显示数据，另一个需要操作数据。因此，视图和控制器是由于模态而创建的，而不是相反。

---

//Modal
var modal = { 
data : ["JS in object based language"," JS implements prototypal   inheritance"]
};

// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        console.log(this.modal.data[0]);
        console.log("***********************************");
    };
}

function Controller(v){
    this.view = v;
    this.informView = function(){
        // update the modal
        this.view.display();
    };
}
// Test
var consoleView = new View(modal);
var controller = new Controller(consoleView);
controller.informView();

---

从上面可以看出，视图和控制器之间已经建立了链接。这也是MVC模式的要求之一。为了演示模态中的更改，让我们更改程序并观察模态状态的更改是独立完成的并反映在视图中。

//Modal
function Modal(){
this.state = 0;
this.data = ["JS is object based language","JS implements prototypal inheritance"];
//
this.getState = function (){
    return this.state;
};
this.changeState = function (value) {
    this.state = value;
};
}

// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        console.log(this.modal.data[modal.getState()]);
        console.log("***********************************");
    };
}
//controller is created with the view
function Controller(v){
    this.view = v;
    this.updateView = function(){
        // update the view
        this.view.display();
    };
}
// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(consoleView);
controller.updateView();
// change the state of the modal
modal.changeState(1);
controller.updateView();

---

当模态的状态发生更改时，控制器已将消息发送到视图以更新自身。这很好，但仍然有一个主要概念需要实现，那就是观察者或控制器需要由 modal 来识别。为了看到这种情况的发生，模态和控制器之间必须有一个链接，以便任意数量的控制器可以表现出对模态的兴趣，这被视为将观察者注册到模态。这种关系是利用观察者不存在于空中的概念来实现的。它的存在是因为对模态感兴趣，因此在创建它时，必须使用它需要表现出兴趣的模态来创建它，或者换句话说，它可以访问该模态。让我们看下面的例子，看看如何使用 JavaScript 简单而优雅地实现这种 MVC 设计模式。

function Modal(){
    var stateChanged =  false;
    var state = 0;
    var listeners = [];
    var data = ["JS is object based language","JS implements prototypal inheritance"];
    // To access the data
    this.getData = function(){
        return data;
    };
    // To get the current state
    this.getState = function (){
        return state;
    };
    // For simplicity sake we have added this helper function here to show 
    // what happens when the state of the data is changed
    this.changeState = function (value) {
            state = value;
        stateChanged = true;
        notifyAllObservers();
    };
    // All interested parties get notified of change
    function notifyAllObservers (){
    var i;
        for(i = 0; i < listeners.length; i++){
            listeners[i].notify();
        }
    };
    // All interested parties are stored in an array of list
    this.addObserver = function (listener){
        listeners.push(listener);
    };
}

// View class, View is created with modal

function View(m) {
    this.modal = m;
    this.display = function () {
        console.log("***********************************");
        var data = this.modal.getData();
        console.log(data[modal.getState()]);
        console.log("***********************************");
    };
}


// Controller or Observer class has access to both modal and a view
function Controller(m,v){
    this.view = v;
    this.modal = m;
    this.modal.addObserver(this);

    // update view
    this.updateView = function(){
        this.view.display();
    };
    // Receives notification from the modal
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
// change the state of the modal
modal.changeState(1);
modal.changeState(0);
modal.changeState(1);
modal.changeState(0);

---

从上面可以看出，观察者已经使用模态 addObsever 函数注册了自己，并建立了到模态的链接。创建所有实例后。手动更改模态状态以在视图中显示效果。通常在 GUI 环境中，更改通常是通过用户按下任何按钮或通过任何其他外部输入来完成的。我们可以模拟随机发生器的外部输入并观察效果。在下面的示例中，在数据中添加了更多元素以清楚地显示效果。

function Modal(){
var stateChanged =  false;
var state = 0;
var listeners = [];
var data = [
"JS is object based language","JS implements prototypal inheritance",
"JS  has many functional language features", "JS is loosely typed language",
"JS still dominates the Web", "JS is getting matured ","JS shares code               
through prototypal inheritance","JS has many useful libraries like JQuery",
"JS is now known as ECMAScript","JS is said to rule the future of Web for      
many years"];

//
this.getData = function(){
    return data;
};
//
this.getState = function (){
    return state;
};

this.changeState = function (value) {
    state = value;
    stateChanged = true;
    notifyAllObservers();
};

function notifyAllObservers (){
var i;
    for(i = 0; i < listeners.length; i++){
        listeners[i].notify();
    }
}
this.addObserver = function (listner){
    listeners.push(listner);
};
}

// View is created with modal

function View(m) {
    this.modal = m;
    this.display = function () {
    console.log("****************************************************");
        var data = this.modal.getData();
        console.log(data[modal.getState()]);
    };
    //Adding external simulation of user sending input 

    this.pressButton = function(){
        var seed = 10;
        var number = Math.round(Math.random() * seed) ;
        // change the state of modal
        this.modal.changeState(number);
    };
}
// Controller class needs modal and view to communicate

function Controller(m,v){
    this.view = v;
    //console.log(this.view.display);
    this.modal = m;
    this.modal.addObserver(this);

    this.updateView = function(){
        // update the view
        //console.log(this.view);
        this.view.display();
    };
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
// change the state of the modal
for ( var i = 0 ; i < 10; i++){
    consoleView.pressButton();
}

---

上面的示例演示了 MVC 框架的使用，其中模态保持独立于视图和控制器。代表数据的模态负责通知所有已表现出兴趣并在模态中注册的相关方。一旦发生任何变化，就会向各方发送通知，并由他们采取行动。下面的示例与上面的示例略有不同，其中观察者仅显示新添加的数据。

    function Modal(){
var stateChanged =  false;
var listeners = [];
var data = ["JS is object based language"];
// To retrieve the data
this.getData = function(){
    return data;
};
// To change the data by any action
this.modifyData = function (string) {
    ( data.length === 1 )? data.push(string): data.unshift(string);
    stateChanged = true;
    notifyAllObservers();
};

// Notifies all observers
function notifyAllObservers (){
var i;
    for(i = 0; i < listeners.length; i++){
        listeners[i].notify();
    }
}
// Requires to register all observers
this.addObserver = function (listener){
    listeners.push(listener);
};
}
// View is created with modal
function View(m) {
    this.modal = m;
    this.display = function () {
    console.log("****************************************************");
        var data = this.modal.getData();
        console.log(data[0]);
    console.log("****************************************************");
    };
    //Adding external simulation of user sending input 
    this.pressButton = function(string){
        // change the state of modal
        this.modal.modifyData(string);
    };
}

// View class

function Controller(m,v){
    this.view = v;
    this.modal = m;
    this.modal.addObserver(this);

    // Updates the view
    this.updateView = function(){
        this.view.display();
    };
    // When notifies by the modal send the request of update 
    this.notify = function(){
        // state has changed
        this.updateView();
    };
}

// Test
var modal = new Modal();
var consoleView = new View(modal);
var controller = new Controller(modal,consoleView);
consoleView.pressButton();
consoleView.pressButton("JS dominates the web world");
consoleView.pressButton("JQuery is a useful library of JS");

---

人们可能想要添加的最后一件事是在不需要时删除观察者。这可以通过在模态调用中添加一个名为 removeObserver(object) 的方法来完成。上面的 MVC 设计模式可以通过使用子类和在顶级类中提供通用功能来更加细化，从而使设计尽可能简单，但它被留在了其他文章中。希望有帮助。

Answer 4

MVC 是一种应该用于构建应用程序的设计模式。 MVC 代表模型、视图、控制。它基本上是说您应该将业务逻辑（模型）与用户界面（视图）和控制逻辑分开。

例如：

你有一个用户类，它从数据库加载用户，可以保存他们。这是你的模型。

您有一个使用 User 类来登录用户的控制器。

控制器完成后，它会显示一个包含文本“Welcome $username”的模板。

另外，模型不应该知道视图和控制器，视图不应该知道控制器，而控制器知道模型和视图。

关于 MVC 的维基百科：http://de.wikipedia.org/wiki/Model_View_Controller

Answer 5

我认为你有点没有抓住重点。

MVC 是一种用于设计应用程序的模式。我认为至少您希望能够更改模型，并看到视图中反映的更改。

您通常有一个对象来表示模型，另一个对象来表示“视图”（它可能在模型和用作视图的 HTML 对象之间进行中介）和一个控制器，它将接受输入从 HTML 对象中获取并更新模型。

因此，您更改编辑字段，编辑字段告诉控制器，控制器更新模型，模型触发控制器用来更新依赖于该数据的任何其他视图组件的事件。

实现“hello world”版本还需要几行，但我认为这就是我从这样的面试问题中寻找的内容。

Answer 6

因此，我制作了一个简单的示例 MVC，数据输出在 console.log() 处。

let model = {
    data: {
        text: "Hello World",
    },
};

let view = {
    init: function () {
        this.render();
    },

    render: function () {
        console.log(model.data.text);
    },
};

let controller = {
    init: function () {
        view.init();
    },
};

controller.init();