Javascript 我尝试使用'；克罗克福德路'；但我有一些担心

我正试图找出如何开始一个新页面的一些结构

该页面称为“订单”，目前将有两个选项卡：“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创建一个函数，这似乎很尴尬。也许这是可以的，也是标准的，不过，我只是想知道。

有几种解决方案，从把你不想做的所有东西都放在一个函数中，到完全沙箱化每个模块，并给它们一个消息系统来相互通信（类似于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

。您可以将模块存储在隐藏对象中，而不是公共对象上，您可以使用

实现作为构造函数，或作为另一个iLife返回另一个对象

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

为了实现真正的沙盒，该系统对象将只是一个实例，而不是一个共享对象，因此篡改它只会将该模块封闭，而不会干扰系统中的任何其他内容

…当然，到目前为止，您已经非常非常投入，这可以相对安全地扩展大型应用程序

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

我喜欢JS的这一点。
你能不能不在不允许实例化的页面上包含OrdersTab.JS？从性能的角度来看，你无论如何都会想这样做，而且这似乎能解决你的问题。是的，我在写问题时意识到了这一点，但我想我会把它留给我，看看我是否能学到我做得不正确的任何东西。