Браузеру и документу?

Я боюсь использовать Browserify и документы, готовые. Как создать модуль, который экспортирует контент, доступный только после того, как событие готовности документа прошло? Как я могу зависеть от такого модуля?

Мой первый удар состоял в том, чтобы попытаться установить module.exports асинхронно - выходить из строя из коробки. Мой следующий поступок в этом случае заключался в том, чтобы модуль возвращал функцию, которая выполняла обратный вызов, и вызывала обратный вызов при готовности документа. Третья попытка вернула обещание. Это, по-видимому, делает зависимые модули не очень модульными, поскольку теперь зависимые модули и их зависимости (и их, черепахи полностью вниз) также должны использовать этот шаблон.

Какая хорошая модель для использования событий в браузерах и документах?

Ответ 1

Попробуйте следующее:

var domready = require("domready");

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

Вам нужно загрузить пакет domready:

npm install domready

Затем просто используйте браузеру:

browserify input.js -o output.js

Да. Это просто.

Учтите, что у нас есть два файла: 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 не является особенным.

Ответ 2

Вместо того, чтобы прослушивать готовое событие, вы можете поместить свой пакет браузера в отложенный тег script:

<script src="bundle.js" defer></script>

Это позволяет полностью удалить готовый обертку, так как пакет не будет выполнен до загрузки DOM.

К сожалению, поддержка defer patchy, и я не рекомендую ее, если вам не нужно поддерживать IE < 10. Рассмотрите этот ответ один на будущее, поскольку поддержка браузера для него растет.

Ответ 3

Обычно у вас есть один главный файл, который запускает все приложение, поэтому вы можете просто обернуть его в готовый обратный вызов. Не имеет смысла ничего делать, пока документ не будет готов в любом случае. Конечно, вы можете вернуть функцию в каждом файле, который выполняет манипуляции с DOM, но это быстро превратилось в беспорядок.

document.addEventListener('DOMContentLoaded', function () {
    var app = require('./app');
    // ...
});

Ответ 4

Это работает для меня в одном проекте, не уверен, что он может работать всегда.

Поместите script, например: <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 $.