"Hello World" в шаблоне MVC

В интервью для какой-то компании меня задали этот вопрос.

Какие шаблоны дизайна вам известны... тогда мне сказали написать простейшее приложение "hello world" на основе шаблона проектирования MVC.

Я придумал программу 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, которую я знаю, - это любые изменения в Модели, которые сообщаются View. И между контроллером есть вызов, чтобы вызвать методы.

Можете ли вы исправить мой подход или придумать альтернативное решение для приложения hello world MVC. Также объясните тонкие аспекты MVC.

Спасибо.

ОТВЕТЫ

Ответ 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) - это абстракция источника данных.

View (V) знает, как отображать данные из Модели.

Контроллер сообщает "Открыть", чтобы что-то сделать с помощью модели.

В этом примере

  • View ничего не знает о модели, кроме нее реализует какой-то интерфейс
  • Модель ничего не знает о представлении и контроллере
  • Контроллер знает как модель, так и представление, и говорит, что представление должно делать что-то с данными из Модели.

Обратите внимание, что приведенный выше пример является серьезным упрощением для демонстрации целей. Для реальных примеров "привет мир" в мире JS MVC рассмотрим todoMVC

Ответ 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 */

Ответ 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 из приведенной выше структуры. Здесь может быть несколько видов и Observer, здесь сначала создается только другой вид.

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

Когда состояние модальности изменяется, контроллер отправил сообщение в представление, чтобы обновить его. Это прекрасно, но все же остается одна принципиальная концепция, которая должна быть определена модальным. Чтобы это произошло, необходимо иметь связь между модальным и контроллером, чтобы любое количество контроллеров могло показать интерес к модальному, это считается регистрацией наблюдателя модальным. Этот корабль отношения реализуется с использованием концепции, что наблюдатель не существует в воздухе. Его существование происходит из-за интереса к модальному, поэтому, когда оно создается, оно должно создаваться с использованием модальности, которая должна проявлять интерес или, другими словами, иметь доступ к модальному. Давайте посмотрим на приведенный ниже пример и посмотрим, как этот шаблон проектирования MVC достигается просто и элегантно с помощью JavaScript.

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 может быть более усовершенствован, используя подкалибровку и имеющую общую функцию, присутствующую в верхнем классе, что делает дизайн максимально простым, но он оставлен на какой-либо другой статье. Надеюсь, что это поможет.

Ответ 4

MVC - это шаблон проектирования, который должен использоваться для структурирования вашего приложения. MVC означает Model, View, Control. В основном это означает, что вы должны отделить свою бизнес-логику (модель) от своего пользовательского интерфейса (View) и вашей контрольной логики.

Например:

У вас есть пользовательский класс, который загружает пользователей из базы данных, может сохранить их. Это ваша модель.

У вас есть контроллер, который использует класс User для входа пользователя.

После того, как контроллер будет выполнен, он отобразит Шаблон, содержащий текст "Welcome $username".

Кроме того, модель не должна знать о представлении и контроллере, представление не должно знать о контроллере, тогда как контроллер знает о модели и представлении.

Википедия о MVC: http://de.wikipedia.org/wiki/Model_View_Controller

Ответ 5

Я думаю, что вы здесь не хватает.

MVC - это шаблон, который вы использовали для разработки приложения. Я думаю, что, как минимум, вы ожидаете, что сможете изменить модель и увидеть изменение, отраженное в представлении.

У вас обычно есть объект для представления модели, другой объект для представления "представления" (который, вероятно, будет посредником между моделью и объектами HTML, которые вы используете в качестве представления) и контроллер, который будет принимать входные данные из ваших объектов HTML и обновлять модель.

Итак, вы меняете поле редактирования, поле редактирования указывает контроллеру, контроллер обновляет модель, модель запускает события, которые контроллер использует для обновления любых других компонентов представления, которые зависят от этих данных.

Было бы еще несколько строк для реализации версии "hello world", но я думаю, что это то, что я искал бы из такого интервью.