透過擴展增強主幹以改善體驗

Backbone 作為 Web 應用程式開發框架變得越來越流行。隨著這種流行，無數的擴充功能和插件來增強框架的功能，並填補其他人認為需要填補的漏洞。讓我們來看看一些最佳選擇。

---

# 骨幹.木偶

由 Derick Bailey 開發，這個擴展相當大，是我個人最喜歡的。 Derick 決定填補他認為存在的所有最大漏洞，而不是在 Backbone 上增加一兩個功能。以下是他在 GitHub 專案的自述文件中對此的說法。

「Backbone.Marionette 是Backbone.js 的複合應用程式庫，旨在簡化大型JavaScript 應用程式的建置。它是我(Derick Bailey) 使用Backbone 建立的應用程式中發現的常見設計和實作模式的集合，並包括受複合應用程式架構啟發的各種部分，例如Microsoft 的「Prism」框架。」

讓我們仔細看看 Marionette 為我們提供了什麼：

• 應用程式：這是一個中心對象，應用程式中的所有內容都可以透過它進行通訊。它提供了一種快速、輕鬆地設置應用程式主視圖的方法，一個中央事件中心，應用程式中的每個模組都可以透過它進行通信，這樣它們就不會相互依賴，並且提供了用於細粒度控制的初始化程序您的應用程式如何啟動。
• 模組：一種封裝模組程式碼並在中央應用程式物件上命名這些模組的方法。
• 視圖：要擴充的新視圖類別提供了用於清理的本機方法，因此您不會最終出現記憶體洩漏。它還包含渲染樣板；對於簡單視圖，只需指定模板和模型，它就會處理其餘的內容。
• 集合/複合視圖：這就是「複合應用程式庫」發揮作用的地方。這兩個視圖使您可以輕鬆建立視圖，這些視圖可以處理渲染集合中所有視圖的過程，甚至是集合和模型的嵌套層次結構，只需很少的努力。
• 區域和佈局：區域是一個對象，可以處理 DOM 中特定位置的渲染、取消渲染和關閉視圖的所有工作。佈局只是一個普通視圖，其中還內建了用於處理子視圖的區域。
• AppRouter：一種新型路由器，可以使用控制器來處理工作負載，以便路由器只包含路由的設定。
• 事件：Marionette 從 Wreqr 專案擴展而來，使 Backbone 的事件更加強大，可用於建立基於事件的大型應用程式。

我只觸及了 Marionette 功能的皮毛。我絕對建議前往 GitHub 並閱讀他們在 Wiki 上的文檔。

此外，Andrew Burgess 在他的 Tuts Premium 高級骨幹模式和技術課程中介紹了 Marionette。

---

骨幹網路驗證

Backbone.Validation 旨在填補一小部分問題：即模型驗證。 Backbone 有多個驗證擴展，但這個擴展似乎贏得了社區的最多尊重。

實際上，您不必為模型編寫validate 方法，而是可以為模型建立validation 屬性，該屬性是一個對象，指定您希望驗證的每個屬性以及驗證清單每個屬性的規則。您也可以為每個屬性指定錯誤訊息，並傳入自訂函數來驗證單一屬性。您可以看到下面的範例，該範例是根據其網站上的範例之一修改的。

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

有無數的內建驗證器和模式可供您檢查，甚至還有一種方法可以使用您自己的全域驗證器來擴展列表。這個 Backbone 插件並沒有讓驗證變得有趣，但它確實消除了不添加驗證的任何藉口。請訪問他們的網站以獲取更多示例以及如何使用這個精彩工具的更深入說明。

---

Backbone.LayoutManager

Backbone.LayoutManager 就是為了讓 Backbone 的視圖變得更好。與 Backbone.Marionette 一樣，它引入了清理程式碼以防止記憶體洩漏，處理所有樣板文件，並只為您留下配置和特定於應用程式的程式碼。與 Marionette 不同，LayoutManager 特別關注視圖。

因為 LayoutManager 只專注於視圖，所以它可以比 Marionette 為視圖做更多的事情。例如，當您想要從外部檔案動態載入範本時，LayoutManager 能夠執行非同步渲染。

LayoutManager 也可以處理子視圖，儘管方式與 Marionette 非常不同。但無論哪種方式，它主要是配置，這使得事情變得非常簡單，並且消除了您需要做的 90% 的工作（如果您試圖自己實現這一切）。請看下面一個向視圖新增三個子視圖的簡單範例：###

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中文網其他相關文章！