Как разделить код JavaScript на несколько файлов и использовать их, не включая их через тег script в HTML?

#javascript

#javascript

Вопрос:

Я широко использую конструкторы (классы) и хотел бы, чтобы каждый конструктор находился в отдельном файле (что-то вроде Java). Предположим, у меня есть конструкторы, скажем, Class1, Class2, … Class10 и я хочу использовать только Class1 и Class5, мне нужно использовать теги script для включения Class1.js и Class2.js на HTML-страницу. Позже, если мне также понадобится использовать Class3 и Class6, мне снова нужно перейти на страницу HTML и добавить теги script для них. Обслуживание при таком подходе слишком низкое.

Есть ли в JavaScript что-то похожее на директиву include C? Если нет, есть ли способ эмулировать это поведение?

Комментарии:

1. «без включения их через тег script в HTML» — Невозможно ( XMLHttpRequest ?)

2. @Shaz Я имею в виду, что я включаю только один файл, скажем main.js и он загружает все необходимые файлы.

Ответ №1:

Вы можете использовать jQuery.getScript:

http://api.jquery.com/jQuery.getScript

Или любой из многих загрузчиков javascript, таких как YUI, JSLoader и т.д. Смотрите сравнение здесь:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

Комментарии:

1. 1 Использование хорошего загрузчика позволяет вам заранее запрашивать ресурсы и знать, когда они будут доступны.

Ответ №2:

Вы можете использовать что-то вроде этого:

 jsimport = function(url) {
    var _head = document.getElementsByTagName("head")[0];         
    var _script = document.createElement('script');
    _script.type = 'text/javascript';
    _script.src = url;
    _head.appendChild(_script);
}
  

затем используйте это в своем коде, например:

 jsimport("example.class.js");
  

Будьте осторожны, используя это, когда head уже есть в DOM, иначе это не сработает.

Ответ №3:

Да: Вы можете создавать script теги из JavaScript и загружать необходимые классы по запросу.

Смотрите здесь несколько решений:http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html

При тщательном использовании id атрибутов или глобальной переменной, которая содержит «уже загруженные» скрипты, должно быть возможно разработать платформу разрешения зависимостей для JavaScript, такую как Maven или OSGi для Java.

Ответ №4:

Когда мы говорим о JavaScript, я чувствую, что лучше включить один файл, который содержит все, что вам нужно, вместо того, чтобы запрашивать новый файл каждый раз, когда вам нужно что-то, к чему у вас в данный момент нет доступа.

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

То, что вы хотите сделать, не соответствует духу JavaScript. Выполнение того, что вы объясняете, приведет к увеличению времени загрузки, и вы не сможете ничего сделать, пока файл не загрузится полностью, что создает время ожидания.

Для этого было бы лучше использовать один файл, включить во внутренний конец </body тега (который не заставит браузер ждать, пока скрипт завершит загрузку страницы), затем создать одну простую функцию, которая будет выполняться, когда страница будет полностью загружена.

Например:

 <html>
     <head></head>
     <body>
          <!-- HTML code here... -->
          <script src="javascript.js"></script>
          <script>
               (function r(f) {
                    /in/.test(document.readyState) ? setTimeout('r('   f   ')', 9) : f()
               })(function() {
                       // When the page has completey loaded
                       alert("DOM has loaded and is ready!");
               });
          </script>
     </body>
</html>
  

Комментарии:

1. Я буду использовать эту систему в среде разработки. При запуске материала в производство я объединю все файлы в один файл.

Ответ №5:

вы можете включить один js-файл в другой js-файл, выполнив что-то подобное в начале вашего js-файла:

  document.write("<script type='text/javascript' src='another.js'></script>");
  

Ответ №6:

Лучшим подходом в вашей ситуации является использование какого-либо компилятора. Лучший из них — Google Closure Compiler. Это часть библиотеки закрытия Google, которая имеет структуру, аналогичную той, что вы описали.