Quelques suggestions pour programmer des applications client JavaScript_Bases

Vous avez peut-être remarqué que de plus en plus d'applications Web sont devenues plus complexes ces derniers temps et que l'attention se déplace lentement du serveur vers le client. Est-ce une tendance normale ? Je ne sais pas. Le débat entre ceux et ceux qui sont contre, c'est comme débattre pour savoir si le Résurrectionniste ou Noël est meilleur ; il est difficile de dire quel côté a tout à fait raison. Par conséquent, cet article ne discutera pas du côté qui a raison, mais je vais essayer d'expliquer que l'utilisation de la programmation orientée objet bien connue peut résoudre avec succès certains problèmes de programmation client.

Exemples de code moins standardisé

Afin de prendre en compte la réactivité et l'expérience utilisateur d'une application, nous créons un code de plus en plus complexe qui devient difficile à comprendre et à maintenir. Vous pouvez facilement imaginer que le code de l'application JavaScript côté client construit sans aucune structure ni règle ressemblera à ceci :

$(function(){
  $('#form').submit(function(e) {
    e.preventDefault();
 
    $.ajax({
      url: '/animals',
      type: 'POST',
      dataType: 'json',
      data: { text: $('#new-animal').find('textarea').val() },
      success: function(data) {
        $('#animals').append('<li>' + data.text + '</li>');
        $('#new-animal').find('textarea').val('');
      }
     });
   });
});

Maintenir ce type de code sera difficile. Parce que ce court morceau de code est lié à de nombreux endroits : il contrôle de nombreux événements (événements de site, d'utilisateur, de réseau), il gère les événements d'opération des utilisateurs, analyse la réponse renvoyée par le serveur et génère du code HTML. Quelqu'un pourrait dire : « Oui, vous avez raison, mais que se passe-t-il s'il ne s'agit pas d'une application monopage côté client ? C'est au mieux un exemple de surutilisation de la bibliothèque jQuery » - ce qui n'est pas un argument très convaincant, comme tout le monde. sait, un code facile à maintenir et bien conçu est très important. En particulier, de nombreux outils ou frameworks s'efforcent de maintenir le code disponible afin que nous puissions le tester, le maintenir, le réutiliser et l'étendre plus facilement.

Qu'est-ce que MVC ?

En parlant de ça. Nous pouvons bénéficier de ces frameworks JavaScript basés sur MVC, mais la plupart de ces frameworks n'utilisent pas MVC et sont équivalents à une combinaison de modèle et de vidéo, ou quelque chose entre les deux, ce qui est difficile à distinguer. C'est pourquoi la plupart des frameworks Javascript sont basés sur MV*.

Changer de méthode peut fournir une organisation et une architecture aux clients du projet, ce qui rend le code plus facile à maintenir sur une longue période de temps, et même la refactorisation du code existant devient relativement facile. Il est essentiel de connaître son fonctionnement et de connaître les réponses à certaines des questions suivantes.

• Quels types de données y a-t-il dans ma candidature ? -Modèle
• Que doivent voir les utilisateurs ? -Voir
• Quel est le programme qui interagit avec l'utilisateur ? -Contrôleur

Refactoriser le code à l'aide du framework MVC

Quels sont les avantages de l'utilisation de MVC pour refactoriser le code ?

• Supprimer la dépendance au DOM et à l'Ajax
• Le code a une meilleure structure et est plus facile à tester.
• Supprimez le code redondant de $(document).ready(), en ne laissant que la partie qui utilise le modèle pour créer des liens.

Refactorisons un bloc de code typique en quelques étapes simples
Étape 1 : Créer la vue et déplacer la requête Ajax

Nous commençons à supprimer la dépendance au DOM et à Ajax. Utilisez le générateur de prototypes, le modèle pour créer l'objet 'Animals' et ajoutez une méthode 'add'. En même temps, créez la vue 'NewAnimalView' et ajoutez-la. les méthodes 'addAnimal', 'appendAnimal', 'clearInput'.

Le code est le suivant :

var Animals = function() {
};
 
Animals.prototype.add = function (options) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: options.text },
     success: options.success
   });
};
 
 var NewAnimalView = function (options) {
  this.animals = options.animals;
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
 NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   var self = this;
 
   this.animals.add({
     text: $('#new-animal textarea').val(),
     success: function(data) {
       self.appendAnimal (data.text);
       self.clearInput();     
     }
   });
 };
 
NewAnimalView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
 $(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
 });

Étape 2 : Utiliser des événements pour supprimer les dépendances.

Dans cet exemple, l'utilisation du framework MVC est la clé. Nous utiliserons le mécanisme d'événements, qui nous permet de combiner et de déclencher des événements personnalisés. Par conséquent, nous créons de nouveaux "AnimalsView" et "NewAnimalView" et leur donnons différentes responsabilités pour l'affichage des animaux. Il est très simple de séparer les responsabilités à l'aide d'événements. Si vous transférez les responsabilités entre les méthodes et les événements comme celui-ci :

var events = _.clone(Backbone.Events);
var Animals = function() {
};
 
Animals.prototype.add = function(text) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: text },
     success: function(data) {
      events.trigger('animal:add', data.text);
     }
   });
};
 
var NewAnimalView = function(options) {
  this.animals = options.animals;
  events.on('animal:add', this.clearAnimal, this);
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   this.animals.add($('#new-animal textarea').val());
 };
 
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
var AnimalsView = function() {
  events.on('animal:add', this.appendAnimal, this);
};
 
AnimalsView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
 
$(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
   new AnimalsView();
});

Étape 3 : Transmettre la structure des données au framework principal

Enfin, étape la plus importante, nous utilisons : les modèles, les vues et les collections.

var Animal = Backbone.Model.extend({
  url: '/animals'
});
 
var Animals = Backbone.Collection.extend({
  model: Animal
});
 
var AnimalsView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('add', this.appendAnimal, this);
  },
 
  appendAnimal: function(animal) {
    this.$('ul').append('<li>' + animal.escape('text') + '</li>');
  }
});
 
 
var NewAnimalView = Backbone.View.extend({
  events: {
    'submit form': 'addAnimal'
  },
 
  initialize: function() {
    this.collection.on('add', this.clearInput, this);
  },
 
  addAnimal: function(e) {
    e.preventDefault();
    this.collection.create({ text: this.$('textarea').val() });
  },
 
  clearInput: function() {
    this.$('textarea').val('');
  }
});
 
$(document).ready(function() {
  var animals = new Animals();
  new NewAnimalView({ el: $('#new-animal'), collection: animals });
  new AnimalsView({ el: $('#animals'), collection: animals });
});

Résumé

Qu'avons-nous réalisé ? Nous travaillons à un haut niveau d'abstraction. La maintenance, la refactorisation et l'extension du code deviennent plus faciles. Nous avons grandement optimisé les résultats du code. N'est-ce pas fascinant ? merveilleux. Cependant, j'aurais peut-être envie de vous jeter de l'eau froide, même avec le meilleur framework, le code développé est encore fragile et difficile à maintenir. C’est donc une erreur de penser qu’utiliser un meilleur framework MV* peut résoudre tous les problèmes de codage. N'oubliez pas que pendant le processus de refactoring, le code deviendra bien meilleur après avoir passé par la deuxième étape, où nous n'utilisons pas les principaux composants du framework.

N'oubliez pas que les frameworks MV* sont bons, mais que l'accent est mis sur le « Comment » développer une application, ce qui laisse au développeur de l'application le soin de décider du « Quoi ». Un complément à chaque cadre, en particulier lorsque le domaine du projet est complexe, sera une approche de conception axée sur le domaine, qui se concentrera davantage sur les aspects suivants : « quoi », un processus de transformation des exigences en produits réels. Mais c'est un autre sujet dont nous allons discuter.