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