0

我试图弄清楚如何开始新页面的一些结构。

该页面名为“Orders”，现在将有几个选项卡：“OrdersTab”和“TasksTab”

我的布局设置如下：

//Namespace for the 'Orders' page.
var Orders = (function () {
    "use strict";
    var tabs = $('#OrdersTabs').tabs();
    var ordersTab = new OrdersTab();
    var tasksTab = new TasksTab();

    //Public methods:
    return {

    };
})(); //Load when ready.

我的意图是让 Orders 命名空间负责加载选项卡。我正在努力理解如何将我的 OrdersTab 和 TasksTab 保持在与 Orders 相同的“命名空间”中。理想情况下，另一个页面将无法实例化 OrdersTab。

//Namespace for the 'OrdersTab' from the 'Orders' page.
function OrdersTab() {
    "use strict";
    var ordersGrid = $('#OrdersGrid');
    var ordersGridPager = $('#OrdersGridPager');

    ordersGrid.jqGrid({
        url: '../Orders/GetOrders/',
        datatype: 'json',
        colNames: ['Name', 'Description'],
        colModel: [
            { name: 'Name', index: 'Name', sortable: false, width: 150 },
            { name: 'Description', index: 'Description', sortable: false, width: 300 }
        ],
        gridview: true,
        height: 'auto',
        rowNum: 10,
        pager: ordersGridPager,
        viewrecords: true
    });

    //Public methods:
    return {

    };
};

Orders 位于 Orders.js 中，而 OrdersTab 位于 OrdersTab.js 中。在我看来，一个新的 OrdersTab 可能是由其他人“意外”创建的，或者函数名称意外地变得模棱两可。是否可以将 OrdersTab 包含在 Orders 的“命名空间”中，同时将其保存在单独的文件中？我认为如果每个选项卡都比预期的大/允许将来引入其他选项卡，则需要单独的文件。

此外，我想知道是否可以在两个文件之间使用相同的设置结构。对我来说，我为 Orders 分配一个变量似乎很尴尬，但只是使用 OrdersTab 创建一个函数。也许这是可以的和标准的，不过，我只是想知道。

4

1 回答 1

1

有几种解决方案，从将所有内容都放在一个函数中（您不想这样做）到完全沙箱化每个模块，并为它们提供一个消息传递系统以相互通信（类似于 MacOS 的运行方式），无处不在.

一个快乐的媒介是在您的主要应用程序中构建一个加载系统：

var APPNAME = (function () {
    var load = function (name) { /* load name.js */ },
        add = function (name, implementation) { this[name] = implementation; };
        public_interface = {
            load : load,
            add : add
        };

    return public_interface;
}());

随意构建一个承诺系统或中介系统。使用这些，您可以触发应用程序内部的自定义事件，以处理依赖关系和初始化，以及所有其他操作。

然后，您将能够在其他文件中执行以下操作：

// module-1.js
APPNAME = APPNAME || {add: function () {}}; // the second part is to die without error
APPNAME.add("publiclyAccessibleName", function () { /* whatever you need it to be */ });

因此，在您的实际文档中，您只需要使用APPNAME.load("modulename");加载“modulename.js”，然后就可以像APPNAME.publicName您决定的那样访问它。

再一次，您可以进一步抽象... ...您可以有一个addPublic和一个addPrivate用于服务或模块。您可以将模块存储在隐藏对象中，而不是在公共对象上，您可以将其implementation用作构造函数，或用作另一个 IIFE 来返回另一个对象。

在高级沙箱中，您可能会将这些加载到一个modules对象中，然后当您初始化每个模块时，您可以将其初始化函数传递给可以访问的对象，例如您的 JS 库（jQuery/Dojo）和应用程序的消息传递系统.

为了真正被沙盒化，该系统对象将只是一个实例，而不是共享对象，因此篡改它只会将该模块封闭，而不是弄乱系统中的任何其他东西。

...当然，到这个时候，你真的，真的参与其中，这可以相对安全地扩展一个大型应用程序。

我不是说你应该走那么远。我要说的是，总是有更多，而且事情总是可以进一步抽象，以完成你需要做的事情。

我喜欢 JS。

于 2012-09-19T23:15:47.193 回答