Объединение файлов шаблонов JavaScript в один файл и использование их функций

Question

Я пишу разные файлы в JavaScript-модуле Patern следующим образом:

файл 1.js

var Module = (function (module) {

  module.function = function () {

    console.log(this.thirdFunction) // This is my issue. I cannot access the function from the third file because it is concatenated in a way that the function still not exist.  

  };

  return module;

}(Module || {}));

some-folder / file 2.js

var Module = (function (module) {

  module.somethingElse = function () {


  };

  return module;

}(Module || {}));

что угодно / файл 3.js

var Module = (function (module) {

  module.thirdFunction = function () {


  };

}(Module || {}));

Я положил все эти файлы в разные каталоги, имена в разное время. Затем я использую инструмент объединения, чтобы иметь один файл, а затем я использую его в своем HTML-файле. Но я сталкиваюсь с проблемой, которую не могу решить.

Чтобы все это работало, я должен включить их особым образом и для того, чтобы вызывать функции из всего, что мне нужно, и переупорядочивать файлы, когда что-то еще не определено / не создано в возвращенном конечном объекте. Если у меня будет 100 файлов и папок, это снова станет для меня проблемой.

Правильно ли я понимаю это: http://gruntjs.com/configuring-tasks, который у меня есть, чтобы вручную заказывать файлы, папки и все, что есть в моих заданиях?

Я не хочу использовать инструменты AMD, просто обычные файлы JavaScript и какой-то подход к взлому требований к заказу. Если для меня нет легкой идеи, я бы попробовал инструменты AMD, такие как require.js, но я не уверен, что эти инструменты могут помочь в решении этой проблемы. Я был бы признателен за некоторый инструмент grunt, некоторые соглашения об именах файлов / папок, за все, что не заставило бы меня устанавливать все больше и больше инструментов. Заранее спасибо!

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

Если я хочу изолировать код, но мне не нужно возвращать свойство объекта в конечном объекте, можно ли сделать что-то вроде этого:

файл 4.js

var Module = (function (module) {

 var someThing = Module.somethingElse() // from file 2.js
 and then using someThing here for clicking, DOM rendering, etc, etc 

}(Module || {}));

Это глупо придерживаться того же var Module условности для файлов, где я на самом деле ничего не возвращаю? Я просто думаю о том, как избежать имени объекта и использования this снова

Answer 1

Действительно, инструменты AMD были созданы именно для такой проблемы. Однако вы можете обойти это в некоторой степени с ворчанием. Вы можете просто упорядочить файлы, которые нужно сначала поместить в папку, и перечислить их в нужном вам порядке, а затем создать еще одну папку, содержащую все файлы, порядок которых не имеет значения, включая все.

'js/main/First.js',
'js/main/Second.js',
'js/rest/*.js'

Неважно, что вы выберете для этого проекта, вы можете заглянуть в Require.js или Browserify для дальнейшей работы.