Explication détaillée des compétences du framework Javascript MVC Backbone.js_javascript

À mesure que les programmes JavaScript deviennent de plus en plus complexes, ils nécessitent souvent une équipe pour collaborer et se développer. À cette époque, les spécifications de modularisation et d'organisation du code deviennent extrêmement importantes. Le modèle MVC est le modèle classique d’organisation du code.

(…Introduction à MVC.)

（1）Modèle

Le modèle représente la couche de données, qui est la source de données requise par le programme, généralement exprimée au format JSON.

（2）Voir

View représente la couche de présentation, qui est l'interface utilisateur pour les pages Web, c'est le code HTML de la page Web que l'utilisateur voit.

(3)Contrôleur

Le contrôleur représente la couche de contrôle, qui est utilisée pour traiter les données d'origine (modèle) et les transmettre à la vue.

La programmation Web étant différente de la programmation client, basée sur MVC, la communauté JavaScript a produit diverses variantes de frameworks MVP (Model-View-Presenter), MVVM (Model-View-ViewModel), etc. Certaines personnes ont toutes les différentes les modes de ce type de framework sont collectivement appelés MV*.

L'avantage du framework est qu'il organise le code raisonnablement, facilite le travail d'équipe et la maintenance future, mais l'inconvénient est qu'il a un certain coût d'apprentissage et vous limite à sa méthode d'écriture.

Chargement de la colonne vertébrale

Copier le code Le code est le suivant :

Backbone.View

Utilisation de base

La méthode Backbone.View est utilisée pour définir la classe de vue.

Copier le code Le code est le suivant :

var AppView = Backbone.View.extend({
rendu : fonction(){
$('main').append('

Titre de premier niveau

');
>
});

Le code ci-dessus définit une classe de vue AppView via la méthode extend de Backbone.View. Il existe une méthode de rendu à l'intérieur de cette classe qui est utilisée pour placer la vue sur la page Web.

Lors de son utilisation, vous devez d'abord créer une nouvelle instance de la classe view, puis appeler la méthode render via l'instance pour afficher la vue sur la page Web.

Copier le code Le code est le suivant :

var appView = new AppView();
appView.render();

Le code ci-dessus crée une nouvelle instance appView de la classe de vue AppView, puis appelle appView.render, et le contenu spécifié sera affiché sur la page Web.

Lors de la création d'une nouvelle instance de vue, vous devez généralement spécifier un modèle.

Copier le code Le code est le suivant :

var document = nouveau document ({
Modèle : doc
});

méthode d'initialisation

Les vues peuvent également définir une méthode d'initialisation. Lorsqu'une instance est générée, cette méthode sera automatiquement appelée pour initialiser l'instance.

Copier le code Le code est le suivant :

var AppView = Backbone.View.extend({
initialiser : fonction(){
This.render();
},
rendu : fonction(){
$('main').append('

Titre de premier niveau

');
>
});
var appView = new AppView();

Une fois la méthode initialize définie dans le code ci-dessus, l'étape d'appel manuel de appView.render() après la génération de l'instance est omise.

attribut el, attribut $el

En plus de spécifier l'élément de page Web lié à la "vue" directement dans la méthode de rendu, vous pouvez également spécifier l'élément de page Web en utilisant l'attribut el de la vue.

Copier le code Le code est le suivant :

var AppView = Backbone.View.extend({
el : $('principal'),
rendu : fonction(){
This.$el.append('

Titre de premier niveau

');
>
});

Le code ci-dessus lie directement les éléments de la page Web à la méthode de rendu, et l'effet est exactement le même. Dans le code ci-dessus, en plus de l'attribut el, il existe également l'attribut $el. Le premier représente l'élément DOM spécifié et le second représente l'objet jQuery correspondant à l'élément DOM.

attribut tagName, attribut className

Si l'attribut el n'est pas spécifié, il peut également être spécifié via l'attribut tagName et l'attribut className.

Copier le code Le code est le suivant :

var Document = Backbone.View.extend({
Nom de la balise : "li",
nom de classe : "document",
rendu : fonction() {
// ...
>
});

méthode modèle

L'attribut template de la vue est utilisé pour spécifier le modèle de page Web.

Copier le code Le code est le suivant :

var AppView = Backbone.View.extend({
Modèle : _.template("

Bonjour <%= who %>

"),
});

Dans le code ci-dessus, la fonction modèle de la bibliothèque de fonctions de soulignement accepte une chaîne de modèle comme paramètre et renvoie la fonction modèle correspondante. Avec cette fonction de modèle, le code d'une page Web peut être généré à condition que des valeurs spécifiques soient fournies.

Copier le code Le code est le suivant :

var AppView = Backbone.View.extend({
      el : $('#container'),
Modèle : _.template("

Bonjour <%= who %>

"),
initialiser : fonction(){
This.render();
},
       rendu : fonction(){
This.$el.html(this.template({who: 'world!'}));
>
});

Le rendu du code ci-dessus appelle la méthode modèle pour générer un code de page Web spécifique.

Dans les applications réelles, le modèle est généralement placé dans la balise script Afin d'empêcher le navigateur d'analyser selon le code JavaScript, l'attribut type est défini sur text/template.

Copier le code Le code est le suivant :

Le modèle peut être compilé à l'aide du code ci-dessous.

Copier le code Le code est le suivant :

window.templates = {};
var $sources = $('script[type="text/template"]');
$sources.each(function(index, el) {
var $el = $(el);
Modèles[$el.data('name')] = _.template($el.html());
});

attribut événements

L'attribut events est utilisé pour spécifier les événements de la vue et leurs fonctions de traitement correspondantes.

Copier le code Le code est le suivant :

var Document = Backbone.View.extend({
événements : {
"cliquez sur .icon": "ouvrir",
"cliquez sur .button.edit": "openEditDialog",
"cliquez sur .button.delete": "détruire"
>
});

Dans le code ci-dessus, un événement click spécifie trois sélecteurs CSS et leurs trois gestionnaires correspondants.

méthode d'écoute

La méthode Listento est utilisée pour spécifier une fonction de rappel pour un événement spécifique.

Copier le code Le code est le suivant :

var Document = Backbone.View.extend({
initialiser : fonction() {
This.listenTo(this.model, "change", this.render);
>
});

Le code ci-dessus est l'événement de changement du modèle et la fonction de rappel est spécifiée comme render.

méthode de suppression

La méthode Remove est utilisée pour supprimer une vue.

Copier le code Le code est le suivant :

updateView : fonction() {
view.remove();
view.render();
};

Sous-vue

Les sous-vues peuvent être appelées dans les vues parentes. Voici une façon de l’écrire.

Copier le code Le code est le suivant :

rendu : fonction (){
Ceci.$el.html(this.template());
This.child = new Child();
This.child.appendTo($.('.container-placeholder').render();
>

Backbone.Router

Le routeur est un objet de routage fourni par Backbone, qui est utilisé pour la correspondance biunivoque entre l'URL demandée par l'utilisateur et la fonction de traitement back-end.

Tout d’abord, définissez une nouvelle classe Router.

Copier le code Le code est le suivant :

Routeur = Backbone.Router.extend({
Itinéraires : {
>
});

attribut routes

Dans l'objet Backbone.Router, la chose la plus importante est l'attribut routes. Il est utilisé pour définir la méthode de traitement du chemin.

L'attribut routes est un objet, et chaque membre de celui-ci représente une règle de traitement de chemin. Le nom de la clé est la règle de chemin et la valeur de la clé est la méthode de traitement.

Si le nom de la clé est une chaîne vide, il représente le chemin racine.

Copier le code Le code est le suivant :

itinéraires : {
          '' : 'téléphonesIndex',
},
phonesIndex : fonction () {
nouveau PhonesIndexView({ el: 'section#main' });
>

L'astérisque représente n'importe quel chemin et les paramètres de chemin peuvent être définis pour capturer des valeurs de chemin spécifiques.

Copier le code Le code est le suivant :

var AppRouter = Backbone.Router.extend({
Itinéraires : {
"*actions": "route par défaut"
>
});
var app_router = nouvel AppRouter;
app_router.on('route:defaultRoute', function(actions) {
console.log(actions);
})

Dans le code ci-dessus, les paramètres après le chemin racine seront capturés et transmis à la fonction de rappel.

Comment écrire des règles de chemin.

Copier le code Le code est le suivant :

var monrouter = Backbone.Router.extend({
itinéraires : {
"help": "aide", "aide",
"search/:query": "recherche"
},
aide : fonction() {
...
},
recherche : fonction (requête) {
...
>
});
itinéraires : {
"help/:page": "aide",
"download/*chemin": "télécharger",
"folder/:name": "openFolder",
"folder/:name-:mode": "openFolder"
>
router.on("route:help", function(page) {
...
});

Backbone.histoire

Après avoir configuré le routeur, vous pouvez démarrer l'application. L'objet Backbone.history est utilisé pour surveiller les modifications d'URL.

Copier le code Le code est le suivant :

App = nouveau routeur ();
$(document).ready(function () {
Backbone.history.start({ pushState: true });
});

Ouvrez la méthode pushState. Si l'application ne se trouve pas dans le répertoire racine, vous devez spécifier le répertoire racine.

Copier le code Le code est le suivant :

Backbone.history.start({pushState : true, root : "/public/search/"})
Backbone.Modèle

Le modèle représente une entité objet unique.

Copier le code Le code est le suivant :

var Utilisateur = Backbone.Model.extend({
           valeurs par défaut : {
nom : '',
Courriel : ''
>
});
var utilisateur = nouvel utilisateur ();

Le code ci-dessus utilise la méthode extend pour générer une classe User, qui représente le modèle du modèle. Ensuite, utilisez la nouvelle commande pour générer une instance de Model. L'attribut defaults est utilisé pour définir les attributs par défaut. Le code ci-dessus indique que l'objet utilisateur a deux attributs, name et email, par défaut, et que leurs valeurs sont égales à des chaînes vides.

Lors de la génération d'une instance, vous pouvez fournir des valeurs spécifiques pour chaque attribut.

Copier le code Le code est le suivant :

var utilisateur = nouvel utilisateur ({
identifiant : 1,
nom : 'nom',
E-mail : 'nom@email.com'
});

Le code ci-dessus fournit les valeurs spécifiques de chaque attribut lors de la génération d'une instance.

Attribut idAttribute

Les instances de modèle doivent avoir un attribut qui sert de clé primaire pour distinguer les autres instances. Le nom de cet attribut est défini par l'attribut idAttribute, généralement défini sur id.

Copier le code Le code est le suivant :

var Musique = Backbone.Model.extend({
idAttribut : 'id'
});

méthode obtenir

La méthode get est utilisée pour renvoyer la valeur d'un certain attribut de l'instance Model.

Copier le code Le code est le suivant :

var utilisateur = nouvel utilisateur ({ nom : "nom", âge : 24});
var âge = user.get("âge"); // 24
var nom = user.get("nom"); // "nom"

définir la méthode

La méthode set est utilisée pour définir la valeur d'un certain attribut de l'instance Model.

Copier le code Le code est le suivant :

var Utilisateur = Backbone.Model.extend({
Acheter : function(newCarsName){
This.set({car: newCarsName });
>
});
var user = nouvel utilisateur ({nom : 'BMW', modèle : 'i8', type : 'car'});
user.buy('Porsche');
var car = user.get("voiture"); // 'Porsche'

sur la méthode

La méthode on est utilisée pour surveiller les modifications des objets.

Copier le code Le code est le suivant :

var user = nouvel utilisateur ({nom : 'BMW', modèle : 'i8'});
user.on("change:name", function(model){
var nom = model.get("nom"); // "Porsche"
console.log("J'ai changé le nom de ma voiture en " name);
});
user.set({nom : 'Porsche'});
// J'ai changé le nom de ma voiture en Porsche

La méthode on dans le code ci-dessus est utilisée pour écouter les événements. "change:name" indique que l'attribut name a changé.

attribut urlroot

Cet attribut est utilisé pour spécifier le chemin pour faire fonctionner le modèle côté serveur.

Copier le code Le code est le suivant :

var Utilisateur = Backbone.Model.extend({
urlRoot : '/user'
});

Le code ci-dessus précise que le chemin du serveur correspondant au Modèle est /user.

récupérer l'événement

L'événement fetch est utilisé pour récupérer le modèle depuis le serveur.

Copier le code Le code est le suivant :

var utilisateur = nouvel utilisateur ({id : 1});
utilisateur.fetch({
Succès : fonction (utilisateur){
console.log(user.toJSON());
>
})

Dans le code ci-dessus, l'instance d'utilisateur contient l'attribut id (la valeur est 1) et la méthode fetch utilise le verbe HTTP GET pour envoyer une requête à l'URL "/user/1" afin de récupérer l'instance du serveur.

méthode de sauvegarde

La méthode de sauvegarde est utilisée pour notifier au serveur de créer ou de mettre à jour un modèle.

Si une instance Model ne contient pas d'attribut id, la méthode save utilisera la méthode POST pour créer une nouvelle instance.

Copier le code Le code est le suivant :

var Utilisateur = Backbone.Model.extend({
urlRoot : '/user'
});
var utilisateur = nouvel utilisateur ();
var userDetails = {
nom : 'nom',
E-mail : 'nom@email.com'
};
user.save (userDetails, {
Succès : fonction (utilisateur) {
console.log(user.toJSON());
>
})

Le code ci-dessus précise d'abord que l'URL correspondant au modèle est /user dans la classe, puis crée une nouvelle instance et appelle enfin la méthode save. Il a deux paramètres, le premier est l'attribut spécifique de l'objet d'instance et le deuxième paramètre est un objet de fonction de rappel qui définit la fonction de rappel pour l'événement de réussite (enregistrement réussi). Plus précisément, la méthode de sauvegarde effectuera une requête POST à ​​/user et fournira {name : 'name', email : 'name@email.com'} comme données.

Si une instance de modèle contient un attribut id, la méthode de sauvegarde utilisera la méthode PUT pour mettre à jour l'instance.

Copier le code Le code est le suivant :

var utilisateur = nouvel utilisateur ({
identifiant : 1,
Nom : '张三',
E-mail : 'nom@email.com'
});
user.save({name : '李思'}, {
Succès : fonction (modèle) {
console.log(user.toJSON());
>
});

Dans le code ci-dessus, l'instance d'objet contient l'attribut id (la valeur est 1) et save utilisera la méthode PUT pour faire une requête à l'URL "/user/1" pour mettre à jour l'instance.

méthode de destruction

La méthode destroy est utilisée pour supprimer l'instance sur le serveur.

Copier le code Le code est le suivant :

var utilisateur = nouvel utilisateur ({
identifiant : 1,
nom : 'nom',
E-mail : 'nom@email.com'
});
utilisateur.destroy({
Succès : fonction () {
console.log('Détruit');
>
});

La méthode de destruction du code ci-dessus utilisera le verbe HTTP DELETE pour faire une requête à l'URL "/user/1" afin de supprimer l'instance de modèle correspondante.

Backbone.Collection

Collection est une collection de modèles du même type. Par exemple, Model est un animal, et Collection est un zoo ;

Copier le code Le code est le suivant :

var Chanson = Backbone.Model.extend({});
var Album = Backbone.Collection.extend({
Modèle : Chanson
});

Dans le code ci-dessus, Song est un modèle, Album est une collection et Album a un attribut de modèle égal à Song, ce qui indique que Album est une collection de chansons.

ajouter une méthode, supprimer une méthode

Les instances de modèle peuvent être directement placées dans des instances de collection ou ajoutées à l'aide de la méthode add.

Copier le code Le code est le suivant :

var song1 = new Song({ id : 1 ,name : "歌名1", artiste : "张三" });
var song2 = nouvelle musique ({id : 2,name : "歌名2", artiste : "李思" });
var monAlbum = nouvel Album([chanson1, chanson2]);
var song3 = new Music({ id : 3, nom : " Nom de la chanson 3", artiste : "Zhao Wu" });
monAlbum.add(chanson3);

La méthode Remove est utilisée pour supprimer une instance de modèle d'une instance de collection.

Copier le code Le code est le suivant :

monAlbum.remove(1);

Le code ci-dessus montre que le paramètre de la méthode Remove est l'attribut id de l'instance de modèle.

obtenir la méthode, définir la méthode

La méthode get est utilisée pour obtenir l'instance de modèle avec l'identifiant spécifié à partir de la collection.

Copier le code Le code est le suivant :

monAlbum.get(2))

méthode de récupération

La méthode fetch est utilisée pour récupérer les données de collection du serveur.

Copier le code Le code est le suivant :

var chansons = new Backbone.Collection;
chansons.url = '/chansons';
chansons.fetch();

Backbone.events

Copier le code Le code est le suivant :

var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display').text(msg);
});
obj.trigger("show-message", "Hello World");