Modernizr.load Не рекомендуется. Да. js Устаревший. Текущие Альтернативы? - PullRequest
Новая
       73

Modernizr.load Не рекомендуется. Да. js Устаревший. Текущие Альтернативы?

1 голос
/ 28 апреля 2020

Modernizr.load и yepnope. js оба устарели. Как мы теперь условно называем файлы javascript? Не могли бы вы привести пример?

Это javascript, который я хочу загрузить 

var BubbleShoot = window.BubbleShoot || {};
BubbleShoot.Game = (function($){
var Game = function(){
    this.init = function(){
      $(".but_satart_game").bind("click", startGame);
    };
    var startGame = function(){
      console.log("dentro de startGame  en game.js");
      //$(".but_satart_game").unbind("click");
      //BubbleShoot.ui.hideDialog();
    };

  };
   return Game;
})(jQuery);

И код модернизатора: 

  Modernizr.load({
  load: "_js/game.js",
  complete: function(){
    $(function(){
      var game = new BubbleShoot.Game();
      game.init();
    })
});

1 Ответ

1 голос
/ 28 апреля 2020

Вы можете динамически добавлять сценарии на страницу с помощью document.createElement и добавлять их в DOM с помощью .async = true и вызывать функцию init() вашей игры из прослушивателя событий load сценария: 

function addGameScriptToPage() {

    const scriptElement = document.createElement('script');
    scriptElement.async = true;
    scriptElement.addEventListener( 'load', function( e ) { new BubbleShoot.Game().init(); } );
    scriptElement.src = '__js/game.js';
    document.head.appendChild( scriptElement );
}

Вы можете сделать его более обобщенным c, передав URL-адрес сценария в качестве параметра и вернув Promise для прослушивателя событий load, поэтому страницы, использующие эту функцию, могут иметь свои собственные пользовательские логи загрузки c: 

function addScriptToPage( scriptUrl ) {
    return new Promise( ( resolve, reject ) => {
        const scriptElement = document.createElement('script');
        scriptElement.async = true;
        scriptElement.addEventListener( 'load', function( e ) { 
            resolve( e );
        );
        scriptElement.addEventListener( 'error', function( e ) { 
            reject( e );
        );
        scriptElement.src = scriptUrl;
        document.head.appendChild( scriptElement );
    } );
}

Используется примерно так: 

async function doStuff() {

    const shouldLoadGame = prompt( "Would you like to play a game of global thermonuclear war?" );
    if( shouldLoadGame ) {

        try {
            await addScriptToPage( "__js/game.js" );

            // This code runs when the 'load' event listener calls `resolve(e)`.
            const g = new BubbleShoot.Game();
            g.init();
        }
        catch( err ) {
            // This code runs when the 'error' event listener calls `reject(e)`.
            alert( "Game failed to load." ); // 
        }
    }

}

... и это во многом похоже на то, как работает функция require() для загрузки модулей по запросу, кстати.

...