0

情報

特定のファイルを含めて、オブジェクトに簡単に追加するさまざまな方法でグローバル変数に追加できるサイトを構築しようとしています。つまり、ファイルをインクルードするだけで、このページは hutber オブジェクトのすべてにアクセスできるようになります。

コアhutber.js

var hutber = {};

(function ($) {
    "use strict"; //For good development standards :)

    hutber.init = function(){

    };
    hutber.init();
})(jQuery);

余分なビットhuber.form.js

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});

問題

クロージャー内では as it にhutberアクセスできないことを認識しています。hutber.formでは、これらを自己実行関数から取り出さずに、どうすれば にhutberアクセスできますhutber.formか? それとも、これはこれにアプローチするための完全に間違った方法ですか?

4

5 に答える 5

4

hutber.formいいえ、グローバルなのでアクセスできますhutberが、問題はタイミングです。

関数が実行される前に init()が実行された場合、hutber.form関数は存在しません。すべての「アドオン」がロードされているため、init を実行することはできません。

補足: 2 番目のものは、 がないため実行されません(jQuery);。

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});  <-- missing  (jQuery); so it is not going to do anything

少しデモを実行して、何が起こるかを確認してください。

var myObj = {};

(function(){

    myObj.init = function(){
        alert("init");
        try{ //will fail since bar has not loaded yet
        myObj.bar();
        } catch(e){ alert("failed calling bar"); }
    };
    //call init before bar is loaded
    myObj.init();
})();


(function(){

    myObj.bar = function(){
        alert("bar");
    };
})();

//call init after bar has been loaded
myObj.init();

上記コードのjsFiddle

これを実行すると、bar がロードされていないため、最初に呼び出されたときに init が失敗することがわかります。メソッドが追加されてから 2 回目は機能します。そのため、init がロードされた「モジュール」に依存している場合、init メソッドを呼び出すために、いつロードされたかを知る必要があります。

于 2013-01-18T22:17:01.000 に答える
1

私はあなたがこれを望んでいると思います：

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>
<script> hutber.init(); </script>
于 2013-01-18T22:20:09.107 に答える
0

あなたはこれを間違った方法で見ているかもしれません。

すぐに呼び出される関数が機能を構築するための間違った方法であるとは言いません...

ただし、私が言っているのは、関数内から直接参照しているグローバルに利用可能なオブジェクトがあるということです...

を割り当てると、グローバルにアクセスできるためhutber.form = {};、グローバル スコープの全世界のすべてが にフル アクセスできます。hutber.formhutber

次のように行った場合と実際には何の違いもありません。

//form.js
hutber = hutber || {};
hutber.form = { /* ... */ };

へのパブリックアクセスに関してhutber.form。

クロージャーは、返さないものと、外部スコープのオブジェクト/配列/変数に割り当てないものをカバーします。

したがってvar mySecretIdentity = "Jerry O'Connell";、クロージャーの内部にある場合、内部のメソッドのみhutber.formがアクセスできますmySecretItentity...

...しかし、繰り返しますが、次のようにして同じことを達成できます。

// form.js
hutber = hutber || {};
hutber.form = (function () {
    var mySecretIdentity = "Jerry O'Connell";

    return {
        submit : function () {},
        clear  : function () {},
        validate : function () {}
    };
}());

そして今、プライベートなものはすべて、クロージャ内に記述された関数によってのみ直接アクセスできます。

繰り返しになりますが、「解決しようとしている問題は何ですか?」ということになります。

于 2013-01-18T22:30:12.493 に答える
0

hutber をグローバル変数として定義した方法を見ると、「フォーム」プロパティは、すぐに呼び出される関数式内で確実にアクセスできます。

于 2013-01-18T22:18:39.533 に答える
0

<script>@Sime Vidasが言及したように、タグの順序は重要です。

次の順序で行います。

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>

jsFiddleのスクリプトを変更しました。window.variable を使用して、グローバル変数について明示するのが好きだということにお気付きでしょう。必要に応じて、コアの hutber.js ファイルに init 関数をすぐに起動させます。

//core hutber.js 
window.hutber = {}; // Explicit Global Variable

(function ($) {
    "use strict"; //For good development standards :)

    window.hutber.init = function(){
      alert('init fired');  
    };

    window.hutber.init(); // You can fire this anywhere since you set it on a global variable...
})(jQuery);

//Extra bits hutber.form.js
(function ($) {
    "use strict"; //For good development standards :)
    window.hutber.form = {prop: "hello im a form"}
    alert('window.hutber.form is now' + window.hutber.form.prop);
})(jQuery);
于 2013-01-18T22:42:52.923 に答える