0

私は新しいページのためにいくつかの構造を始める方法を理解しようとしています。

このページは「Orders」と呼ばれ、今のところ「OrdersTab」と「TasksTab」の2つのタブがあります。

私は次のようなレイアウト設定を持っています：

//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を使用して関数を作成するだけです。たぶんそれはOKで標準ですが、私は知りたいだけです。

4

1 に答える 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 に答える