организация кода javascript / jquery

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

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

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

потому что природа кода Javascript для веб-страниц такова, что по существу все происходит в циклах событий,большинство программы довольно маленький. Наверное большой кусок работа-это код, который инициализирует все обработчики. Когда вы собираете веб-сайт приложения со многими страницами, у вас есть выбор:

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

или

• сбор и стандартизация поведения для всех ваших страниц в единый глобальный механизм

Я пережил оба, и второй способ определенно лучше, но у него есть свои проблемы. Вы должны оставаться в курсе событий и убедиться, что особые случаи не приводят к кровотечению кода в ваши источники HTML (или JSP). Кто-то должен иметь дело с проблемами производительности кода сценария site-global, пытающегося применить себя к каждой странице. И, конечно же, у вас начинает расти чудовищная функция инициализации.

что спасает меня от ада обслуживания на что-то вроде этого, это шаг сборки, который сочетает в себе отдельные файлы скриптов (по одному на страницу "функция", более или менее, плюс пользовательские плагины jQuery) в один монолитный скрипт для фактического развертывания на сервере. Я сделал это с Freemarker, но есть много других способов сделать это. Приятным побочным продуктом такого шага является то, что пришло время запустить YUICompressor.

Я должен поддержать ответ Питера Бейли в том, что лучше держать ваши M V и C отдельно. Я нашел лучший стиль для виджетов GUI - создать функцию, которая инициализировала виджет (создание HTML, добавление стиля или прикрепление событий анимации), а затем прикрепление таможни обработчики событий для разных мест, где он используется.

пользовательские события ключ для повторного использования виджетов. Это делает код менее хрупким для изменений DOM в вашем виджете GUI и делает ваш код более читабельным.

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

<div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div>

Предположим, ваш код инициализации добавляет некоторые затухания или что-то еще, используя события щелчка. Это не имеет значения.

интересный бит, когда вы хотите использовать эту кнопку; к какому div вы прикрепляете событие "click"? вместо того, чтобы знать структуру вашего виджета, было бы лучше просто создать новый тип события для виджета. Вот так:

$('#MyButton_Instance1').bind('myclick', function () {...} );

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

чтобы сделать эту работу все, что вам нужно сделать, это добавить некоторые привязки/триггеры, которые прокси фактическое событие для вашего пользовательского события. Лучшее место для этого - код инициализации виджета:

$('.MyButton').myButton();

здесь

myButton = function () {
    $(this).find('.button-helpful-wrapper').bind('click', function (event) {
        $(this).trigger('myclick', event);
    });
}

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

во-первых, вы можете использовать подход к объектному стилю, методы над функциями

пример

var User = {
    loggedin : false,
    name : "Robert PItt",
    id : 45
}

и вы можете создать системный элемент в js-файле, например

if(typeof System == undefined)
{
    System = new Object();
}

System.Globals = 
{
   //Some Global Settings,uri's etc in here
}

System.Gui = {
   Init : function()
   {
      if(User.loggedin == true)
      {
          this.RemoveItem("#userlogin");
      }
   },
   RemoveItem: function(form)
   {
       $(form).remove();
   }
}

System.Gui.init(); //Within head maybe/

Как вы можете видеть, вы можете создать несколько "контейнеров" для хранения ваших методов, контейнеры могут быть полезны для организации вашего кода и разделения его одновременно, вы можете создавать вдоль GUI такие вещи,как Ajax,инструменты,безопасность, обратные вызовы и так далее.