"Hello World" we wzorze MVC

Lepszy Przykład

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

Architektura MVC

Napisałem artykuł o architekturze MVC. Tutaj jest tylko jakiś kod obecny, mam nadzieję, że ktoś uzna to za pomocne.

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

Z powyższego przykładu wystarczy zrozumieć, że istnieją trzy różne jednostki w tym projekcie, w których każda ma określone zadanie do wykonania. Zbudujmy projekt MVC z powyższej struktury infra .Może być więcej niż jeden widok I Obserwator, tutaj tylko inny widok jest tworzony pierwszy.

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

Co rozumie się tutaj, że modal nie może być zależny ani od widoku lub widzów lub operacji wykonywanych na danych. Modal danych może być niezależny, ale widok i kontroler są wymagane, ponieważ jeden musi pokazać dane, a drugi musi nimi manipulować. Tak więc widok i kontroler są tworzone ze względu na modal, a nie na odwrót.

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

Z powyższego widać, że istnieje związek między widokiem a kontroler. I jest to jeden z wymagań wzorca MVC. Aby zademonstrować zmianę w modalu, zmieńmy program i obserwujmy, że zmiana w stanie modalu odbywa się niezależnie i odbija w widoku.

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

Po zmianie stanu modalnego kontroler wysyła wiadomość do widoku, aby się zaktualizować. Jest w porządku, ale nadal pozostaje jedna główna koncepcja do wdrożenia, a mianowicie obserwator lub kontroler musi być zidentyfikowany przez modal . W aby to zobaczyć, musi istnieć związek między modalem a kontrolerem, aby dowolna liczba kontrolerów mogła wykazać zainteresowanie modalem, jest to uważane za rejestrację obserwatora do modalu. Relacja ta realizowana jest przy użyciu koncepcji, że obserwator nie istnieje w powietrzu. Jego istnienie pochodzi z powodu posiadania zainteresowania w modal więc kiedy jest tworzony musi być stworzony za pomocą modal, że musi pokazać zainteresowanie lub innymi słowy ma dostęp do modal. Spójrzmy na poniższy przykład i zobaczmy, jak ten wzorzec projektowy MVC jest osiągany w prosty i elegancki sposób za pomocą 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);

Z powyższego widać, że obserwator ma rejestr za pomocą funkcji modal addObsever i ustanawia link do modalu. Po utworzeniu wszystkich instancji. Stan modalny został zmieniony ręcznie, aby pokazać efekt w widoku. Zazwyczaj w środowisku GUI zmiana odbywa się zwykle za pomocą użytkownika naciskającego dowolny przycisk lub z dowolnego inne wejście zewnętrzne. Możemy symulować zewnętrzne wejście z generatora losowego i obserwować efekt. W poniższym przykładzie dodano kilka dodatkowych elementów w danych, aby wyraźnie pokazać efekt.

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

Powyższy przykład pokazuje wykorzystanie ramek MVC, gdzie modal jest utrzymywany niezależnie od widoku i kontrolera. Modal reprezentujący dane jest odpowiedzialny za powiadomienie wszystkich zainteresowanych stron, które wykazały zainteresowanie i zarejestrowały się z modalem. Jak tylko nastąpi jakakolwiek zmiana, powiadomienia są wysyłane do stron i działania są pozostawione na nich. Poniższy przykład nieco różni się od powyższego, gdzie obserwator pokazuje tylko nowo dodane dane.

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

Ostatnią rzeczą, którą można dodać, jest usunięcie obserwatora, gdy nie jest to konieczne.Można to zrobić poprzez dodanie metody o nazwie removeObserver(object) w wywołaniach modalnych. Powyższy wzór projektowy MVC może być bardziej wyrafinowany za pomocą subcalssingu i wspólnego funkcja obecna w najwyższej klasie sprawia, że projekt jest tak prosty, jak to możliwe, ale pozostaje na innym artykule. Mam nadzieję, że to pomoże.

MVC jest wzorcem projektowym, który powinien być użyty do struktury aplikacji. MVC oznacza Model, Widok, Kontrola. Zasadniczo mówi się, że powinieneś oddzielić swoją logikę biznesową (Model) od interfejsu użytkownika (widok) i logikę sterowania.

Na przykład:

Masz klasę user, która ładuje użytkowników z bazy danych, może je zapisać. To twój model.

Masz kontroler, który używa klasy User do logowania użytkownika.

Po wykonaniu kontrolera, to wyświetla szablon zawierający tekst "Welcome $username".

Ponadto Model nie powinien wiedzieć o widoku i kontrolerze, widok nie powinien wiedzieć o kontrolerze, podczas gdy kontroler wie o modelu i widoku.

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

Myślę, że trochę nie rozumiesz.

MVC jest wzorcem używanym do projektowania aplikacji. Myślę, że przynajmniej można oczekiwać, aby być w stanie zmienić model, i zobaczyć zmiany odzwierciedlone w widoku.

Zazwyczaj masz obiekt do reprezentowania modelu, inny obiekt do reprezentowania "widoku" (który prawdopodobnie pośredniczy między modelem a obiektami HTML, których używasz jako widoku) i kontroler, który pobierałby dane wejściowe z twojego HTML obiektów i zaktualizować model.

Więc zmieniasz pole edycji, pole edycji informuje kontroler, kontroler aktualizuje model, model wywołuje zdarzenia, które kontroler używa do aktualizacji innych komponentów widoku, które zależą od tych danych.

Byłoby jeszcze kilka linijek, aby zaimplementować wersję "hello world" , ale myślę, że tego właśnie szukałbym po takim pytaniu wywiadowym.