12

Browserifyとドキュメント準備完了イベントの使用に苦労しています。ドキュメント準備完了イベントが発生した後にのみ利用可能なコンテンツをエクスポートするモジュールを作成するにはどうすればよいですか? そのようなモジュールに依存するにはどうすればよいですか?

私の最初の刺し傷は、module.exports を非同期に設定しようとすることでした-そのままでは失敗しました。これに対する私の次の刺し傷は、モジュールがコールバックを受け取った関数を返し、ドキュメントの準備が整ったときにコールバックを呼び出すことでした。3 回目の試行で promise が返されました。これにより、依存モジュールとその依存関係 (およびそれらの依存関係、タートルまで) もこのパターンを活用する必要があるため、依存モジュールはあまりモジュール化されないように思われます。

Browserify とドキュメント準備完了イベントを使用するための適切なパターンは何ですか?

4

5 に答える 5

17

これを試して：

var domready = require("domready");

domready(function () {
    exports.something = /* whatever you want */
});

domreadyパッケージをダウンロードする必要があります。

npm install domready

次に、browserify を使用します。

browserify input.js -o output.js

はい。それはとても簡単です。

と の 2 つのファイルがあるlibrary.jsとしmain.jsます。

// library.js

var domready = require("domready");

domready(function () {
    exports.test = "Hello World!";
});

// main.js

var library = require("./library");
var domready = require("domready");

domready(function () {
    alert(library.test);
});

メインの domready 関数を登録する前にライブラリを必要とする限り、ライブラリをシームレスに使用できるはずです。

関数に設定したい場合がありますmodule.exports。その場合、次のハックを使用できます。

// library.js

var domready = require("domready");

module.exports = function () {
    return exports._call.apply(this, arguments);
};

domready(function () {
    exports._call = function () {
        alert("Hello World!");
    };
});

// main.js

var library = require("./library");
var domready = require("domready");

domready(function () {
    library();
});

この_callプロパティは決して特別なものではないことに注意してください。

于 2014-06-12T17:04:06.680 に答える
3

通常、アプリケーション全体を起動する 1 つのマスター ファイルがあるため、ready コールバックで単純にラップできます。とにかく、ドキュメントの準備が整う前に何かをしても意味がありません。確かに、DOM 操作を行うすべてのファイルで関数を返すことはできますが、それはすぐに混乱してしまいます。

document.addEventListener('DOMContentLoaded', function () {
    var app = require('./app');
    // ...
});
于 2014-06-12T17:28:35.707 に答える
1

これは 1 つのプロジェクトで機能しますが、常に機能するかどうかはわかりません。

スクリプトを次のように配置し<script src="/path/to/main.js"></script>ます</body>。

になるファイルでbrowserify the-file.js -o main.js。

// the-file.js:

var $ = require("jquery");

//......

window.$ = $;  // window is the global object in browsers
$(document).ready(function(){
    // all the old things here ....
});

別の方法が良いかもしれません：

// the-file.js:

var $ = require("jquery");

//......

(function($){

    $(document).ready(function(){
        // all the old things here ....
    });

})($); // Anonymous function get called with $.
于 2016-05-27T13:03:18.233 に答える