2

それが良い JavaScript プラクティスであるかどうかを知りたかっただけです。

初期化関数「init()」をすべて呼び出す多くの Web ページがあるとします。パターン内でIIFEを使用して、スクリプトがロードされるたびに関数を実行するのは正しいことでしょうか?

var foo = (function() {
    var bar = "something";

    (function init() {
        // Do something crazy that's gonna be the same across all my web pages
        // like adding an event listener or something
        // ...
        document.write('page init...');
    }());

    function privatePage1() {
        // This stuff is gonna be used only in page1.html via foo.privatePage1
        document.write('page 1' + bar);
    }

    function privatePage2() {
        // This stuff is gonna be used only in page2.html via foo.privatePage2
        document.write('page 2' + bar);
    }

    return {
        privatePage1: privatePage1,
        privatePage2: privatePage2
    }
}());
4

2 に答える 2

6

これはかなり主観的な領域ですが、これが私の見解です。

  • モジュールパターンを使用すると、コードの残りの部分に含まれている機能のセットを提供することになります。本質的にはミニライブラリです。

  • 一般に、ライブラリをロードするときに、ライブラリの内部に完全にある初期化手順（構成の設定、いくつかの必要なオブジェクトのインスタンス化など）を除いて、ライブラリが何もしないことを期待します-実際に影響を与えるものは何もありませんDOMまたはその他の方法で環境を大幅に変更します（これが、基本オブジェクトのプロトタイプを変更するDate.jsやPrototypeなどのライブラリに完全に慣れていない理由です）。

  • これにはいくつかの理由がありますが、主な理由は、単に依存関係を管理する以外に、ライブラリ/モジュールのロード順序について心配する必要がないことです。独立したモジュールは、相互に影響を与えるべきではありません。読み込み時にモジュール内のDOMを操作すると、遅かれ早かれ、コードの別の部分がDOMが特定の時間に特定の状態になることを期待していることに気付くでしょう。その時間の前後にモジュールをロードします。これは、モジュールをロードするスクリプトタグに本質的に隠されている余分な複雑さです。

  • ここでの他の問題は、移植性と適応性です。別のDOMセットアップを使用して、別のプロジェクトでモジュールを使用したい場合があります。init()特定のページの関数に別のDOM要素または構成変数を渡したい場合があります。自動で実行するinit()と、構成の機会が失われます。

したがって、私が一般的に行うことはinit()、返されたモジュールオブジェクトの属性としてメソッドを設定することです。

var foo = (function() {

    function init() {
        // Do something crazy that's gonna be the same across all my web pages
    }

    //...

    return {
        init: init,
        // etc
    }
}());

そして、必要に応じてコードの他の場所で呼び出します。

foo.init();

はい、これにより、すべてのページの初期化に余分なコード行が追加されます（ただし、これはおそらく他の1つのスクリプトであるため、追加される重みはすべて11文字です）。ただし、モジュールを初期化するタイミングをよりきめ細かく制御でき、後で必要だと（必然的に）判断したときに構成引数のフックを提供します。

于 2011-10-04T19:03:31.167 に答える
1

機能はinit()Web ページ間で同じですか? もしそうなら、これは私がすることです：

var foo = (function()
{
    init();
    return {};
}());

そうでない場合、IIFE を使用する理由がわかりません。元のコードを次のように単純化します。

var foo = (function()
{
    /* body of the original IIFE here */
    return {};
}());
于 2011-10-04T17:45:56.860 に答える