2

Допустим я пишу сайт с четырьмя страницами. На этих страницах есть одинаковый функционал (одинаковый JavaScript), но и есть отличия.

Как правильно организовать код? Можно ли запихнуть все в один файл? И как вешать обработчики, например на кнопки, если на одной странице они есть, а на другой нет?

3
  • 3
    Сейчас прибегут гуру-ангулярщики, поэтому у нас мало времени =) Вкратце - на сайте с 4 страницами можно не париться и запихивать все в один файл. Ничего страшного, что на странице где нет кнопки будет висеть обработчик нет.
    – xaja
    25 сен 2015 в 10:19
  • Весь свой функционал разместите в одном файле. Назначьте одну функцию инициализации. В ней сделайте проверку url'а загруженной страницы. И в зависимости от него запускайте те или иные функции/компоненты.
    – Visman
    25 сен 2015 в 11:12
  • Грубо говоря: если это страница 1 то инициализировать скрипт 1? Правильно? 25 сен 2015 в 11:18

3 ответа 3

3

Надо вызывать только тот код, который относится к данной странице.

Скрипты можно объединить в 5 файлов (общий, плюс по одному для страницы), либо в один файл. Вообще, это решается по числу скриптов.

var app = {};

(function () {
  app.utils = app.utils || {};

  app.utils.doSmth = function () {
    // ...
  }
})(app);

(function () {
  app.page1 = {
    init: function () {
      // ...
    }
    // ...
  }
})(app);

// ...

И где-то на странице

<script>app.page1.init();</script>
2
  • Большое спасибо. Не могли бы вы подсказать литературу или источники на эту тему? 25 сен 2015 в 11:07
  • @АнатолийСивенко, например, это: largescalejs.ru/module-pattern
    – Qwertiy
    25 сен 2015 в 11:08
0

Посмотрите в строну require.js- загрузчик модулей. С ним очень просто будет организовать код, это как наполнять коробки : каждой коробки - свои шарики, где шарики это ваши js файлы, а коробки - это странички. Require тут выступает в роли того, что эти коробки наполняется

Вот тут документация

-1

Растусовываешь весь свой код по функциям, собираешь в один файл, и в html уже подключаешь его как скрипт и вызываешь только необходимые тебе функции. Вешать на событие можно по разному например на jquery

$(document).ready(function() {
    $("#buttonSave").click(function(){
        alert("Hello World!")
    })
})

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.