Einige Vorschläge zur Programmierung von JavaScript-Clientanwendungen_Grundlagen

Sie haben vielleicht bemerkt, dass in letzter Zeit immer mehr Webanwendungen komplexer geworden sind und sich der Fokus langsam vom Server auf den Client verlagert. Ist das ein normaler Trend? Ich habe keine Ahnung. Die Debatte zwischen denen und Gegnern ist wie die Debatte darüber, ob der Auferstehungs-Anhänger oder der Weihnachts-Anhänger besser ist; es ist schwer zu sagen, welche Seite vollkommen Recht hat. Daher wird in diesem Artikel nicht darauf eingegangen, welche Seite richtig ist, sondern ich werde versuchen zu erklären, dass die Verwendung der bekannten objektorientierten Programmierung einige Probleme bei der Client-Programmierung erfolgreich lösen kann.

Beispiele für weniger standardisierten Code

Um die Reaktionsfähigkeit und Benutzererfahrung einer Anwendung zu berücksichtigen, erstellen wir immer komplexeren Code, der immer schwieriger zu verstehen und zu warten ist. Sie können sich leicht vorstellen, dass der clientseitige JavaScript-Anwendungscode, der ohne jegliche Struktur und Regeln erstellt wurde, so aussehen wird:

$(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('');
      }
     });
   });
});

Die Pflege dieser Art von Code wird schwierig sein. Da dieser kurze Code mit vielen Stellen zusammenhängt: Er steuert viele Ereignisse (Site-, Benutzer-, Netzwerkereignisse), verarbeitet Benutzeroperationsereignisse, analysiert die vom Server zurückgegebene Antwort und generiert HTML-Code. Jemand könnte sagen: „Ja, Sie haben Recht, aber was ist, wenn es sich nicht um eine clientseitige Single-Page-Anwendung handelt? Das ist bestenfalls ein Beispiel für übermäßige Nutzung der jQuery-Bibliothek“ – kein sehr überzeugender Punkt, wie alle anderen weiß, dass einfach zu wartender und gut gestalteter Code sehr wichtig ist. Insbesondere streben viele Tools oder Frameworks danach, Code verfügbar zu halten, damit wir ihn einfacher testen, warten, wiederverwenden und erweitern können.

Was ist MVC?

Apropos. Wir können von diesen auf MVC basierenden JavaScript-Frameworks profitieren, aber die meisten dieser Frameworks verwenden kein MVC und entsprechen einer Kombination aus Modell und Video oder etwas dazwischen, was schwer zu unterscheiden ist. Aus diesem Grund basieren die meisten Javascript-Frameworks auf MV*.

Ändernde Methoden können den Kunden im Projekt Organisation und Architektur verleihen, wodurch der Code über einen längeren Zeitraum einfacher verwaltet werden kann und sogar die Umgestaltung von vorhandenem Code relativ einfach wird. Es ist wichtig, dass Sie wissen, wie es funktioniert, und dass Sie die Antworten auf einige der folgenden Fragen im Gedächtnis behalten.

• Welche Arten von Daten enthält meine Bewerbung? -Modell
• Was sollten Benutzer sehen? -Ansicht
• Wer ist das Programm, das mit dem Benutzer interagiert? -Controller

Code mithilfe des MVC-Frameworks umgestalten

Welche Vorteile bietet die Verwendung von MVC zum Refactoring von Code?

• Entfernen Sie die Abhängigkeit von DOM und Ajax
• Der Code hat eine bessere Struktur und ist einfacher zu testen.
• Entfernen Sie redundanten Code aus $(document).ready() und lassen Sie nur den Teil übrig, der Model zum Erstellen von Links verwendet.

Lassen Sie uns einen typischen Codeblock mit einigen einfachen Schritten umgestalten
Schritt 1: Erstellen Sie die Ansicht und verschieben Sie die Ajax-Anfrage

Wir beginnen, die Abhängigkeit von DOM und Ajax zu entfernen. Verwenden Sie den Prototyp-Builder, um das Objekt „Animals“ zu erstellen, und fügen Sie gleichzeitig die Ansicht „NewAnimalView“ hinzu die Methoden 'addAnimal', 'appendAnimal', 'clearInput'.

Der Code lautet wie folgt:

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 });
 });

Schritt 2: Verwenden Sie Ereignisse, um Abhängigkeiten zu entfernen.

In diesem Beispiel ist die Verwendung des MVC-Frameworks der Schlüssel. Wir werden den Ereignismechanismus verwenden, der es uns ermöglicht, benutzerdefinierte Ereignisse zu kombinieren und auszulösen. Daher erstellen wir neue „AnimalsView“ und „NewAnimalView“ und geben ihnen unterschiedliche Verantwortlichkeiten für die Anzeige von Tieren. Es ist sehr einfach, Verantwortlichkeiten mithilfe von Ereignissen zu trennen. Wenn Sie Verantwortlichkeiten zwischen Methoden und Ereignissen wie folgt übertragen:

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();
});

Schritt 3: Übergeben Sie die Datenstruktur an das Kernframework

Schließlich der wichtigste Schritt, den wir verwenden: Modelle, Ansichten und Sammlungen.

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 });
});

Zusammenfassung

Was haben wir erreicht? Wir arbeiten auf einem hohen Abstraktionsniveau. Codepflege, Refactoring und Erweiterung werden einfacher. Wir haben die Codeergebnisse stark optimiert. Ist das nicht faszinierend? wunderbar. Allerdings möchte ich Sie vielleicht mit kaltem Wasser übergießen, selbst mit dem besten Framework ist der entwickelte Code immer noch brüchig und schwer zu warten. Daher ist es ein Fehler zu glauben, dass die Verwendung eines besseren MV*-Frameworks alle Codierungsprobleme lösen kann. Denken Sie daran, dass der Code während des Refactoring-Prozesses viel besser wird, nachdem wir den zweiten Schritt durchlaufen haben, in dem wir die Hauptkomponenten des Frameworks nicht verwenden.

Denken Sie daran, dass MV*-Frameworks gut sind, aber der Schwerpunkt liegt auf dem „Wie“ einer Anwendung, sodass es dem Anwendungsentwickler überlassen bleibt, über das „Was“ zu entscheiden. Eine Ergänzung zu jedem Framework, insbesondere wenn die Domäne des Projekts komplex ist, wird ein domänengesteuerter Designansatz sein, der sich stärker auf die folgenden Aspekte konzentriert: „Was“, ein Prozess der Umwandlung von Anforderungen in reale Produkte. Aber das ist ein anderes Thema, das wir besprechen werden.