拡張機能を使用してトランクを強化し、エクスペリエンスを向上させます-＆＃＆プレス-php.cn

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

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>

ログイン後にコピー

使用标签 <%= 和 %> 使 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 存储库上的文档以了解所有相关信息。