Backbone.js中的名称间距

Namespacing in Backbone.js

本文关键字：js Backbone      更新时间：2023-09-26

我很困惑我应该如何在Backbone.js中实现名称空间；全局视图。命名它们只是在模型、集合和视图类前面添加一个App.；对象和一条线window.App = {};？

它看起来是有效的，但这种方式被认为是最佳实践吗？如果没有，还有什么更好的方法呢？

我在某个地方也见过App = App || {};。拥有|| {}的目的是什么？

尝试使用名称间距//命名空间窗应用程序=｛｝；

// Models
App.Product = Backbone.Model.extend();
// Collections
App.ProductCollection = Backbone.Collection.extend({
    model: App.Product,
    url: '/wizard'
});
// Views
App.ProductListView = Backbone.View.extend({
    el: '#photo_list',
    initialize: function() {
        this.collection.bind('reset', this.render, this);
    },
    render: function() {
        this.collection.each(function(product, index){
            $(this.el).append(new App.ProductView({ model: product }).render().el);
        }, this);
        return this;
    }
});
// Snippet
App.productList = new App.ProductCollection();
App.selectedProductList = new App.SelectedProductCollection();
App.productListView = new App.ProductListView({ collection: App.productList });

最好使用名称空间函数，该函数将创建或更新名称空间对象，例如ns('App.Views.Homepage', Backbone.View.extend({...})。

关于。名称空间约定-为了您自己的方便，您可以使用您的文件系统结构。例如，UI/Homepage/View/Main.js将变为App.UI.Homepage.View.Main（如果您使用模块的话）。

或者，另一种简单的制作方法是简单容易地找到相关文件-基于功能创建结构，例如App.Backbone.Collection.Comments，从更通用到更具体，例如，您有一个应用程序，一个主干，其中有视图、模型、集合和路由器。每个模块中都有多个特定于您的用例的模块。

举个例子，这里有一个我使用的名称空间函数：

var ns = window.ns = function (nspace, payload, context) {
  payload = payload || {};
  context = context || window;
  var parts = nspace.split('.'),
    parent = context,
    currentPart = '';
  while (currentPart = parts.shift()) {
    if (parts.length !== 0) {
      parent[currentPart] = parent[currentPart] || {};
    }
    else {
      parent[currentPart] = parent[currentPart] || payload;
    }
    parent = parent[currentPart];
  }
  return parent;

用途如上所述。

JavaScript不支持名称空间。您的方法相当于将主干对象嵌套在全局应用程序对象中。这与JavaScript中的名称空间差不多。请参阅ahren关于初始值设定项语法的评论。

  1. 在JS中使用名称空间被认为是最佳实践，请继续这样做
  2. 正如人们所说，如果更好的话，使用helper函数而不是"手动"命名。我使用的名称空间函数，如果在这里
  3. App = App || {};-执行以下操作。如果App未定义（未初始化，第一次使用）||运算符返回false，则应用第二条语句，并使用空对象初始化App变量
相关文章：