Begeben Sie sich auf eine Backbone.js-Reise

Im Gegensatz zu seinen Gegenstücken in der Webentwicklung hat JavaScript nie wirklich eine Struktur in Form eines Frameworks bereitgestellt. Glücklicherweise hat sich dies in den letzten Jahren allmählich geändert.

Heute möchte ich Ihnen Backbone.JS vorstellen, eine nette kleine Bibliothek, die den Prozess der Erstellung komplexer, interaktiver und datengesteuerter Anwendungen erheblich vereinfacht. Es bietet eine saubere Möglichkeit, Daten von der Präsentation zu trennen.

---

Backbone.JS-Übersicht

Backbone wurde von Jeremy Ashkenas, dem JS-Ninja, der CoffeeScript entwickelt hat, erstellt und ist eine ultraleichte Bibliothek, mit der Sie einfach zu wartende Frontends erstellen können. Es ist Backend-unabhängig und funktioniert gut mit jeder modernen JavaScript-Bibliothek, die Sie bereits verwenden.

Backbone ist eine Sammlung zusammenhängender Objekte mit einem Gewicht von weniger als 4kb, die Ihrem Code Struktur verleiht und Ihnen im Grunde dabei hilft, richtige MVC-Anwendungen im Browser zu erstellen. Die offizielle Website beschreibt ihren Zweck wie folgt:

Backbone bietet Struktur für JavaScript-intensive Anwendungen, indem es Modelle mit Schlüsselwertbindungen und benutzerdefinierten Ereignissen, eine Sammlung mit einer umfangreichen aufzählbaren Funktions-API, Ansichten mit deklarativer Ereignisbehandlung bereitstellt und alles über eine RESTful-JSON-Schnittstelle mit Ihrer vorhandenen Anwendung verbindet.

Seien wir ehrlich: Das Obige ist etwas schwer zu analysieren und zu verstehen. Lassen Sie uns also mit Jeremys Hilfe den Jargon weiter dekonstruieren.

Schlüsselwertbindung und benutzerdefinierte Ereignisse

Wenn sich der Inhalt oder Zustand eines Modells ändert, werden andere Objekte, die das Modell abonniert haben, benachrichtigt, damit sie entsprechend damit umgehen können. Hier hört die Ansicht auf Änderungen im Modell und aktualisiert sich entsprechend, anstatt dass das Modell die Ansicht manuell bearbeiten muss.

Rich aufzählbare Funktions-API

Backbone verfügt über viele sehr nützliche Funktionen zur Verarbeitung und Arbeit mit Ihren Daten. Im Gegensatz zu anderen Implementierungen sind Arrays in JavaScript ziemlich neutral, was beim Umgang mit Daten wirklich ein Hindernis sein kann.

Ansichten mit deklarativer Ereignisbehandlung

Ihre Zeiten, in denen Sie Spaghetti-Anrufe schreiben mussten, sind vorbei. Sie können programmgesteuert deklarieren, welcher Rückruf einem bestimmten Element zugeordnet werden muss.

RESTful JSON-Schnittstelle

Obwohl die Standardmethode für die Kommunikation mit dem Server darin besteht, Standard-AJAX-Aufrufe zu verwenden, können Sie diese ganz einfach auf die gewünschte Methode umstellen. Es sind viele Adapter auf den Markt gekommen, die die meisten der gängigsten abdecken, darunter Websockets und lokaler Speicher.

Breiten Sie es in einfachere Begriffe auf:

Backbone bietet eine saubere Möglichkeit, Daten von der Präsentation zu trennen. Das Modell, das die Daten verarbeitet, kümmert sich nur um die Synchronisierung mit dem Server, während die Hauptverantwortung der Ansicht darin besteht, auf Änderungen am abonnierten Modell zu warten und HTML zu rendern.

---

Kurze FAQ

Ich vermute, dass du im Moment vielleicht etwas verwirrt bist, also lass uns ein paar Dinge klarstellen:

Wird es jQuery ersetzen?

Nein. Ihre Anwendungsbereiche ergänzen sich sehr gut und es gibt kaum Überschneidungen in der Funktionalität. Backbone verarbeitet alle Abstraktionen auf höherer Ebene, während jQuery (oder eine ähnliche Bibliothek) das DOM, normalisierte Ereignisse usw. verarbeitet.

Ihr Umfang und ihre Anwendungsfälle sind sehr unterschiedlich, und nur weil Sie das eine kennen, heißt das nicht, dass Sie das andere nicht lernen sollten. Als JavaScript-Entwickler sollten Sie wissen, wie man beides effektiv nutzt.

Warum sollte ich das verwenden?

Denn oft wird Front-End-Code zu einem dampfenden, schmutzigen Durcheinander aus verschachtelten Rückrufen, DOM-Manipulationen, HTML für Präsentationen und anderem unbeschreiblichem Verhalten.

Backbone bietet eine sehr saubere und elegante Möglichkeit, dieses Chaos zu bewältigen.

Wo soll ich es verwenden?

Backbone eignet sich hervorragend zum Erstellen von Front-End-intensiven, datengesteuerten Anwendungen. Denken Sie an die GMail-Oberfläche, das neue Twitter oder jede andere Offenbarung der letzten Jahre. Es erleichtert die Erstellung komplexer Anwendungen.

Während man dies in mehr Mainstream-Webseiten integrieren könnte, handelt es sich tatsächlich um eine Bibliothek, die speziell für Webanwendungen entwickelt wurde. Ist es ähnlich wie Cappuccino oder Sproutcore?

Ja und nein.

Ja, denn wie die oben genannten Frameworks wird dieses hauptsächlich zur Erstellung komplexer Frontends für Webanwendungen verwendet.

Der Unterschied besteht darin, dass Backbone sehr schlank ist und keine zusätzlichen Widgets enthält.

Backbone ist sehr leicht, weniger als 4 KB.

Dazu kommt noch die Tatsache, dass Cappuccino Sie dazu zwingt, in Objective-J zu programmieren, während die Ansichten von Sproutcore programmgesteuert in JS deklariert werden müssen. Während an keinem dieser Ansätze etwas auszusetzen ist, kann mit Backbone einfaches JavaScript die Aufgabe mit herkömmlichem HTML und CSS erledigen, was eine sanftere Lernkurve ermöglicht.

Ich kann trotzdem andere Bibliotheken auf der Seite nutzen, oder?

Absolut. Nicht nur die typischen DOM-Zugriffs- und AJAX-Wrapping-Typen, sondern auch die übrigen Vorlagen- und Skriptladetypen. Es ist sehr, sehr locker gekoppelt, was bedeutet, dass Sie fast jedes Tool mit Backbone verwenden können.

Wird es den Weltfrieden bringen?

Nein, tut mir leid. Aber hier ist etwas, das Sie aufheitert.

Okay, legen wir diese Frage jetzt beiseite und fangen wir an!

---

Erfahren Sie mehr über Backbone’s Backbone

MVC in Backbone stand ursprünglich für Models, Views und Collections, da es im Framework keine Controller gab. Seitdem haben sich die Dinge geändert.

Der Kern von Backbone besteht aus vier Hauptklassen:

• Modell
• Sammlung
• Ansicht
• Controller

Da wir zeitlich etwas knapp sind, schauen wir uns heute nur die Kernfächer an. Anschließend werden wir eine supereinfache App entwickeln, um die hier gelehrten Konzepte zu demonstrieren, da es zu viel wäre, alles in einem Artikel zusammenzufassen und von den Lesern zu erwarten, dass sie alles analysieren.

Bitte bleiben Sie in den kommenden Wochen wachsam!

---

Modell

Modell kann in verschiedenen MVC-Implementierungen unterschiedliche Bedeutungen haben. In Backbone stellt ein Modell eine einzelne Entität dar – sozusagen einen Datensatz in einer Datenbank. Aber hier gibt es keine festen Regeln. Von der Backbone-Website:

Das Modell ist der Kern jeder JavaScript-Anwendung und enthält interaktive Daten und den Großteil der sie umgebenden Logik: Transformationen, Validierungen, berechnete Eigenschaften und Zugriffskontrolle.

Das Modell bietet Ihnen lediglich die Möglichkeit, beliebige Attribute oder Attribute in einem Datensatz zu lesen und zu schreiben. Vor diesem Hintergrund ist die folgende einzelne Codezeile vollständig verwendbar:

var Game = Backbone.Model.extend({});

Lassen Sie uns darauf aufbauen.

var Game = Backbone.Model.extend({
        initialize: function(){
            alert("Oh hey! ");
        },
		  defaults: {
            name: 'Default title',
            releaseDate: 2011,
        }
    });

initialize wird ausgelöst, wenn das Objekt instanziiert wird. Hier möchte ich nur auf ein albernes Verhalten aufmerksam machen – Sie sollten wahrscheinlich ein Bootstrapping der Daten durchführen oder andere Verwaltungsaufgaben in Ihrer Anwendung erledigen. Ich habe auch eine Reihe von Standardwerten definiert für den Fall, dass keine Daten übergeben werden.

Sehen wir uns an, wie man Eigenschaften liest und schreibt. Aber zuerst erstellen wir eine neue Instanz.

// Create a new game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});

// release will hold the releaseDate value -- 2011 here
var release = portal.get('releaseDate');

// Changes the name attribute
portal.set({ name: "Portal 2 by Valve"});

Wenn Sie Get/Set-Mutatoren bemerken, essen Sie einen Keks! Die Attribute des Modells können nicht über das typische object.attribute-Format gelesen werden. Sie müssen Getter/Setter implementieren, da die Wahrscheinlichkeit einer versehentlichen Änderung der Daten gering ist.

Zu diesem Zeitpunkt bleiben alle Änderungen nur im Speicher. Lassen Sie uns diese Änderungen dauerhaft machen, indem wir mit dem Server sprechen.

portal.save();

Das ist es. Erwarten Sie mehr? Die obige Codezeile sendet nun eine Anfrage an Ihren Server. Bedenken Sie, dass sich die Art der Anfrage intelligent ändert. Da es sich um ein neues Objekt handelt, wird POST verwendet. Andernfalls verwenden Sie PUT.

Das Backbone-Modell verfügt standardmäßig über mehr Funktionen, aber dies sollte Ihnen auf jeden Fall den Einstieg erleichtern. Klicken Sie auf die Dokumentation, um weitere Informationen zu erhalten.

---

Sammlung

Sammlungen in Backbone sind im Wesentlichen nur Sammlungen von Modellen. Wie bei der vorherigen Datenbankanalogie ist eine Sammlung das Ergebnis einer Abfrage, wobei das Ergebnis aus vielen Datensätzen [Modellen] besteht. Sie können eine Sammlung wie folgt definieren:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  }
});

Als Erstes ist zu beachten, dass wir definieren, um welche Modellkollektion es sich handelt. Als Erweiterung unseres vorherigen Beispiels habe ich diese Sammlung zu einer Spielesammlung gemacht.

Nun können Sie Ihre Daten weiterhin nach Belieben nutzen. Erweitern wir diese Sammlung beispielsweise um eine Methode, die nur ein bestimmtes Spiel zurückgibt.

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  old : function() {
    return this.filter(function(game) { 
      return game.get('releaseDate') < 2009; 
    });
  }
  }
});

Es ist einfach, nicht wahr? Wir prüfen nur, ob das Spiel vor 2009 veröffentlicht wurde, und wenn ja, geben wir das Spiel zurück.

Sie können den Inhalt der Sammlung auch direkt bearbeiten, wie unten gezeigt:

var games = new GamesCollection
games.get(0);

Der obige Codeausschnitt instanziiert eine neue Sammlung und ruft dann das Modell mit der ID 0 ab. Sie können ein Element an einer bestimmten Position finden, indem Sie wie folgt auf den Index der at-Methode verweisen: game.at(0);

Abschließend können Sie Ihre Sammlung wie folgt dynamisch füllen:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  url: '/games'
  }
});

var games = new GamesCollection
games.fetch();

Wir lassen Backbone einfach die Daten über das Attribut url von überall abrufen. Sobald wir fertig sind, erstellen wir einfach ein neues Objekt und rufen die Methode „fetch“ auf, die einen asynchronen Aufruf an den Server auslöst und die Sammlung mit den Ergebnissen füllt. Dies sollte die Grundlagen der Backbone-Kollektionen abdecken. Wie ich bereits erwähnt habe, gibt es hier eine Menge guter Sachen, wobei Backbone viele nützliche Dienstprogramme aus der Underscore-Bibliothek aliast. Eine kurze Lektüre der offiziellen Dokumentation sollte Ihnen den Einstieg erleichtern.

Ansicht

---

Ansichten in Backbone können auf den ersten Blick etwas verwirrend sein. Für MVC-Puristen ähneln sie eher Controllern als Ansichten selbst.

Ansichten übernehmen grundsätzlich zwei Aufgaben:

Hören Sie sich Veranstaltungen an, die von DOM und Models/Sammlungen veranstaltet werden.

• Zeigen Sie Benutzern den Status und das Datenmodell der Anwendung.
Lassen Sie uns fortfahren und eine sehr einfache Ansicht erstellen.

GameView= Backbone.View.extend({
  tagName : "div",
  className: "game",
  render : function() {
    // code for rendering the HTML for the view
  }
});

Wenn Sie diesem Tutorial bisher gefolgt sind, ist es ziemlich einfach. Ich gebe einfach an, welches HTML-Element verwendet werden soll, um die Ansicht über das Attribut

tagName

zu umschließen, und seine ID über className.

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

el 指的是视图引用的 DOM 元素。我们只是通过元素的 innerHTML 属性访问游戏的名称。简而言之，div 元素现在包含我们游戏的名称。显然，如果您以前使用过该库，则 jQuery 方式会更简单。

对于更复杂的布局，在 JavaScript 中处理 HTML 不仅乏味而且鲁莽。在这些情况下，模板是可行的方法。

Backbone 附带了由 Underscore.JS 提供的最小模板解决方案，但我们非常欢迎您使用任何可用的优秀模板解决方案。

最后我们看一下视图是如何监听事件的。首先是 DOM 事件。

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

如果您以前处理过事件，那么应该很简单。我们基本上是通过事件对象定义和连接事件。正如您在上面看到的，第一部分指的是事件，下一部分指定触发元素，最后一部分指应触发的函数。

现在绑定到模型和集合。我将在这里介绍模型的绑定。

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

首先要注意的是我们如何将绑定代码放置在初始化函数中。当然，最好从一开始就这样做。

bindAll 是 Underscore 提供的一个实用程序，用于保存函数的 this 值。这特别有用，因为我们传递了一堆函数，并且指定为回调的函数已删除该值。

现在，只要模型的 name 属性发生更改，就会调用 changeName 函数。您还可以使用添加和删除动词来轮询更改。

侦听集合中的更改就像将处理程序绑定到回调时将模型替换为集合一样简单。

---

控制器

Backbone 中的控制器本质上允许您使用 hashbang 创建可添加书签的有状态应用程序。

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

这对于传统服务器端 MVC 框架中的路由非常熟悉。例如，!/games 将映射到 games 函数，而浏览器本身中的 URL 将是 domain/#!/games。

通过智能使用 hashbang，您可以创建大量基于 JS 且可添加书签的应用程序。

如果您担心破坏后退按钮，Backbone 也能满足您的需求。

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();

通过上面的代码片段，Backbone 可以监控您的 hashbang，并结合您之前指定的路线，使您的应用程序可添加书签。

---

我从 Backbone 学到了什么

总的来说，以下是我从创建应用程序的 Backbone 方式中学到的一些经验教训：

• 前端确实需要 MVC。传统方法给我们留下的代码过于耦合、混乱且难以维护。
• 在 DOM 中存储数据和状态是一个坏主意。在创建需要使用相同数据更新应用的不同部分的应用后，这开始变得更有意义。
• 胖模型和瘦控制器是正确的选择。当业务逻辑由模型处理时，工作流程就会得到简化。
• 模板是绝对必要的。将 HTML 放入 JavaScript 中会给您带来不好的业力。

可以说 Backbone 引起了前端构建方式的范式转变，至少对我来说是这样。鉴于今天文章的范围非常广泛，我确信您有很多问题。点击下面的评论部分来插话。非常感谢您的阅读，并期待将来有更多的 Backbone 教程！

Das obige ist der detaillierte Inhalt vonBegeben Sie sich auf eine Backbone.js-Reise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!