Решение «Bundling» для HTML/JS?

Question

Я уверен, что кто-то скажет мне, почему это ужасная идея, но это может быть лучше, чем то, что мы продолжаем. Таким образом, все наши плагины были скопированы/вставлены в скрипт Master.js, который является кошмаром для обновления или сортировки. Большинство плагинов минитизированы (что хорошо), но я бы очень хотел взять идею связывания из .net/C#/aspx и реализовать что-то вроде этого, чтобы избавиться от этого файла Master.js. Копирование/вставка новые сценарии часто заморозить проект и почти все в нем устарел, - так вот моя сумасшедшая наука:

В Master.js, создать массив из всех сценариев, используемый:

var scripts = [ 
    'jquery-1.10.2.min.js', // jQuery v1.10.2 | 2005 (https://code.jquery.com/) 
    'jquery-migrate-1.2.1.min.js', // jQuery Migrate v1.2.1 | 2005 (https://code.jquery.com/) 
    'jquery-ui.min.js', // jQuery UI v1.10.3 | 2014-09-14 (https://code.jquery.com/) 
    'bootstrap.min.js', // Bootstrap v3.1.0 | 2014 (http://getbootstrap.com) 
]; 

и создать петля для добавления скриптов на странице:

for (var i = 0; i < scripts.length; i++) { 

    var link = 'MainJS/' + scripts[i]; 

    LoadJsCssFilePortal(link, 'js'); 

}; 

function LoadJsCssFilePortal(filename, filetype, callback) { 

    // if filename is a external JavaScript file 
    if (filetype == "js") { 
     var fileref = document.createElement('script'); 
     fileref.setAttribute("type", "text/javascript"); 
     fileref.setAttribute("src", filename); 

    }; 

    if (typeof fileref != "undefined") { 

     // add this script to the document 
     document.getElementsByTagName("head")[0].appendChild(fileref); 
    }; 


}; 

у меня также есть функция

function LoadAndRunPortalJS(url, callback) { 

     var script = document.createElement("script") 
     script.type = "text/javascript"; 

     if (script.readyState) { //IE 
      script.onreadystatechange = function() { 
       if (script.readyState === "loaded" || script.readyState === "complete") { 
        script.onreadystatechange = null; 
        callback(); 
       } 
      }; 
     } else { //Others 
      script.onload = function() { 
       callback(); 
      }; 
     } 

     script.src = url; 
     document.getElementsByTagName("head")[0].appendChild(script); 


}; 

который имеет встроенный в функции обратного вызова и называется такой

LoadAndRunPortalJS(link, function() { 
    // when done load next 
}); 

Вопрос заключается в том, что сценарии не закончили загрузку до того

1. следующего приращения в контуре
2. другие сценарии на страницы, которые зависят от Master.js

Как правило, можно использовать объект отложенных jquery для обеспечения порядка/завершения сценариев, чтобы это могло возможно bly будет использоваться после загрузки первого скрипта (jquery) i> 0, но это не решит проблему скриптов, запущенных за пределами мастера.

Answer 1

Это домен загрузчиков/связок сценариев. Вы можете рассмотреть возможность использования RequireJS, Webpack для готовых решений. Если вы все еще хотите катиться самостоятельно, продолжайте читать.

Я бы заменить массив имен файлов у вас есть, с более гибкой структурой рода

var manifest = [ 
    {key: 'jquery', file: 'jquery-1.10.2.min.js'} 
    ... 
} 

Это должно обрабатывать любые будущие проблемы управления версиями, которые могут всплывающие окна (это будет). Структура массива также сохраняет ваш порядок загрузки (не рекомендовал бы такой метод).

Нагрузка на страницу будет загружена только манифест, описанный выше. Любые функции on load, которые вы хотите вызвать, должны быть отложены до загрузки скриптов. Я бы рекомендовал использовать метод, аналогичный тому, как его обрабатывают менеджеры объявлений (например, реклама Google).

var onBootloaderInit = [/* array of functions */]; 
.... 
onBootloaderInit.push(
    function() { 
     /* Code inside can now use jQuery or the likes */ 
    } 
); 

После загрузки закончена, вы теперь просто перебирать onBootloaderInit массива и выполнять каждую функцию.

Чтобы убедиться, что сценарии загружены в требуемом порядке и ждут сценариев, которые были поставлены в очередь, используйте загрузчик сценариев (пример: LABjs).

$LAB.script('<path to jQuery>').wait(function() { 
    /* Code that depends on jQuery */ 
});