javascript - 对于只能启动一次的 DOJO 小部件，最佳实践命名约定是什么？

Question

我使用 PascalCase 表示法 (CustomPanel.js) 为我的 DOJO 应用程序定义了一个自定义小部件

在我的应用程序中，我通常对小部件使用 PascalCase 表示法，这些小部件可以在应用程序中的多个点启动，并且可以同时存在更多 CustomPanel 类型的对象。

在下面的具体示例中，我需要为自定义小部件 PanelCustomer.js 创建一个类。此特定小部件在整个应用程序中只能仅启动一次。

我想听听您的意见:

• 由于此小部件只能在应用程序中启动一次，因此文件名称应为 panelCustomer.js (camelCase) 并像 new panelCusotmer(); 那样启动？<
• 将小部件设计为单一对象是否有意义？你能给我举个例子吗？
• 您知道更好的方法吗？

<小时/>

  define([
        'app/_Panel',
        'dojo/_base/declare',
        'dijit/_WidgetBase',
        'dijit/_TemplatedMixin',
        'dojo/text!./templates/PanelCustomer.html',
        'dojo/topic'
    ], function (
        _Panel,
        declare,
        _WidgetBase,
        _TemplatedMixin,
        template,
        topic
        ) {
        return declare([_WidgetBase, _TemplatedMixin, _Panel], {
            templateString: template,
            appType: 'PanelCustomer',
            id: 'panelCustomer',
            title: 'Customer',
            postCreate: function () {
                this.inherited(arguments);
                this._render();
            },
            _render: function () {
                this._addBtn = new Button({
                    id: 'addBtn',
                    label: 'Add',
                    onClick: function () {

                    }.bind(this)
                }, 'addBtn');
            }
        });
    });

Answer 1

就个人而言，我会使用 PascalCase 作为小部件名称，因为它们将用作构造函数，并使用驼峰命名法作为函数的名称。大多数 javascript 库也遵循此约定，这就是我推荐它的原因。

我现在想不出为什么 Widget 应该是单例的原因，但最终它实际上取决于您想要对应用程序执行的操作。

在您的情况下，您是尝试为整个应用程序实例化一次 PanelCustomer 还是为每个客户实例化一次？从您命名的方式来看，听起来每个客户应该一次。

如果您确实想创建一个单例，您所要做的就是在返回小部件之前初始化它。

    var PanelCustomer =  declare([_WidgetBase, _TemplatedMixin, _Panel], {
        templateString: template,
        appType: 'PanelCustomer',
        id: 'panelCustomer',
        title: 'Customer',
        postCreate: function () {
            this.inherited(arguments);
            this._render();
        },
        _render: function () {
            this._addBtn = new Button({
                id: 'addBtn',
                label: 'Add',
                onClick: function () {

                }.bind(this)
            }, 'addBtn');
        }
    });

    return new PanelCustomer();