拡張機能を使用してトランクを強化し、エクスペリエンスを向上させます

Backbone は、Web アプリケーション開発フレームワークとしてますます人気が高まっています。この人気に伴い、フレームワークの機能を強化し、他の人が埋める必要があると感じた穴を埋めるために、無数の拡張機能やプラグインが登場しました。最良のオプションをいくつか見てみましょう。

---

バックボーン.パペット

Derick Bailey によって開発されたこの拡張機能は非常に大きく、私の個人的なお気に入りです。 Derick は、Backbone に 1 つか 2 つの機能を追加する代わりに、存在すると感じた最大の穴をすべて埋めることにしました。 GitHub プロジェクトの Readme で彼がこれについて述べたことは次のとおりです。

「Backbone.Marionette は、大規模な JavaScript アプリケーションの構築を簡素化するように設計された Backbone.js の複合アプリケーション ライブラリです。これは、私 (Derick Bailey) が Backbone を使用して構築したアプリケーションで発見された一般的な設計と実装パターンのコレクションであり、以下からインスピレーションを得たさまざまな部分が含まれています。 Microsoft の「Prism」フレームワークなどの複合アプリケーション アーキテクチャ。"

Marionette が私たちに提供してくれるものを詳しく見てみましょう:

• Application: これは、アプリケーション内のすべての通信に使用される中心的なオブジェクトです。これは、アプリケーションのメイン ビュー、アプリケーション内のすべてのモジュールが互いに依存しないように通信できる中央のイベント ハブをセットアップするための迅速かつ簡単な方法を提供し、アプリケーションの動作をきめ細かく制御するための Initializer を提供します。が始まります。
• モジュール: モジュール コードをカプセル化し、中央のアプリケーション オブジェクト上でこれらのモジュールに名前を付ける方法。
• View: 拡張する新しいビュー クラスは、クリーンアップのためのネイティブ メソッドを提供するため、メモリ リークが発生することはありません。レンダリング テンプレートも含まれています。単純なビューの場合は、テンプレートとモデルを指定するだけで、残りは自動的に処理されます。
• コレクション/複合ビュー: ここで「複合アプリケーション ライブラリ」が登場します。これら 2 つのビューを使用すると、コレクション内のすべてのビュー (コレクションやモデルのネストされた階層も含めて) をレンダリングするプロセスを、ほとんど労力をかけずに処理できるビューを簡単に作成できます。
• リージョンとレイアウト: リージョンは、DOM 内の特定の場所でビューのレンダリング、レンダリング解除、および閉じるというすべての作業を処理するオブジェクトです。レイアウトは、サブビューを操作するための組み込み領域を備えた通常のビューです。
• AppRouter: コントローラーを使用してワークロードを処理できる新しいタイプのルーター。ルーターにはルートの構成のみが含まれます。
• イベント: Marionette は Wreqr プロジェクトを拡張して Backbone のイベントをより強力にし、大規模なイベントベースのアプリケーションの作成に使用できます。

私はマリオネットができることのほんの表面をなぞっただけです。 GitHub にアクセスして、Wiki にあるドキュメントを読むことを強くお勧めします。

さらに、アンドリュー バージェスは、Tuts のプレミアム高度なバックボーン パターンとテクニック コースでマリオネットを取り上げています。

---

バックボーンネットワークの検証

Backbone.Validation は、問題の小さなサブセット、つまりモデルの検証を解決するように設計されています。 Backbone には複数の検証拡張機能がありますが、これがコミュニティから最も尊敬されているようです。

実際には、モデルの validate メソッドを記述する代わりに、モデルの validation プロパティを作成できます。これは、検証する各プロパティを指定するオブジェクトであり、リストの各属性を検証するルール。各プロパティのエラー メッセージを指定し、カスタム関数を渡して個々のプロパティを検証することもできます。 Web サイトにある例の 1 つを変更した例を以下に示します。

リーリー

チェックできる組み込みのバリデーターとスキーマは無数にあり、独自のグローバル バリデーターを使用してリストを拡張する方法もあります。この Backbone プラグインは検証を楽しくするものではありませんが、検証を追加しない言い訳を排除します。この素晴らしいツールの使用例や詳細な説明については、Web サイトをご覧ください。

---

Backbone.LayoutManager

Backbone.LayoutManager は Backbone のビューを改善するためのものです。 Backbone.Marionette と同様に、メモリ リークを防ぐためのクリーンアップ コードが導入され、すべての定型コードが処理され、構成とアプリケーション固有のコードのみが残ります。 Marionette とは異なり、LayoutManager はビューに特に焦点を当てています。

LayoutManager はビューのみに焦点を当てているため、ビューに対しては Marionette よりも多くのことができます。たとえば、外部ファイルからテンプレートを動的にロードする場合、LayoutManager は非同期レンダリングを実行できます。

LayoutManager は、Marionette とはまったく異なる方法ではありますが、サブビューも処理できます。しかし、どちらにしても、ほとんどが設定だけなので、作業が非常にシンプルになり、すべてを自分で実装しようとする場合に必要な作業の 90% が不要になります。ビューに 3 つのサブビューを追加する次の簡単な例を見てください:

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>

使用标签 和 <code>%> 使 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 团队会定期更新该页面。

以上が拡張機能を使用してトランクを強化し、エクスペリエンスを向上させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。