À mesure que les programmes JavaScript deviennent de plus en plus complexes, ils ont souvent besoin d'une équipe pour se développer en collaboration, et la modularisation du code et des spécifications organisationnelles devient extrêmement importante. Le modèle MVC est un modèle classique d'organisation du code.
(… Introduction à MVC.)
(1) modèle
Le modèle représente la couche de données, c'est-à-dire la source de données requise par le programme, et est généralement représentée au format JSON.
(2) Voir
La vue représente la couche de présentation, qui est l'interface utilisateur. Pour les pages Web, il s'agit du code HTML de la page Web vue par les utilisateurs.
(3) contrôleur
Le contrôleur représente la couche de contrôle, utilisée pour traiter les données d'origine (modèle) et la transférer dans la vue.
Étant donné que la programmation Web est différente de la programmation des clients, basée sur MVC, la communauté JavaScript a produit divers frameworks variants MVP (Model-View-Presenter), MVVM (modèle-View-ViewModel), etc. Certaines personnes appellent collectivement tous les divers modes de ce type de cadre MV *.
L'avantage d'un cadre est qu'il organise raisonnablement le code, facilite le travail d'équipe et la maintenance future, et l'inconvénient est qu'il a un certain coût d'apprentissage et vous limite à l'écrire.
Chargement de la colonne vertébrale
La copie de code est la suivante:
<script src = "/ javascripts / lib / jquery.js"> </ script>
<script src = "/ javascripts / lib / calendrier.js"> </ script>
<script src = "/ javascripts / lib / dackbone.js"> </ script>
<script src = "/ javascripts / jst.js"> </ script>
<script src = "/ javascripts / router.js"> </ script>
<script src = "/ javascripts / init.js"> </ script>
Backbone.View
Utilisation de base
La méthode Backbone.View est utilisée pour définir une classe de vue.
La copie de code est la suivante:
var appView = dackbone.view.extend ({{
rendu: fonction () {
$ ('main'). APPEND ('<h1> Titre de premier niveau </H1>');
}
});
Le code ci-dessus définit une classe Afficher AppView via la méthode Extension de Backbone.View. Il existe une méthode de rendu à l'intérieur de cette classe pour placer la vue sur la page Web.
Lorsque vous l'utilisez, vous devez créer une nouvelle instance de la classe View, puis appeler la méthode de rendu via l'instance, afin que la vue puisse être affichée sur la page Web.
La copie de code est la suivante:
var appView = new AppView ();
appView.Render ();
Le code ci-dessus crée une nouvelle instance AppView de la classe Afficher AppView, puis appelez 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.
La copie de code est la suivante:
var document = nouveau document ({
modèle: doc
});
Initialiser la méthode
La vue peut également définir la méthode d'initialisation. Lors de la génération d'une instance, la méthode sera automatiquement appelée pour initialiser l'instance.
La copie de code est la suivante:
var appView = dackbone.view.extend ({{
initialiser: function () {
this.render ();
},
rendu: fonction () {
$ ('main'). APPEND ('<h1> Titre de premier niveau </H1>');
}
});
var appView = new AppView ();
Une fois que le code ci-dessus définit la méthode Initialize, il élimine l'étape d'appel manuellement appView.Render () après avoir généré l'instance.
attribut el, attribut $ el
En plus de spécifier l'élément de page Web lié à "Afficher" directement dans la méthode de rendu, vous pouvez également spécifier l'élément de page Web à l'aide de l'attribut EL de la vue.
La copie de code est la suivante:
var appView = dackbone.view.extend ({{
el: $ ('main'),
rendu: fonction () {
this. $ el.append ('<h1> titre de premier niveau </h1>');
}
});
Le code ci-dessus lie directement les éléments de la page Web avec 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 s'agit également de 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.
La copie de code est la suivante:
var document = dackbone.view.extend ({{
Tagname: "li",
ClassName: "Document",
rendu: fonction () {
// ...
}
});
Méthode du modèle
La propriété du modèle de la vue est utilisée pour spécifier le modèle de page Web.
La copie de code est la suivante:
var appView = dackbone.view.extend ({{
modèle: _.emplate ("<h3> bonjour <% = who%> <h3>"),
});
Dans le code ci-dessus, la fonction de modèle de la bibliothèque de fonctions de trait de soulignement accepte une chaîne de modèle comme un paramètre et renvoie la fonction de modèle correspondante. Avec cette fonction de modèle, tant que la valeur spécifique est fournie, le code de page Web peut être généré.
La copie de code est la suivante:
var appView = dackbone.view.extend ({{
el: $ ('# conteneur'),
modèle: _.emplate ("<h3> bonjour <% = who%> <h3>"),
initialiser: function () {
this.render ();
},
rendu: fonction () {
this. $ el.html (this.template ({who: 'world!'}));
}
});
Le rendu du code ci-dessus appelle la méthode du modèle pour générer un code de page Web spécifique.
Dans les applications pratiques, les modèles sont généralement placés dans des balises de script. Afin d'empêcher les navigateurs d'analyser en fonction du code JavaScript, l'attribut de type est défini sur le texte / modèle.
La copie de code est la suivante:
<script type = "text / modèle" data-name = "templatename">
<! - Les contenus du modèle vont ici ->
</cript>
Vous pouvez utiliser le code suivant pour compiler le modèle.
La copie de code est la suivante:
window.Templates = {};
var $ sources = $ ('script [type = "text / modèle"]');
$ sources.each (fonction (index, el) {
var $ el = $ (el);
modèles [$ el.data ('name')] = _.Template ($ el.html ());
});
Attribut d'événements
L'attribut d'événements est utilisé pour spécifier l'événement de la vue et ses fonctions de traitement correspondantes.
La copie de code est la suivante:
var document = dackbone.view.extend ({{
Événements: {
"Cliquez sur .icon": "Ouvrir",
"Cliquez.
"Cliquez sur .button.delete": "Détruiser"
}
});
L'un des code ci-dessus spécifie l'événement de clic de trois sélecteurs CSS et ses trois fonctions de traitement correspondantes.
Méthode Listento
La méthode Listento est utilisée pour spécifier une fonction de rappel pour un événement spécifique.
La copie de code est la suivante:
var document = dackbone.view.extend ({{
initialiser: function () {
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 rendu.
Supprimer la méthode
La méthode de suppression est utilisée pour supprimer une vue.
La copie de code est la suivante:
updatewiew: function () {
View.Remove ();
View.Render ();
};
Sous-vue
La vue de l'enfant peut être appelée dans la vue parent. Ce qui suit est une façon d'écrire.
La copie de code est la suivante:
rendu: fonction () {
this. $ el.html (this.template ());
this.child = new child ();
this.child.appendto ($. ('. Container-placeholder'). render ();
}
Dorsal.
Le routeur est un objet de routage fourni par Backbone, qui est utilisé pour correspondre à l'URL demandée par l'utilisateur avec la fonction de traitement backend une par une.
Tout d'abord, une nouvelle classe de routeur est définie.
La copie de code est la suivante:
Routeur = squelette.router.extend ({
Routes: {
}
});
Attribut de routes
La chose la plus importante dans l'objet Backbone.Router est la propriété 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 clé est la règle de chemin et la valeur clé est la méthode de traitement.
Si le nom de clé est une chaîne vide, il représente le chemin racine.
La copie de code est la suivante:
Routes: {
'': 'PhonesIndex',
},
PhonesIndex: function () {
nouveau PhonesIndexView ({el: 'section # main'});
}
Un astérisque représente n'importe quel chemin et vous pouvez définir les paramètres de chemin pour capturer les valeurs de chemin spécifiques.
La copie de code est la suivante:
var approuter = dackbone.router.extend ({{
Routes: {
"* Actions": "Defaultroute"
}
});
var app_router = nouvel évaluateur;
app_router.on ('itinéraire: defaultroute', fonction (actions) {
console.log (actions);
})
Dans le code ci-dessus, les paramètres derrière le chemin racine seront capturés et la fonction de rappel sera transmise.
Comment rédiger des règles de chemin.
La copie de code est la suivante:
var myRouter = Backbone.Router.Extend ({
Routes: {
"Aide": "Aide",
"Search /: Query": "Recherche"
},
aide: fonction () {
...
},
Recherche: fonction (requête) {
...
}
});
Routes: {
"Aide /: page": "Aide",
"Télécharger / * Path": "Télécharger",
"Folder /: Name": "OpenFolder",
"Folder /: Name-: Mode": "OpenFolder"
}
router.on ("route: aide", fonction (page) {
...
});
Squelette.
Après avoir configuré le routeur, vous pouvez démarrer l'application. L'objet Backbone.History est utilisé pour surveiller les modifications des URL.
La copie de code est la suivante:
App = new Router ();
$ (document) .ready (function () {
Backbone.History.Start ({pushstate: true});
});
Ouvrez la méthode Pushstate. Si l'application n'est pas dans le répertoire racine, vous devez spécifier le répertoire racine.
La copie de code est la suivante:
Backbone.History.Start ({pushstate: true, root: "/ public / search /"})
Dorsale.Model
Le modèle représente une entité d'objet unique.
La copie de code est la suivante:
var user = dackbone.model.extend ({{
par défaut: {
nom: '',
e-mail: ''
}
});
var user = new User ();
Le code ci-dessus utilise la méthode Extende pour générer une classe utilisateur, qui représente le modèle du modèle. Ensuite, utilisez la nouvelle commande pour générer une instance du modèle. L'attribut par défaut est utilisé pour définir l'attribut par défaut. Le code ci-dessus indique que l'objet utilisateur a deux attributs le nom et le courrier électronique par défaut, et leurs valeurs sont égales à une chaîne vide.
Lors de la génération d'une instance, vous pouvez fournir des valeurs spécifiques pour chaque attribut.
La copie de code est la suivante:
var user = nouvel utilisateur ({
ID: 1,
Nom: «Nom»,
Courriel: '[email protected]'
});
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 du modèle doivent avoir une propriété qui sert de clé principale pour distinguer les autres instances. Le nom de cet attribut est défini par l'attribut idAttribute et est généralement défini sur ID.
La copie de code est la suivante:
var music = dackbone.model.extend ({{
idattribute: 'id'
});
Obtenir la méthode
La méthode GET est utilisée pour renvoyer la valeur d'une certaine propriété de l'instance de modèle.
La copie de code est la suivante:
var user = nouvel utilisateur ({name: "name", âge: 24});
var age = user.get ("Âge"); // 24
var name = user.get ("name"); // "nom"
Définir la méthode
La méthode SET est utilisée pour définir la valeur d'une certaine propriété de l'instance de modèle.
La copie de code est la suivante:
var user = dackbone.model.extend ({{
buy: function (newCarsName) {
this.set ({car: newCarsName});
}
});
var user = new User ({name: 'bmw', modèle: 'i8', type: 'car'});
user.buy ('Porsche');
var car = user.get ("car"); // 'Porsche'
sur la méthode
La méthode ON est utilisée pour écouter les changements dans les objets.
La copie de code est la suivante:
var user = new User ({name: 'bmw', modèle: 'i8'});
user.on ("modifier: nom", fonction (modèle) {
var name = Model.get ("name"); // "Porsche"
console.log ("a changé le nom de ma voiture en" + nom);
});
user.set ({name: 'porsche'});
// a 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, et "Change: Nom" signifie que l'attribut de nom a changé.
Attributs d'urlroot
Cette propriété est utilisée pour spécifier le chemin d'accès à fonctionner sur le modèle du côté serveur.
La copie de code est la suivante:
var user = dackbone.model.extend ({{
urlroot: '/ utilisateur'
});
Le code ci-dessus spécifie que le chemin d'accès au serveur correspondant au modèle est / utilisateur.
Événement Fetch
L'événement Fetch est utilisé pour récupérer le modèle du serveur.
La copie de code est la suivante:
var user = new User ({id: 1});
user.fetch ({
Succès: fonction (utilisateur) {
console.log (user.tojson ());
}
})
Dans le code ci-dessus, l'instance utilisateur contient l'attribut ID (la valeur est 1). La méthode Fetch utilise le verbe HTTP pour émettre une demande à l'URL "/ user / 1" et récupère l'instance du serveur.
Méthode de sauvegarde
La méthode de sauvegarde est utilisée pour informer le serveur pour créer ou mettre à jour le modèle.
Si une instance de modèle ne contient pas d'attribut d'ID, la méthode de sauvegarde créera l'instance à l'aide de la méthode Post.
La copie de code est la suivante:
var user = dackbone.model.extend ({{
urlroot: '/ utilisateur'
});
var user = new User ();
var userDetails = {
Nom: «Nom»,
Courriel: '[email protected]'
};
user.save (userDetails, {
Succès: fonction (utilisateur) {
console.log (user.tojson ());
}
})
Le code ci-dessus spécifie d'abord que l'URL du modèle correspondant est / l'utilisateur dans la classe, puis crée une nouvelle instance et, enfin, appelez la méthode de sauvegarde. Il a deux paramètres. Le premier est l'attribut spécifique de l'objet d'instance, et le second est un objet de fonction de rappel, qui définit la fonction de rappel pour l'événement de réussite (enregistrer avec succès). Plus précisément, la méthode de sauvegarde publiera une demande de message à / utilisateur et fournira {nom: 'name', e-mail: '[email protected]'} comme données.
Si une instance de modèle contient un attribut d'ID, la méthode de sauvegarde mettra à jour l'instance à l'aide de la méthode de put.
La copie de code est la suivante:
var user = nouvel utilisateur ({
ID: 1,
Nom: «Zhang San»,
Courriel: '[email protected]'
});
user.save ({name: 'li si'}, {
Succès: fonction (modèle) {
console.log (user.tojson ());
}
});
Dans le code ci-dessus, l'instance d'objet contient un attribut d'ID (la valeur est 1), Save utilisera la méthode de put pour faire une demande à l'URL "/ user / 1" pour mettre à jour l'instance.
méthode de détruire
La méthode Destroy est utilisée pour supprimer l'instance sur le serveur.
La copie de code est la suivante:
var user = nouvel utilisateur ({
ID: 1,
Nom: «Nom»,
Courriel: '[email protected]'
});
user.destroy ({
Succès: fonction () {
console.log («détruit»);
}
});
La méthode Destroy dans le code ci-dessus utilisera la suppression du verbe HTTP pour publier une demande à l'URL "/ user / 1" et supprimez l'instance de modèle correspondante.
Colonne vertébrale.
La collection est une collection du même type de modèles. Par exemple, le modèle est un animal, la collection est un zoo; Le modèle est une seule personne, la collection est une entreprise.
La copie de code est la suivante:
var Song = Backbone.Model.Extend ({});
var album = saillie.collection.extend ({{
Modèle: Chanson
});
Dans le code ci-dessus, Song Is Model, Album Is Collection, et l'album a un attribut modèle égal à Song, donc cela signifie que l'album est une collection de chansons.
Ajouter la méthode, supprimer la méthode
L'instance de modèle peut être placée directement dans l'instance de collection ou ajoutée à l'aide de la méthode ADD.
La copie de code est la suivante:
var Song1 = new Song ({id: 1, nom: "Song Title 1", artiste: "Zhang San"});
var Song2 = new Music ({id: 2, nom: "Song Title 2", artiste: "Li si"});
var myalbum = nouvel album ([Song1, Song2]);
var Song3 = new Music ({id: 3, nom: "Song Title 3", artiste: "Zhao Wu"});
myalbum.add (Song3);
La méthode de suppression est utilisée pour supprimer une instance de modèle de l'instance de collection.
La copie de code est la suivante:
myalbum.remove (1);
Le code ci-dessus montre que le paramètre de la méthode de suppression est l'attribut ID de l'instance de modèle.
Obtenir la méthode de définition des méthodes
La méthode GET est utilisée pour obtenir l'instance de modèle de l'ID spécifié de la collection.
La copie de code est la suivante:
myalbum.get (2))
méthode de récupération
La méthode Fetch est utilisée pour récupérer les données de collecte du serveur.
La copie de code est la suivante:
var Songs = new Backbone.collection;
Songs.Url = '/ Songs';
Songs.fetch ();
Évente de dorsale
La copie de code est la suivante:
var obj = {};
_.EXTEND (OBJ, Backbone.Events);
obj.on ("show-message", fonction (msg) {
$ ('# affichage'). Texte (msg);
});
obj.trigger ("Show-Message", "Hello World");