javascript - ventajas - "Hola mundo" en el patrón MVC
mvc php (5)
En una entrevista para alguna compañía, me hicieron esta pregunta.
¿Qué patrones de diseño conoces? Luego me dijeron que escribiera la aplicación más simple "hello world" basada en MVC Design Pattern.
Vine con un programa de 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.
más tarde me dijeron que la alerta es una vista. El concepto básico sobre MVC que conozco es cualquier cambio en el modelo que se informa a View. Y hay un controlador en el medio para llamar a los métodos.
¿Puedes corregir mi enfoque o encontrar una solución alternativa para la aplicación hello world MVC? También explica los aspectos sutiles de MVC.
Gracias.
Arquitectura MVC
He escrito un artículo sobre arquitectura MVC. Aquí hay solo un código presente, espero que alguien lo encuentre útil.
//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();
})();
Del ejemplo anterior, entienda que hay tres unidades diferentes en este diseño donde cada una tiene un trabajo específico para realizar. Construyamos el diseño de MVC desde la infraestructura de arriba. Puede haber más de una vista y Observer, aquí solo se crea primero otra vista.
// 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();
})();
Lo que se entiende aquí es que el modal no debe depender de la vista o los espectadores o las operaciones realizadas en los datos. El modal de datos puede ser independiente, pero la vista y el controlador son necesarios porque uno necesita mostrar los datos y el otro necesita manipularlos. Por lo tanto, la vista y el controlador se crean debido a la modal y no al revés.
//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();
De lo anterior se puede ver que ha habido un vínculo establecido entre la vista y el controlador. Y este es uno de los requisitos del patrón MVC. Para demostrar el cambio en el modal, cambiemos el programa y observemos que el cambio en el estado de modal se realiza de manera independiente y refleja a la vista.
//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();
Cuando se cambia el estado del modal, el controlador ha enviado el mensaje a la vista para actualizarse. Está bien, pero aún queda un concepto principal por implementar y es que el observador o controlador necesita ser identificado por el modal. Para ver que esto ocurra, tiene que haber un enlace entre modal y el controlador para que cualquier número de controlador pueda mostrar el interés en el modal, esto se considera como el registro del observador al modal. Esta relación se implementa utilizando el concepto de que el observador no existe en el aire. Su existencia se debe a que tiene interés en el modal, por lo que cuando se crea debe crearse utilizando el modal que necesita para mostrar interés o, en otras palabras, tiene acceso al modal. Miremos el siguiente ejemplo y veamos cómo se logra este patrón de diseño de MVC de forma simple y elegante con 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);
De lo anterior se puede ver que el observador se ha registrado usando la función modal addObsever y establece un enlace al modal. Una vez que todas las instancias se crean. El estado modal se cambió manualmente para mostrar el efecto en la vista. Normalmente, en el entorno de GUI, el cambio generalmente se realiza con un usuario presionando cualquier botón o desde cualquier otra entrada externa. Podemos simular la entrada externa del generador aleatorio y observar el efecto. Aquí, en el ejemplo siguiente, se agregan algunos elementos más en los datos para mostrar el efecto con claridad.
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();
}
El ejemplo anterior demuestra el uso del trabajo de trama MVC donde un modal se mantiene independiente de la vista y del controlador. El modal que representa los datos es responsable de notificar a todas las partes interesadas que han mostrado el interés y se registraron con el modal. Tan pronto como se produce un cambio, se envía una notificación a las partes y se les deja actuar. El siguiente ejemplo es ligeramente diferente del anterior, donde el observador solo muestra los datos recién agregados.
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");
Lo último que a uno le gustaría agregar es borrar el observador cuando no lo necesite. Esto se puede hacer agregando un método llamado removeObserver(object) en las llamadas modales. El patrón de diseño MVC anterior puede ser más refinado mediante el uso de subcalssing y tener funciones comunes presentes en la clase superior haciendo que el diseño sea lo más simple posible, pero se deja en algún otro artículo. Espero eso ayude.
Creo que estás perdiendo el punto aquí.
MVC es un patrón que usarías para diseñar una aplicación. Creo que como mínimo esperaría poder cambiar el modelo y ver el cambio reflejado en la vista.
Normalmente tendrías un objeto para representar el modelo, un objeto diferente para representar la "vista" (que probablemente mediaría entre el modelo y los objetos HTML que estás usando como vista) y un controlador, que tomaría las entradas de tus objetos HTML y actualiza el modelo.
Entonces usted cambia un campo de edición, el campo de edición le dice al controlador, el controlador actualiza el modelo, el modelo dispara eventos que el controlador usa para actualizar cualquier otro componente de vista que dependa de estos datos.
Sería unas pocas líneas más para implementar una versión de "mundo hello", pero creo que esto es lo que estaría buscando en una pregunta de entrevista como esta.
MVC es un patrón de diseño que debe usarse para estructurar su aplicación. MVC significa Modelo, Vista, Control. Básicamente, se debe separar la lógica de negocios (Modelo) de su Interfaz de usuario (Vista) y su Lógica de control.
Por ejemplo:
Usted tiene una clase de usuario que carga usuarios de la base de datos y puede guardarlos. Este es tu modelo.
Usted tiene un Controlador que usa la clase Usuario para registrar a un usuario.
Después de que el controlador está listo, muestra una Plantilla que contiene el texto "Bienvenido $ nombre de usuario".
Además, el Modelo no debe saber acerca de la Vista y el Controlador, la Vista no debe conocer el Controlador, mientras que el Controlador conoce el Modelo y la Vista.
Wikipedia en MVC: http://de.wikipedia.org/wiki/Model_View_Controller
Mejor ejemplo
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 */
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;
El controlador ( C ) escucha en algún tipo de interacción / secuencia de eventos. En este caso, es el evento de carga de la página.
El modelo ( M ) es una abstracción de una fuente de datos.
La vista ( V ) sabe cómo representar los datos del modelo.
El Controlador le dice a Vista que haga algo con algo del Modelo.
En este ejemplo
- la Vista no sabe nada sobre el Modelo aparte de que implementa alguna interfaz
- el Modelo no sabe nada de la Vista y el Controlador
- el Controlador conoce tanto el Modelo como la Vista y le dice a la Vista que haga algo con los datos del Modelo.
Tenga en cuenta que el ejemplo anterior es una simplificación severa para demostrar propósitos. Para ver ejemplos reales de "hello world" en el mundo de JS MVC, eche un vistazo a todoMVC