Как в JavaScript правильно разнести единый код на несколько файлов (аналоги require и include из PHP)?

Question

[Роман]

Здравствуйте.

Хочу сейчас большой скрипт разнести на много маленьких, чтобы потом собирать их в одном (типа loader.js)

Ну, типа как в PHP это делают.

Или я слишком много хочу от JS?))

Буду рад любым советам как сделать такое структурирование кода по разным файлам.

Спасибо.

Answer 1

[Andrew]

Оно?

Comments

[Роман]

Ну, в общем-то да, но оно ведь не вполне совместимое будет с разными браузерами (ну,так пишут про es6), а всякие бабель и бебель в этом не помогут?

[Кирилл Кудрявцев]

Роман, не хотите транспилятор, используйте require.js

Answer 2

[coderisimo]

Можно и вот так Модули

Можно просто вынести в отдельный файл и подключить его куда надо. Для страховки в таком файле можно объявить объект и сделать функции его свойствами(методами). Так можно избежать ошибок с повторяющимися именами функций.

var person = {
  firstName: "John", // здесь могут быть  внутренние переменные
  lastName : "Doe",
  id       : 5566,

  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// и потом где надо
let name = person.fullName();

Comments

[Роман]

Ого! В объекте можно объявить функцию!? Вот это поворот!)))

Спасибо!

//то есть просто подключать в html последовательно эти файлы? Нет такого что можно в самом скрипте подключить еще один файл-скрипт?

[coderisimo]

Еще можно объявить функцию, которая будет возвращать этот объект и в эту функцию передавать некие параметры, например, урлы. Тогда объект с методами будет кастомизирован.

[coderisimo]

Роман, Можно и в скрипте . В наше время модно делать на сборщиках - там куча возможностей, но в небольших проектах ,имхо, можно использовать такую простую реализацию.

[Роман]

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

В общем, как я и написал: чтобы как в PHP))

И да, я уже понял, что это, судя по всему, невозможно, по крайней мере напрямую.

Спасибо.

[Роман]

Василий,

Еще можно объявить функцию, которая будет возвращать этот объект и в эту функцию передавать некие параметры, например, урлы. Тогда объект с методами будет кастомизирован.

а вам не очень сложно будет дать ссылку на пример подобного?

а то не очень понятно, когда просто словами))

[coderisimo]

Роман,
при разработке все и так будет в разобранном состоянии, а на проде один файл это хорошо. Запросов меньше, кэшированный файл работает быстро , он еще и минифицируется итд. Это же все не просто так развивается. Значит так ЛУЧШЕ ))). Просто , иногда весь сей зоопарк слишком уж большой и для каждого небольшого проекта городить весь огород представляется жутким геморроем )) .

[coderisimo]

Искать лень )) что-то вроде этого ....

function yo(url){

let fullUrl =  'www.' + url; // внутренняя, изолированная от внешнего мира переменная. 

// возвращаем объект с набором методов
return {
getData : function( fullUrl){
// здесь реализация ф-ции, которая будет использовать урл который мы передали  в ф-цию, которая вернула нам объект.
}
}
}
// потом в коде
let dataGetter = yo('ya.ru');
let dataGetter2 = yo('pornhub.ru');

// теперь мы имеем два модуля с нужными нам функциями, но у каждого может быть свой конфиг

dataGetter.getData(); // dataGetter  имеет внутри одни настройки
dataGetter2.getData();// dataGetter2  имеет внутри свои настройки

[Роман]

Василий, сходу не очень ухватил)) но это просто надо поприменять на практике))

Весьма благодарен!

Answer 3

[AVS85 S]

можно gulp'ом к примеру собрать все js в один файл

или другим сборщиком

Comments

[Роман]

мне наоборот разобрать нужно)))

то есть хочется, чтобы было так же удобно, как в PHP.