A medida que los programas de JavaScript se vuelven cada vez más complejos, a menudo requieren un equipo para desarrollarse en colaboración, y la modularización del código y las especificaciones organizacionales se vuelven extremadamente importantes. El patrón MVC es un modelo clásico de organización de código.
(... Introducción a MVC).
(1) Modelo
El modelo representa la capa de datos, es decir, la fuente de datos requerida por el programa, y generalmente se representa en formato JSON.
(2) Ver
La vista representa la capa de presentación, que es la interfaz de usuario. Para las páginas web, es el código HTML de la página web que se ve a los usuarios.
(3) Controlador
El controlador representa la capa de control, utilizada para procesar los datos originales (modelo) y transferirlo a la vista.
Dado que la programación web es diferente de la programación de clientes, basada en MVC, la comunidad de JavaScript ha producido varios marcos variantes MVP (modelo-visión-presente), MVVM (modelo-view-viewmodel), etc. Algunas personas llaman colectivamente todos los diversos modos de este tipo de MV de marco*.
La ventaja de un marco es que organiza el código razonablemente, facilita el trabajo en equipo y el mantenimiento futuro, y la desventaja es que tiene un cierto costo de aprendizaje y lo limita a escribirlo.
Carga de la columna vertebral
La copia del código es la siguiente:
<script src = "/javascripts/lib/jQuery.js"> </script>
<script src = "/javascripts/lib/subscore.js"> </script>
<script src = "/javascripts/lib/backbone.js"> </script>
<script src = "/javascripts/jst.js"> </script>
<script src = "/javascripts/router.js"> </script>
<script src = "/javascripts/init.js"> </script>
Backbone.view
Uso básico
El método Backbone.view se utiliza para definir una clase de vista.
La copia del código es la siguiente:
var appView = backbone.view.extend ({
render: function () {
$ ('Main'). Append ('<h1> Título del primer nivel </h1>');
}
});
El código anterior define una clase View AppView a través del método Extend de Backbone.View. Hay un método de renderizado dentro de esta clase para colocar la vista en la página web.
Al usarlo, debe crear una nueva instancia de la clase View y luego llamar al método Render a través de la instancia, para que la vista se pueda mostrar en la página web.
La copia del código es la siguiente:
var appView = new AppView ();
appView.render ();
El código anterior crea una nueva instancia AppView de la clase View AppView, y luego llame a AppView.render, y el contenido especificado se mostrará en la página web.
Al crear una nueva instancia de vista, generalmente necesita especificar un modelo.
La copia del código es la siguiente:
Documento var = nuevo documento ({
Modelo: doc
});
Inicializar el método
La vista también puede definir el método de inicialización. Al generar una instancia, se llamará automáticamente al método para inicializar la instancia.
La copia del código es la siguiente:
var appView = backbone.view.extend ({
inicializar: function () {
this.render ();
},
render: function () {
$ ('Main'). Append ('<h1> Título del primer nivel </h1>');
}
});
var appView = new AppView ();
Después de que el código anterior define el método de inicialización, elimina el paso de llamar manualmente appView.render () después de generar la instancia.
El atributo el atributo $ el
Además de especificar el elemento de la página web vinculada a "ver" directamente en el método de renderizado, también puede especificar el elemento de la página web utilizando el atributo EL de la vista.
La copia del código es la siguiente:
var appView = backbone.view.extend ({
El: $ ('principal'),
render: function () {
this. $ el.append ('<h1> título de primer nivel </h1>');
}
});
El código anterior vincula directamente los elementos de la página web con el método Render, y el efecto es exactamente el mismo. En el código anterior, además del atributo EL, también es el atributo $ El. El primero representa el elemento DOM especificado, y el segundo representa el objeto jQuery correspondiente al elemento DOM.
atributo de nombre de etiqueta, atributo classname
Si no se especifica el atributo EL, también se puede especificar a través del atributo TagName y el atributo ClassName.
La copia del código es la siguiente:
Var document = backbone.view.extend ({
TagName: "Li",
ClassName: "Documento",
render: function () {
// ...
}
});
Método de plantilla
La propiedad de plantilla de la vista se utiliza para especificar la plantilla de la página web.
La copia del código es la siguiente:
var appView = backbone.view.extend ({
plantilla: _.template ("<h3> hola < %= who %> <h3>"),
});
En el código anterior, la función de plantilla de la biblioteca de funciones subrayadas acepta una cadena de plantilla como parámetro y devuelve la función de plantilla correspondiente. Con esta función de plantilla, siempre que se proporcione el valor específico, se puede generar el código de la página web.
La copia del código es la siguiente:
var appView = backbone.view.extend ({
El: $ ('#contenedor'),
plantilla: _.template ("<h3> hola < %= who %> <h3>"),
inicializar: function () {
this.render ();
},
render: function () {
this. $ el.html (this.template ({Who: 'World!'}));
}
});
El renderizado del código anterior llama al método de plantilla para generar un código de página web específico.
En aplicaciones prácticas, las plantillas generalmente se colocan en etiquetas de script. Para evitar que los navegadores se analicen de acuerdo con el código JavaScript, el atributo de tipo se establece en texto/plantilla.
La copia del código es la siguiente:
<script type = "text/platplate" data-name = "TemplateName">
<!-Contenido de plantilla Vaya aquí->
</script>
Puede usar el siguiente código para compilar la plantilla.
La copia del código es la siguiente:
Window.templates = {};
var $ fuentes = $ ('script [type = "text/plantplate"]');
$ Sources.each (function (index, el) {
var $ el = $ (el);
plantillas [$ el.data ('name')] = _.template ($ el.html ());
});
Atributo de eventos
El atributo de eventos se utiliza para especificar el evento de la vista y sus funciones de manejo correspondientes.
La copia del código es la siguiente:
Var document = backbone.view.extend ({
Eventos: {
"Haga clic en .icon": "Abrir",
"Haga clic en .Button.Edit": "OpenEditDialog",
"Haga clic en .Button.Delete": "destruir"
}
});
Uno de los códigos anteriores especifica el evento de clic de tres selectores CSS y sus tres funciones de manejo correspondientes.
Método Listento
El método Listento se utiliza para especificar una función de devolución de llamada para un evento específico.
La copia del código es la siguiente:
Var document = backbone.view.extend ({
inicializar: function () {
this.listento (this.model, "cambio", this.render);
}
});
El código anterior es el evento de cambio del modelo, y la función de devolución de llamada se especifica como render.
Eliminar método
El método eliminar se utiliza para eliminar una vista.
La copia del código es la siguiente:
updateView: function () {
ver.remove ();
ver.render ();
};
Subvisión
La vista del niño se puede llamar a la vista de los padres. La siguiente es una forma de escribir.
La copia del código es la siguiente:
render: function () {
this. $ el.html (this.template ());
this.child = new Child ();
this.child.appendto ($. ('. Container-placeholder'). render ();
}
Backbone.router
El enrutador es un objeto de enrutamiento proporcionado por Backbone, que se utiliza para corresponder a la URL solicitada por el usuario con la función de procesamiento de backend uno por uno.
Primero, se define una nueva clase de enrutador.
La copia del código es la siguiente:
Router = backbone.router.extend ({
rutas: {
}
});
atributo de rutas
Lo más importante en el objeto Backbone.Router es la propiedad de rutas. Se utiliza para establecer el método de procesamiento de ruta.
El atributo de rutas es un objeto, y cada miembro representa una regla de procesamiento de ruta. El nombre clave es la regla de ruta y el valor clave es el método de procesamiento.
Si el nombre clave es una cadena vacía, representa la ruta de la raíz.
La copia del código es la siguiente:
rutas: {
'': 'PhonesIndex',
},
PhonesIndex: functer () {
New PhonesIndexView ({el: 'Sección#Main'});
}
Un asterisco representa cualquier ruta, y puede establecer los parámetros de ruta para capturar los valores de ruta específicos.
La copia del código es la siguiente:
var aprobador = backbone.router.extend ({
rutas: {
"*Acciones": "DeFaultrutee"
}
});
var app_router = new Approuter;
app_router.on ('ruta: defaultrutee', function (acciones) {
console.log (acciones);
})
En el código anterior, se capturarán los parámetros detrás de la ruta de la raíz y se pasará la función de devolución de llamada.
Cómo escribir reglas de ruta.
La copia del código es la siguiente:
var myrouter = backbone.router.extend ({
rutas: {
"Ayuda": "Ayuda",
"Search/: consulta": "búsqueda"
},
ayuda: function () {
...
},
Search: function (consulta) {
...
}
});
rutas: {
"Ayuda/: Página": "Ayuda",
"Descargar/*ruta": "Descargar",
"Carpeta/: nombre": "OpenFolder",
"Carpeta/: Nombre-: Modo": "OpenFolder"
}
router.on ("ruta: ayuda", función (página) {
...
});
Backbone.history
Después de configurar el enrutador, puede iniciar la aplicación. El objeto Backbone.history se usa para monitorear los cambios en las URL.
La copia del código es la siguiente:
App = new Router ();
$ (documento) .Ready (function () {
Backbone.history.start ({pushState: true});
});
Abra el método PushState. Si la aplicación no está en el directorio raíz, debe especificar el directorio raíz.
La copia del código es la siguiente:
Backbone.history.start ({pushState: true, root: "/public/search/"})
Backbone.modelo
El modelo representa una entidad de objeto único.
La copia del código es la siguiente:
VAR user = backbone.model.extend ({
Valores predeterminados: {
nombre: '',
correo electrónico: ''
}
});
VAR user = new User ();
El código anterior utiliza el método Extend para generar una clase de usuario, que representa la plantilla del modelo. Luego, use el nuevo comando para generar una instancia del modelo. El atributo predeterminado se usa para establecer el atributo predeterminado. El código anterior indica que el objeto de usuario tiene dos atributos nombre y correo electrónico de forma predeterminada, y sus valores son iguales a una cadena vacía.
Al generar una instancia, puede proporcionar valores específicos para cada atributo.
La copia del código es la siguiente:
user de var = nuevo usuario ({
ID: 1,
Nombre: 'Nombre',
Correo electrónico: '[email protected]'
});
El código anterior proporciona los valores específicos de cada atributo al generar una instancia.
atributo idattribute
Las instancias del modelo deben tener una propiedad que sirva como la clave principal para distinguir otras instancias. El nombre de este atributo se establece mediante el atributo Idattribute, y generalmente se establece en ID.
La copia del código es la siguiente:
var music = backbone.model.extend ({
Idattribute: 'ID'
});
Obtener método
El método GET se utiliza para devolver el valor de una determinada propiedad de la instancia del modelo.
La copia del código es la siguiente:
VAR user = new User ({nombre: "Nombre", Age: 24});
var age = user.get ("edad"); // 24
var name = user.get ("nombre"); // "nombre"
Método establecido
El método establecido se utiliza para establecer el valor de una determinada propiedad de la instancia del modelo.
La copia del código es la siguiente:
VAR user = backbone.model.extend ({
comprar: function (newcarsName) {
this.set ({car: newcarsName});
}
});
Var user = new User ({nombre: 'BMW', Modelo: 'i8', type: 'car'});
user.buy ('Porsche');
var car = user.get ("coche"); // 'Porsche'
en el método
El método ON se usa para escuchar los cambios en los objetos.
La copia del código es la siguiente:
var user = new User ({nombre: 'BMW', Modelo: 'i8'});
user.on ("Change: Name", function (modelo) {
var name = model.get ("nombre"); // "Porsche"
console.log ("cambió el nombre de mi auto a" + nombre);
});
user.set ({nombre: 'Porsche'});
// cambió el nombre de mi coche a Porsche
El método ON en el código anterior se usa para escuchar eventos, y "cambiar: nombre" significa que el atributo de nombre ha cambiado.
Atributos de Urlroot
Esta propiedad se utiliza para especificar la ruta para operar en el modelo en el lado del servidor.
La copia del código es la siguiente:
VAR user = backbone.model.extend ({
Urlroot: '/usuario'
});
El código anterior especifica que la ruta al servidor correspondiente al modelo es /usuario.
Evento de búsqueda
El evento de búsqueda se utiliza para obtener el modelo del servidor.
La copia del código es la siguiente:
Var user = new User ({id: 1});
user.fetch ({
éxito: function (usuario) {
console.log (user.tojson ());
}
})
En el código anterior, la instancia del usuario contiene el atributo de identificación (el valor es 1). El método Fetch utiliza el verbo HTTP para emitir una solicitud a la URL "/usuario/1" y recupera la instancia del servidor.
Método de guardado
El método Guardar se utiliza para notificar al servidor para crear o actualizar el modelo.
Si una instancia de modelo no contiene un atributo de ID, el método Guardar creará la instancia utilizando el método POST.
La copia del código es la siguiente:
VAR user = backbone.model.extend ({
Urlroot: '/usuario'
});
VAR user = new User ();
VAR userDetails = {
Nombre: 'Nombre',
Correo electrónico: '[email protected]'
};
user.save (UserDetails, {
éxito: function (usuario) {
console.log (user.tojson ());
}
})
El código anterior primero especifica que la URL correspondiente del modelo es /usuario en la clase, luego crea una nueva instancia y finalmente llame al método Guardar. Tiene dos parámetros. El primero es el atributo específico del objeto de instancia, y el segundo es un objeto de función de devolución de llamada, que establece la función de devolución de llamada para el evento de éxito (guarde con éxito). Específicamente, el método Guardar emitirá una solicitud de publicación a /usuario y proporcionará {nombre: 'Nombre', correo electrónico: '[email protected]'} como datos.
Si una instancia de modelo contiene un atributo de ID, el método Guardar actualizará la instancia utilizando el método PUT.
La copia del código es la siguiente:
user de var = nuevo usuario ({
ID: 1,
Nombre: 'Zhang San',
Correo electrónico: '[email protected]'
});
user.save ({nombre: 'li si'}, {
éxito: función (modelo) {
console.log (user.tojson ());
}
});
En el código anterior, la instancia de objeto contiene un atributo de identificación (el valor es 1), SAVE utilizará el método Put para hacer una solicitud a la URL "/Usuario/1" para actualizar la instancia.
Método de destrucción
El método Destroy se utiliza para eliminar la instancia en el servidor.
La copia del código es la siguiente:
user de var = nuevo usuario ({
ID: 1,
Nombre: 'Nombre',
Correo electrónico: '[email protected]'
});
user.destroy ({
éxito: function () {
console.log ('destruido');
}
});
El método Destroy en el código anterior utilizará el verbo HTTP Eliminar para emitir una solicitud a la URL "/usuario/1" y eliminar la instancia del modelo correspondiente.
Backbone.Collection
La colección es una colección del mismo tipo de modelos. Por ejemplo, el modelo es un animal, la colección es un zoológico; El modelo es una sola persona, la colección es una empresa.
La copia del código es la siguiente:
var song = backbone.model.extend ({});
var álbum = backbone.collection.extend ({
Modelo: canción
});
En el código anterior, la canción es modelo, el álbum es colección y el álbum tiene un atributo modelo igual a la canción, por lo que significa que el álbum es una colección de canciones.
Agregar método, eliminar el método
La instancia del modelo se puede colocar directamente en la instancia de la colección o agregar utilizando el método Agregar.
La copia del código es la siguiente:
var Song1 = nueva canción ({id: 1, nombre: "Song Title 1", Artista: "Zhang San"});
var Song2 = New Music ({id: 2, nombre: "Song Title 2", Artista: "Li Si"});
var myalbum = nuevo álbum ([Song1, Song2]);
var Song3 = nueva música ({id: 3, nombre: "Título de la canción 3", Artista: "Zhao Wu"});
myalbum.add (Song3);
El método RETIME se utiliza para eliminar una instancia de modelo de la instancia de colección.
La copia del código es la siguiente:
myalbum.remove (1);
El código anterior muestra que el parámetro del método eliminar es el atributo de identificación de la instancia del modelo.
Obtener método establecido método
El método GET se utiliza para obtener la instancia del modelo de la ID especificada de la colección.
La copia del código es la siguiente:
myalbum.get (2))
Método de búsqueda
El método de búsqueda se utiliza para obtener datos de recopilación del servidor.
La copia del código es la siguiente:
var canciones = new Backbone.Collection;
Songs.Url = '/Songs';
Songs.fetch ();
Backbone.EVENTES
La copia del código es la siguiente:
var obj = {};
_.extend (obj, backbone.events);
obj.on ("show-message", function (msg) {
$ ('#display'). Text (msg);
});
obj.rigger ("show-message", "hola mundo");