Лучшая практика для включения Javascript и concatenate

Question

У меня есть проект среднего размера, и я хочу разделить мой довольно длинный файл javascript на несколько подмодулей. Впоследствии я хочу объединить все мои js-файлы с gulp.js, а также их минимизировать.

Я также предпочел бы не использовать задачу просмотра для конкатенации моего js каждый раз, когда я его редактирую, а использовать отдельные модули js во время разработки и для развертывания. Я бы хотел запустить свою задачу concal для gulp. (https://www.npmjs.com/package/gulp-concat)

Моя установка для моего вопроса:

У меня есть все мои JS охватываютса в document.ready (я использую JQuery). Для простоты предположим, что у меня есть три функции, содержание не имеет значения. Я хотел бы распространить эти 3 функции на 3 отдельных файла .js.

$(function() { 
    function myFunction1(){} 
    function myFunction2(){} 
    function myFunction3(){} 
} 

То, что я хотел бы иметь:

main.js:

$(function() { 
    // load function1.js 
    // load function2.js 
    // load function3.js 

} 

и весь отдельный functionX.js

Используя глоток конкатенировать Я хотел бы закончить с кодом в начале (все в одном файле и надлежащим образом охвачены $(function() {}

Теперь, во-первых, я не знаю, как загрузить функции в это, так что во время разработки у меня есть полный функциональный код, просто включив my main.js и не конкатенируя. Возможно ли это?

Я пытался использовать

$.getScript("function1.js", function(){ 
}); 

, но после того, как конкатенации - не к моему удивлению - это так и осталось, как это было.

Так есть ли другой способ достижения этого?

Или лучше было бы написать 3 разных functions.js, все со своими $(function() {}) и после конкатенации у меня есть эта часть 3 раза? Хотя я бы просто включил все файлы во время разработки в свой html?

Было бы здорово услышать ваши мысли об этом и как работать с модулями js, не повторяя никакого кода.

Большое спасибо.

Answer 1

Хорошо, я только что разговаривал с другим разработчиком, и мы в основном сказали мне следующий путь путь:

• писать различный .js файлы с различными модулями (мое собственное разделение кода для лучшего обслуживания)

• все из них, включая их собственные немедленно invokin функции выражения, запрещающих проблемы области действия и их document.ready функции

  (function ($) { // iief = Immediately-Invoked Function Expression, mainly useful to limit scope 
      $(function() { // Shorthand for $(document).ready() 
      // whatever code 
      }); 
  }(jQuery)); 
  

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

• использовать функцию CONCAT sourcemap по-прежнему видеть исходные файлы с правильными номерами строк и т.д. (Sourcemaps)

• включает all.js (связанный один)

• Minify в конце для постановки и развертывания

• и использовать if($('.selector').length){}, чтобы проверить, если код должен быть выполнен в зависимости от существования селектора

Итак, именно так я следую прямо сейчас. Мне бы хотелось услышать ваши мысли об этом. Cheers