Backbone.js 中的命名空间

Posted 2023-02-23

【中文标题】Backbone.js 中的命名空间

【英文标题】：Namespacing in Backbone.js

【发布时间】：2012-08-27 19:57:56

【问题描述】：

我很困惑如何在 Backbone.js 中实现命名空间。我一直在全球范围内创建我的模型、集合和视图。命名空间是否只是在模型、集合和视图类和对象前面添加 App. 和一行 window.App = ;？

这似乎可行，但这种方式是否被认为是最佳做法？如果没有，有什么更好的方法？

我还在某处见过App = App || ;。拥有|| 的目的是什么？

尝试命名空间 // 命名空间 window.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 );

【问题讨论】：

App = App || 基本上说“如果App 是undefined，则创建一个空对象。”

@Nyxynyx 通常是为了方便:)。当一个页面上有多个应用程序时，您可以使用应用程序名称轻松找到应用程序的模型所在的位置

【参考方案1】：

你最好使用命名空间函数来创建或更新命名空间对象，例如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;

用途如我上面所说。

【参考方案2】：

javascript 不支持命名空间。您的方法相当于将主干对象嵌套在全局 App 对象中。这与 JavaScript 中的命名空间差不多。请参阅 ahren 关于初始化语法的评论。

【参考方案3】：

在 JS 中使用命名空间被认为是最佳做法，请继续这样做。 如前所述，使用辅助函数而不是“手动”命名空间，如果更好的话。我使用的命名空间函数，如果here。 App = App || ; - 执行以下操作。如果 App 未定义（未初始化，第一次使用）||运算符返回false，因此，应用第二条语句，App 变量用空对象初始化。