Erweitern Sie den Kofferraum mit Erweiterungen, um das Erlebnis zu verbessern

Backbone wird als Framework für die Entwicklung von Webanwendungen immer beliebter. Mit dieser Popularität gingen unzählige Erweiterungen und Plugins einher, um die Funktionalität des Frameworks zu verbessern und die Lücken zu schließen, die andere für notwendig hielten. Werfen wir einen Blick auf einige der besten Optionen.

---

Backbone.Puppet

Diese von Derick Bailey entwickelte Erweiterung ist ziemlich groß und mein persönlicher Favorit. Anstatt Backbone ein oder zwei Features hinzuzufügen, beschloss Derick, alle seiner Meinung nach größten Lücken zu schließen. Hier ist, was er dazu in der Readme-Datei des GitHub-Projekts gesagt hat.

„Backbone.Marionette ist eine zusammengesetzte Anwendungsbibliothek für Backbone.js, die das Erstellen großer JavaScript-Anwendungen vereinfachen soll. Es handelt sich um eine Sammlung gängiger Entwurfs- und Implementierungsmuster, die in Anwendungen entdeckt wurden, die ich (Derick Bailey) mit Backbone erstellt habe, und enthält verschiedene Teile, die davon inspiriert wurden zusammengesetzte Anwendungsarchitektur, wie etwa das „Prism“-Framework von Microsoft“

.

Schauen wir uns genauer an, was Marionette uns zu bieten hat:

• Anwendung: Dies ist das zentrale Objekt, über das alles in der Anwendung kommuniziert. Es bietet eine schnelle und einfache Möglichkeit, die Hauptansicht der Anwendung einzurichten, einen zentralen Event-Hub, über den alle Module in der Anwendung kommunizieren können, sodass sie nicht voneinander abhängig sind, und bietet Initializer für eine detaillierte Kontrolle darüber, wie Ihre Anwendung funktioniert beginnt.
• Module: Eine Möglichkeit, Modulcode zu kapseln und diese Module in einem zentralen Anwendungsobjekt zu benennen.
• Ansichten: Die neue zu erweiternde Ansichtsklasse bietet native Methoden zur Bereinigung, damit es nicht zu Speicherverlusten kommt. Es enthält auch Rendering-Vorlagen; für einfache Ansichten geben Sie einfach die Vorlage und das Modell an und der Rest wird erledigt.
• Sammlungen/Composite-Ansichten: Hier kommt die Composite App Library ins Spiel. Mit diesen beiden Ansichten können Sie ganz einfach Ansichten erstellen, die den Prozess des Renderns aller Ansichten in einer Sammlung, sogar verschachtelter Hierarchien von Sammlungen und Modellen, mit sehr geringem Aufwand bewältigen können.
• Regionen und Layouts: Eine Region ist ein Objekt, das die gesamte Arbeit des Renderns, Unrenderings und Schließens von Ansichten an einer bestimmten Stelle im DOM übernimmt. Ein Layout ist einfach eine normale Ansicht mit integrierten Bereichen für die Arbeit mit Unteransichten.
• AppRouter: Ein neuer Routertyp, der einen Controller zur Bewältigung der Arbeitslast verwenden kann, sodass der Router nur die Konfiguration der Route enthält.
• Events: Marionette ist eine Weiterentwicklung des Wreqr-Projekts, um die Events von Backbone leistungsfähiger für die Erstellung umfangreicher ereignisbasierter Anwendungen zu machen.

Ich habe nur an der Oberfläche dessen gekratzt, was Marionette kann. Ich empfehle auf jeden Fall, zu GitHub zu gehen und deren Dokumentation im Wiki zu lesen.

Darüber hinaus behandelt Andrew Burgess Marionette in seinem Tuts+ Premium Advanced Backbone Patterns and Techniques-Kurs.

---

Backbone-Netzwerküberprüfung

Backbone.Validation zielt darauf ab, eine kleine Teilmenge von Problemen zu lösen: nämlich die Modellvalidierung. Backbone verfügt über mehrere Validierungserweiterungen, aber diese scheint in der Community den größten Respekt gefunden zu haben.

Sie müssen eigentlich kein validate 方法，而是可以为模型创建 validation-Attribut für Ihr Modell schreiben, bei dem es sich um ein Objekt handelt, das jedes zu validierende Attribut und die Regeln für die Validierung jedes Attributs der Liste angibt. Sie können auch eine Fehlermeldung für jede Eigenschaft angeben und eine benutzerdefinierte Funktion übergeben, um einzelne Eigenschaften zu validieren. Unten sehen Sie ein Beispiel, das von einem der Beispiele auf ihrer Website abgeändert wurde.

var SomeModel = Backbone.Model.extend({
    validation: {
        name: {
            required: true
        },
        'address.street': {
            required: true
        },
        'address.zip': {
            length: 4
        },
        age: {
            range: [1, 80]
        },
        email: {
            pattern: 'email',
            // supply your own error message
            msg: "Please enter a valid email address"
        },
        // custom validation function for `someAttribute`
        someAttribute: function(value) {
            if(value !== 'somevalue') {
                return 'Error message';
            }
        }
    }
});

Es gibt unzählige integrierte Validatoren und Schemata, die Sie überprüfen können, und es gibt sogar eine Möglichkeit, die Liste mit Ihren eigenen globalen Validatoren zu erweitern. Mit diesem Backbone-Plugin macht die Validierung keinen Spaß, aber es beseitigt alle Ausreden dafür, keine Validierung hinzuzufügen. Weitere Beispiele und ausführlichere Anweisungen zur Verwendung dieses wunderbaren Tools finden Sie auf der Website.

---

Backbone.LayoutManager

Backbone.LayoutManager soll die Ansichten von Backbone verbessern. Wie Backbone.Marionette führt es Bereinigungscode ein, um Speicherlecks zu verhindern, verarbeitet alle Boilerplates und hinterlässt Ihnen nur Konfigurations- und anwendungsspezifischen Code. Im Gegensatz zu Marionette konzentriert sich LayoutManager speziell auf Ansichten.

Da sich LayoutManager nur auf Ansichten konzentriert, kann es für Ansichten mehr tun als Marionette. Beispielsweise ist LayoutManager in der Lage, asynchrones Rendering durchzuführen, wenn Sie eine Vorlage dynamisch aus einer externen Datei laden möchten.

LayoutManager kann auch mit Unteransichten umgehen, allerdings auf ganz andere Weise als Marionette. Aber so oder so handelt es sich hauptsächlich um die Konfiguration, die die Dinge sehr vereinfacht und 90 % der Arbeit eliminiert, die Sie machen müssten, wenn Sie versuchen würden, alles selbst zu implementieren. Unten sehen Sie ein einfaches Beispiel für das Hinzufügen von drei Unteransichten zu einer Ansicht:

Backbone.Layout.extend({
    views: {
      "header": new HeaderView(),
      "section": new ContentView(),
      "footer": new FooterView()
    }
});

像往常一样，请务必参阅 GitHub 页面和文档以了解更多信息。

---

Backbone.ModelBinder

Backbone.ModelBinder 在模型中的数据和视图显示的标记之间创建链接。您已经可以通过绑定到模型上的更改事件并再次渲染视图来完成此操作，但 ModelBinder 更高效且更易于使用。

看一下下面的代码：

var MyView = Backbone.View.extend({
    template: _.template(myTemplate),

    initialize: function() {
        // Old Backbone.js way
        this.model.on('change', this.render, this);
        // or the new Backbone 0.9.10+ way
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

这种方法的问题在于，每当更改单个属性时，我们都需要重新渲染整个视图。此外，在每次渲染时，我们都需要将模型转换为 JSON。最后，如果希望绑定是双向的（当模型更新时，DOM 也会更新，反之亦然），那么我们需要向视图添加更多逻辑。

此示例使用 Underscore 的 template 函数。让我们假设我们传递给它的模板如下所示：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName" value="<%= firstName %>">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName" value="<%= lastName %>">
</form>

使用标签 <%= 和 %> 使 template 函数将这些区域替换为我们从模型发送的 JSON 中存在的 firstName 和 lastName 属性。我们假设该模型也具有这两个属性。

使用 ModelBinder，我们可以删除这些模板标签并以普通 HTML 形式发送。 ModelBinder 将查看 input 标记上的 name 属性的值，并自动将该属性的模型值分配给该标记的 value 属性。例如，第一个 input 的 name 设置为“firstName”。当我们使用 ModelBinder 时，它会看到这一点，然后将 input 的 value 设置为模型的 firstName 属性。

下面，您将看到我们之前的示例在切换到使用 ModelBinder 后的外观。另外，要意识到绑定是双向的，因此如果 input 标签更新，模型将自动为我们更新。

HTML 模板：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName">
</form>

JavaScript 视图：

var MyView = Backbone.View.extend({
    template: myTemplate,

    initialize: function() {
        // No more binding in here
    },

    render: function() {
        // Throw the HTML right in
        this.$el.html(this.template);
        // Use ModelBinder to bind the model and view
        modelBinder.bind(this.model, this.el);
    }
});

现在我们有了干净的 HTML 模板，我们只需要一行代码就可以使用 modelBinder.bind 将视图的 HTML 和模型绑定在一起。 modelBinder.bind 采用两个必需参数和一个可选参数。第一个参数是将绑定到 DOM 的数据的模型。第二个是将递归遍历的 DOM 节点，搜索要进行的绑定。最后一个参数是 binding 对象，如果您不喜欢默认用法，它指定如何完成绑定的高级规则。

ModelBinder 不仅仅可以用于 input 标签。它适用于任何元素。如果元素是某种类型的表单输入，例如 input、select 或 textarea，它将相应地更新这些元素的值。如果您绑定到一个元素，例如 div 或 span，它会将模型的数据放置在该元素的开始和结束标记之间（例如 <span name="firstName">[数据在此处] <span></span></span>)。

Backbone.ModelBinder 背后的功能比我在这里演示的要强大得多，因此请务必阅读 GitHub 存储库上的文档以了解所有相关信息。

---

结论

事情就这样结束了。我只介绍了少数扩展和插件，但这些是我认为最有用的。

Backbone 格局在不断变化。如果您想查看各种可用 Backbone 扩展的完整列表，请访问此 wiki 页面，Backbone 团队会定期更新该页面。

Das obige ist der detaillierte Inhalt vonErweitern Sie den Kofferraum mit Erweiterungen, um das Erlebnis zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!