Explication détaillée du framework MVC léger frontal CanJS

Choisissez la bonne bibliothèque

Créer une application JS sans bons outils est très difficile. jQuery n'est qu'une bibliothèque pour faire fonctionner le DOM et ne fournit aucune base pour créer des applications. C'est pourquoi nous avons besoin d'une bibliothèque spécialisée comme CanJS.

CanJS est une bibliothèque MVC légère qui vous fournit les outils dont vous avez besoin pour créer une application JS.

CanJS est une bibliothèque MVC légère qui vous fournit les outils dont vous avez besoin pour créer une application JS. Il fournit le cadre de base du modèle MVC (Model-View-Control), la liaison de modèle dynamique, la prise en charge des routes et la sécurité de la mémoire. Il prend également en charge jQuery, Zepto, Mootools, YUI, Dojo et dispose d'une multitude d'extensions et de plug-ins.

Dans la première partie, vous apprendrez :
Créez un calque de contrôle et un calque de vue (modèle d'interface utilisateur) pour afficher les contacts
Utilisez la couche de modèle Modèle pour représenter les données
Utilisez le plug-in luminaires pour simuler les données de retour ajax
Vous devez être excité ! Commençons par coder.
Créez vos dossiers et HTML
Vous créez d'abord un dossier pour votre APP, puis créez 4 sous-dossiers sous le répertoire : css, js, vues et img. Comme suit :
contacts_manager
css
js
vues
img

Enregistrez le code suivant sous index.html :

Copier le code Le code est le suivant :

Gestionnaire de contacts CanJS

En bas de la page vous chargez le JS requis (y compris votre APP : contacts.js).
Les fichiers CSS et image utilisés dans le didacticiel sont disponibles en téléchargement.

Utilisez View pour créer votre interface utilisateur

View est le modèle d'interface utilisateur utilisé pour afficher votre application. CanJS prend en charge plusieurs moteurs de modèles. Cet article utilise EJS, inclut et prend en charge la liaison dynamique.
Les balises des modèles EJS sont très similaires au HTML et prennent en charge l'inclusion du code JS. Les trois balises couramment utilisées sont les suivantes :
. <% CODE %>%20Ex%C3%A9cuter%20JS%0A<%= CODE %>%20Ex%C3%A9cutez%20JS%20et%20%C3%A9crivez%20le%20r%C3%A9sultat%20sans%20%C3%A9chappement%20dans%20le%20code%20HTML%20%C3%A0%20l'emplacement%20actuel%0A<%== CODE %>%20Ex%C3%A9cutez%20JS%20et%20%C3%A9crivez%20le%20r%C3%A9sultat%20%C3%A9chapp%C3%A9%20dans%20le%20code%20HTML%20%C3%A0%20la%20position%20actuelle%20(pour%20les%20sous-mod%C3%A8les).%0ALes%20mod%C3%A8les%20peuvent%20%C3%AAtre%20charg%C3%A9s%20%C3%A0%20partir%20de%20fichiers%20ou%20de%20balises%20de%20script.%20Ce%20didacticiel%20se%20charge%20%C3%A0%20partir%20de%20fichiers%20EJS.%20%0A

%0A

Afficher%20les%20contacts%0A

%0A

Pour%20cr%C3%A9er%20des%20contacts,%20vous%20devez%20d'abord%20cr%C3%A9er%20un%20mod%C3%A8le%20EJS%20et%20enregistrer%20le%20code%20suivant%20sous%20contactsList.ejs%20dans%20votre%20dossier%20de%20vues%C2%A0:%20

%0A

Copier le code Le code est le suivant :

<% liste(contacts, fonction(contact){ %>
 el.data('contact', contact) %>>

          <%== can.view.render('views/contactView.ejs', {

Contact : contact, catégories : catégories

}) %>

<% }) %>

contactLists.ejs affichera une liste de contacts, analysons ce modèle :

Copier le code Le code est le suivant :

<% liste(contacts, fonction(contact){ %>

Si la méthode de rappel de la méthode list() est utilisée avec une liste configurée avec un observateur, une fois les données de la liste modifiées, elle sera appelée à plusieurs reprises en utilisant la liaison dynamique.

Copier le code Le code est le suivant :

el.data('contact', contact) %>>

Le code ci-dessus génère un

avec les données de contact via la méthode de rappel de l'élément. Une fois la méthode après l'exécution de la flèche, les données de l'objet el sont définies sur l'élément correspondant.

Copier le code Le code est le suivant :

<%== can.view.render('views/contactView.ejs', {

contact : contact, catégories : catégories

}) %>

Le code ci-dessus transforme le sous-modèle contactView.ejs en contact. can.view.render() renvoie du HTML avec un modèle et des données comme paramètres.

Rendu d'un seul contact

Les sous-modèles sont un excellent moyen d'organiser les vues en morceaux gérables. Rend également vos modèles simples et faciles à réutiliser. Ce modèle sera utilisé plus tard dans le didacticiel pour créer des contacts. Enregistrez le code suivant sous contactView.ejs dans le dossier des vues :

Copier le code Le code est le suivant :

          <%= contact.attr('nom') ? "value='" contact.name "'" : "class='empty'" %>>
          <%= contact.attr('adresse') ? "value='" contact.address "'" : "class='empty'" %>>
    <étiquette>Téléphone
          <%= contact.attr('téléphone') ? "value='" contact.phone "'" : "class='empty'" %>>
    E-mail
          <%= contact.attr('email') ? "value='" contact.email "'" : "class='empty'" %>>

联系人的属性都放入了标签里，这就可以编辑更新用户的资料。

活化你的Voir（好文艺。。）

EJS 处理模板过程中如果有用到attr() ，它周围的代码将会交由事件处理器管理，监听对应属性的变化，当属性发生变化，APP中关联的UI将会被更新。这Il s'agit d'un système EJS qui est doté d'un système d'attr().性开启。
我们通过 contactView.ejs 中一个标签来了解它的用法：

复制代码代码如下 :

<%= contact.attr('nom') ? "value='" contact.name "'" : "class='empty'" %>>

特殊标记里的代码将转变成事件绑定到此联系人的name属性上。事件将被触发同时HTML结构会被更新。

Can.Control来处理业务逻辑

can.Control 创建了一个可组织，内在无泄漏，全权控制器，能用来创建widget或者处理业务逻辑。你通过所需要数据为一个DOM元素创建一个Control实例，可以在你的Control中定义方法绑定事件。
当 Control 所关联的元素从DOM被删除时，Contol会自去销毁自己，同时清除所绑定的方法。
Le contrôle peut être utilisé pour contrôler can.Control(). 。
每个Contol实例都有几个重要的值和方法规范：
ceci – Contrôle 实例的引用
this.element – 实例中你所创建的DOM 元素
this.options – 创建实例所需要的参数对象
init() – 当实例创建成功时被调用

管理联系人

将以下代码片段添加到contacts.js 文件来创建管理联系人的Control：

复制代码代码如下 :

Contacts = can.Control({

init : fonction(){

This.element.html(can.view('views/contactsList.ejs', {

Contacts : this.options.contacts,

Catégories : this.options.categories

}));

>

})

Lorsqu'une instance de Contacts est créée, init() fait deux choses :
Utilisez can.view() pour afficher le contact. can.view() reçoit deux paramètres : une balise file ou stript contenant un modèle et des données ; il renverra un documentFragment (un conteneur léger qui gère les éléments DOM).
Utilisez jQuery.html() pour insérer le documentFragment de can.view() dans l'élément Control

Utiliser le modèle pour représenter les données

Le modèle est la couche d'abstraction des données APP. Cette APP utilise deux modèles : un correspondant aux contacts et un correspondant aux catégories. Ajoutez le code suivant à contacts.js :

Copier le code Le code est le suivant :

Contact = can.Modèle({

findAll : 'OBTENIR /contacts',

créer : "POST /contacts",

mise à jour : "PUT /contacts/{id}",

détruire : "DELETE /contacts/{id}"

},{});

Catégorie = can.Model({

findAll : 'GET /categories'

},{});

Un modèle dispose de 5 méthodes qui peuvent être définies sur les données CRUD, à savoir findAll, findOne, create, update et destroy. Vous pouvez remplacer ces méthodes, mais le meilleur moyen est d'utiliser les services REST (Representational State Transfer). Comme dans le code ci-dessus, vous pouvez ignorer en toute sécurité les méthodes statiques qui ne seront pas utilisées dans l'APP.

La chose importante à souligner ici est que les instances de modèle sont en fait des « observables » dérivés de CanJS. can.Observe fournit le mode observateur pour les objets. can.Observe.List fournit le mode d'observation pour les tableaux. Cela signifie que vous pouvez obtenir et définir des données via attr() et surveiller les modifications des données en même temps.
La méthode findAll() renvoie un Model.list, qui est l'événement déclenché par can.Observe.List lorsqu'un élément est ajouté ou supprimé.

Utilisez Luminaire pour imiter Rest

Fixture intercepte les requêtes AJAX et simule les réponses via des fichiers ou des méthodes. Ceci est utile pour les tests ou lorsque le backend n'est pas encore prêt. Le luminaire est ce dont le modèle APP a besoin pour simuler REST.
Tout d'abord, vous devez préparer quelques données pour le luminaire et ajouter le code suivant à :

Copier le code Le code est le suivant :

var CONTACTS = [
{
identifiant : 1,
nom : 'Guillaume',
Adresse : '1 Voie CanJS',
E-mail : 'william@husker.com',
Téléphone : '0123456789',
Catégorie : 'collègues'
},
{
identifiant : 2,
nom : 'Laura',
Adresse : '1 Voie CanJS',
E-mail : 'laura@starbuck.com',
Téléphone : '0123456789',
Catégorie : 'amis'
},
{
identifiant : 3,
nom : 'Lee',
Adresse : '1 Voie CanJS',
E-mail : 'lee@apollo.com',
Téléphone : '0123456789',
Catégorie : 'famille'
>
];

var CATÉGORIES = [
{
identifiant : 1,
nom : 'Famille',
Données : 'famille'
},
{
identifiant : 2,
nom : 'Amis',
Données : 'amis'
},
{
identifiant : 3,
nom : 'Collaborateurs',
Données : 'collègues'
>
];

Une fois que vous avez les données, connectez-les à un appareil pour simuler REST. can.fixture() reçoit deux paramètres. L'URL que nous souhaitons intercepter ainsi que le fichier et la méthode que nous utilisons pour répondre. Habituellement, les URL que vous souhaitez intercepter sont dynamiques et suivent un modèle. Ajoutez simplement des caractères génériques entre {} à l'URL.

Ajoutez le code suivant à contacts.js :

Copier le code Le code est le suivant :

can.fixture('GET /contacts', function(){

retourner [CONTACTS];

});

var identifiant = 4;

can.fixture("POST /contacts", function(){

retourner {id : (id)>

});

can.fixture("PUT /contacts/{id}", function(){

retourner {};

});

can.fixture("DELETE /contacts/{id}", function(){

retourner {};

});

can.fixture('GET /categories', function(){

retourner [CATÉGORIES];

});

Les quatre premiers appareils simulent les réponses GET, POST, PUT et DELETE du modèle Contact, et le cinquième appareil simule la réponse GET du modèle Category.

Lancer l'application

Votre APP dispose d'un modèle pour gérer les données, d'une vue pour afficher les contacts et d'un contrôle pour tout organiser. Il ne vous reste plus qu'à lancer l'APP. Vous devez maintenant lancer l'application !
Ajoutez le code suivant à contacts.js :

Copier le code Le code est le suivant :

$(document).ready(function(){

$.when(Category.findAll(), Contact.findAll()).then(

Fonction(categoryResponse, contactResponse){

var catégories = catégorieRéponse[0],

Contacts = contactResponse[0];

nouveaux contacts('#contacts', {

        contacts : contacts,

catégories : catégories

});

});

});

Analysons ce code :

Copier le code Le code est le suivant :

$(document).ready(function(){

Utilisez la méthode jQuery.ready pour surveiller l'état de préparation du DOM.

Copier le code Le code est le suivant :

$.when(Category.findAll(), Contact.findAll()).then(

function(categoryResponse, contactResponse){

Appelez les méthodes findAll() des deux modèles pour obtenir les types de tous les contacts. Puisque findAll() a un délai, $.when() garantit que les deux requêtes sont terminées en même temps avant d'exécuter la méthode de rappel.

Copier le code Le code est le suivant :

var catégories = catégorieRéponse[0],

contacts = contactResponse[0];

Récupérez l'ensemble de données correspondant à l'instance Model à partir des deux méthodes findAll(). Est le premier élément du tableau renvoyé par la réponse.

Copier le code Le code est le suivant :

nouveaux contacts('#contacts', {

contacts : contacts,

catégories : catégories

});

Créez un contrôle pour contact pour l'élément #contacts. Les ensembles de données de contact et de type sont transmis à Control.
Ouvrez votre APP avec un navigateur, vous verrez la liste de contacts suivante :

Résumé

Ceci est le premier article de la série de tutoriels, vous comprenez déjà le cœur de CanJS :
Modèles Une couche d'abstraction pour vos données APP
Modèles de vues qui convertissent les données en HTML
Controls organise tout

Étiquettes associées：

canjs mvc框架详解

source：php.cn

Article précédent：Collection de méthodes pour intercepter des chaînes dans les compétences php, js, css_javascript Article suivant：Une brève analyse des compétences de préchargement js/lazy chargement_javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur