Javascript MVC 模式中的“Hello World”

"Hello World" in MVC Pattern

提问by riship89

In an interview for some company, I was asked this question.

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

What design patterns do you know...then I was told to write simplest "hello world" application based on MVC Design Pattern.

你知道什么设计模式……然后我被告知要基于 MVC 设计模式编写最简单的“hello world”应用程序。

I came up with a JavaScript program

我想出了一个 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.

later I was told that alert is a view. The basic concept about MVC I know is any changes in Model are reported to View. And there is a controller in between to call the methods.

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

Can you correct my approach, or come up with an alternate solution for hello world MVC application. Also explain subtle aspects of MVC.

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

Thanks.

谢谢。

回答by Raynos

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) listens on some kind of interaction/event stream. In this case it's the page's loading event.

控制器 ( C) 侦听某种交互/事件流。在这种情况下，它是页面的加载事件。

Model (M) is an abstraction of a data source.

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

View (V) knows how to render data from the Model.

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

The Controller tells to View to do something with something from the Model.

Controller 告诉 View 用 Model 中的东西做一些事情。

In this example

在这个例子中

• the View knows nothing about the Model apart from it implements some interface
• the Model knows nothing of the View and the Controller
• the Controller knows about both the Model and the View and tells the View to go do something with the data from the Model.

• 除了实现一些接口外，视图对模型一无所知
• 模型对视图和控制器一无所知
• 控制器知道模型和视图，并告诉视图使用来自模型的数据做一些事情。

Note the above example is a severe simplification for demonstrating purposes. For real"hello world" examples in the JS MVC world go take a look at todoMVC

请注意，上面的示例是出于演示目的的严重简化。有关JS MVC 世界中真正的“hello world”示例，请查看todoMVC

回答by Tarandeep Singh

Better Example

更好的例子

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 */

回答by Ghafoor

MVC Architecture

MVC架构

I have written an article about MVC architecture. Here is only some code present,hope anyone finds it helpful.

我写了一篇关于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();
    })();

---

---

From the above example just understand that there are three different units in this design where each has a specific job to perform. Let's build the MVC design from the above infra structure .There can be more than one view and Observer, here only another view is created first.

从上面的例子中可以理解，在这个设计中有三个不同的单元，每个单元都有一个特定的工作要执行。让我们从上面的基础结构构建 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();
})(); 

---

---

What is understood here is that the modal must not be dependent upon either the view or viewers or the operations performed on the data. The data modal can stand alone but the view and controller are required because one needs to show the data and the other needs to manipulate it. Thus view and controller are created because of the modal and not the other way round.

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

---

---

//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();

---

---

From the above it can be seen that there has been a link established between view and the controller. And this is one of the requirement of MVC pattern. To demonstrate the change in the modal let's change the program and observe that change in the state of modal is done independently and reflects in view.

从上面可以看出，view和controller之间已经建立了联系。这是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();

---

---

When the state of the modal is changed the controller has sent the message to the view to update itself. It is fine, but still one main concept is left to be implemented and that is the observer or controller needs to be identified by the modal . In order to see this happening, there has to be a link between modal and the controller so that any number of controller can show the interest in the modal, this is considered as registering the observer to the modal. This relation ship is implemented using the concept that observer does not exist in the air. Its existence come because of having interest in the modal thus when it is created it has to be created using the modal that it needs to show interest or in other words it has an access to the modal. Let's look at the example below and see how this MVC design pattern is achieved simply and elegantly using JavaScript.

当模态的状态发生变化时，控制器已将消息发送到视图以更新自身。这很好，但仍有一个主要概念需要实现，即观察者或控制器需要由 modal 识别。为了看到这种情况发生，模态和控制器之间必须有一个链接，以便任何数量的控制器都可以表现出对模态的兴趣，这被认为是将观察者注册到模态。这种关系是利用空中不存在观察者的概念来实现的。它的存在是因为对模态感兴趣，因此当它被创建时，它必须使用它需要表现出兴趣的模态来创建，或者换句话说，它可以访问模态。让'

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);

---

---

From the above it can be seen that the observer has register itself using modal addObsever function and establishes a link to the modal. Once all instances are created. Modal state was changed manually to show the effect in the view. Typically in GUI environment, the change is usually done either with a user pressing any button or from any other external input. We can simulate the external input from the random generator and observe the effect. Here in the example below, some more elements are added in the data to show the effect clearly.

从上面可以看出，观察者已经使用模态 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();
}

---

---

The above example demonstrates the use of MVC frame work where a modal is kept independent of the view and and the controller. The modal representing the data is responsible of notifying all the interested parties that has shown the interest and registered themselves with the modal. As soon as any change happens notification is send to the parties and action is left upon them. The example below is slightly different from the above where only newly added data is shown by the observer.

上面的示例演示了 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");

---

---

The last thing which one may like to add is to delete the observer when not needed.This can be done through adding a method called removeObserver(object)in the modal calls. The above MVC design pattern can be more refined by using subcalssing and having common function present in the top class making the design as simple as possible but it is left on some other article. Hope it helps.

可能要添加的最后一件事是在不需要时删除观察者。这可以通过添加removeObserver(object)在模态调用中调用的方法来完成。上面的 MVC 设计模式可以通过使用 subcalssing 并在顶级类中存在公共功能来更加细化，从而使设计尽可能简单，但它留在了其他一些文章中。希望能帮助到你。

回答by Timo

MVC is a design pattern that should be used to structure your application. MVC stands for Model, View, Control. It basically sais that you should separate your business-logic (Model) from your User Interface (View) and your Control-Logic.

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

For example:

例如：

You have a user class, that loads users from the database, can save em. This is your model.

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

You have a Controller that uses the User class to log a user in.

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

After the controller is done, it displays a Template containing the Text "Welcome $username".

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

Also, the Model should not know about the View and the Controller, the View should not know about the Controller, whereas the Controller knows about the Model and the View.

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

Wikipedia on MVC: http://de.wikipedia.org/wiki/Model_View_Controller

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

回答by stevex

I think you're kind of missing the point here.

我认为你有点错过了这里的重点。

MVC is a pattern you'd use for designing an application. I think at the minimum you'd expect to be able to change the model, and see the change reflected in the view.

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

You'd typically have an object to represent the model, a different object to represent the "view" (which would probably mediate between the model and the HTML objects that you're using as the view) and a controller, which would take inputs from your HTML objects and update the model.

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

So you change an edit field, the edit field tells the controller, the controller updates the model, the model fires events that the controller uses to update any other view components that depend on this data.

所以你改变了一个编辑字段，编辑字段告诉控制器，控制器更新模型，模型触发控制器用来更新依赖此数据的任何其他视图组件的事件。

It'd be a few more lines to implement a "hello world" version, but I think this is what I'd be looking for from an interview question like this.

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