5

私は永遠にjavascriptを無視してきました。私は数年前にjQueryを使い始めたので、うまくいくことができました。しかし、私はTDDをもっとやり始めたので、昨日、本当にjavascriptに飛び込むことに決めました（その後、おそらくコーヒースクリプトも）。

私の ASP.NET Web フォーム アプリケーションには多くのページがあり、現在、それらのページのほとんどには大量の JavaScript がありません。私はそれを変更している最中です。テストを作成するために Jasmine と Chutzpah を使用しています。

期待どおりにテストが成功したり失敗したりしながら、私は動いていました。しかし、グローバル空間全体を踏みにじらないように、名前空間を作成したいと考えました。

この記事を読んだ後: http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/

この記事の自己実行匿名関数: パート 2 (パブリックとプライベート) セクションのパターンを試して使用することにしました。最も柔軟性があり、物事を非常にうまくカプセル化しているように見えます。

/Scripts というフォルダーがあります。そのフォルダーの下には、jQuery、jasmine、(twitter) ブートストラップ、modernizr など、私が使用しているフレームワークがいくつかあります。/Site というサブフォルダーもあり、サイトのコードをページに基づいて複数のファイルに配置しています。(product.js、billing.js など)

/Scripts/Site の下に、ファイル (product_test.js、billing_tests.js など) を含む /Tests (または Specs) にサブフォルダーを追加しました。

名前空間がなくても、すべて問題ありません。padLeftヘルパー関数で作成した utility.js ファイルがあります。次に、そのグローバル padLeft を別の .js ファイルで使用しました。私のテストはすべてうまくいき、私は幸せでした。次に、名前空間を把握することにし、Scripts/Site/utility.js を次のように変更しました。

(function (myns, $, undefined) {
    //private property
    var isSomething = true;

    //public property
    myns.something = "something";

    //public method
    myns.padLeft = function (str, len, pad) {
        str = Array(len + 1 - str.length).join(pad) + str;

        return str;
    };


    //check to see if myns exists in global space
    //if not, assign it a new Object Literal
}(window.myns= window.myns|| {}, jQuery ));

次に、 Scripts/Site/Tests/utility_test.js に

/// <reference path="../utility.js" />

describe("Namespace myns with public property something", function () {
    it("Should Equal 'something'", function () {
        expect(myns.something).toEqual('something');
    });
});

この非常に単純なテストでは、myns.something が「something」という文字列値で返されることを期待していました。

そうではありません。undefinedが返されます。

では、複数のファイルで javascript 名前空間を使用するにはどうすればよいですか?

長い導入で申し訳ありませんが、私がこのようにする理由を説明するのに役立つかもしれないと考えました. また、このセットアップが完全に間違っているか、部分的に間違っているかなどについてのアイデアを聞くことができるので、これらすべてを入れました。

この質問を読んでくれてありがとう。

更新: 解決済み ご協力いただきありがとうございます。最も助けになったのは、コメント投稿者の @TJ Crowder です。私は jsbin ツールが存在することを知りませんでした。上記のコードがツールに挿入され、結果が正しいことを確信した後、自分の環境で何かがおかしいことに気づきました。

受け入れられた回答のリンクも私を大いに助けてくれました。構文とロジックが一貫して機能していることを確認した後、自分のセットアップの何が問題なのかを判断する必要がありました。jQueryを渡したのは私だったと言うのは恥ずかしいですが、これを機能させようとしていたテストハーネスでは、実際にはjQueryを使用していませんでした。これは、モジュールが実際にはロードされていないことを意味していました。したがって、myns は設定されませんでした。

みんな、ありがとう。うまくいけば、これは将来誰かに役立つかもしれません。上記を使用する場合は、必ず jQuery オブジェクトを含めてください。もう 1 つのオプションは、jQuery を渡さず、param リストから $ を削除することです。

4

2 に答える 2

1

名前空間宣言を関数呼び出しの外に置いてみてください。

myns = window.myns || {};
(function(myns, $, undefined) {
    ...
}(myns, jQuery));

既存の構文は完全に有効であるように見えますが、その行を分割すると、変数のスコープで何が問題になっているのかを理解するのに役立つ場合があります。

于 2012-04-17T13:04:18.543 に答える
0

Javascript には名前空間がありません。変数のスコープに問題があると思いますが、これは他の言語と似ています。あなたが話しているのはオブジェクトです。あなたが使用することができます

window.myns.something

最初の関数は既にオブジェクトをウィンドウ オブジェクトに追加しており、ウィンドウ オブジェクトはどこからでもアクセスできます。

于 2012-04-17T13:02:37.373 に答える