Структура файла Javascript для веб-приложения - PullRequest
Новая
       7

Структура файла Javascript для веб-приложения

1 голос
/ 03 января 2011

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

Вот что я сейчас делаю:

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

<div id="calendar">
</div>

...

<div class="description" name="description[0]">
</div>

etc.

, а затем я заполняю его при загрузке страницы, используя функции Javascript (которые также будут вызываться позже при действиях пользователя).

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

$('#current-view li a').click(function() { ... });

$('#save-form-button').click(function() { ... });

$('.employee-name').focus(showAutoComplete);

$('input, textarea').attr('spellcheck', false);

Весь мой файл представляет собой длинный список подобных вещей.Это способ, которым структура другого разработчика является веб-приложением?Я в основном учу себя, поэтому у меня нет кода для сравнения.

И еще одна вещь, которую я удивляюсь, - проще ли сделать что-то вроде этого: 

$('#current-view li a').click(function() { *set the current tab* });

$(document).ready(function() { $('#current-view li#'+last_active_tab+' a').click(); });

или где определена отдельная функция, такая как selectView, а затем: 

$('#current-view li a').click(selectView);

$(document).ready(function() { selectView.apply($('#current-view li#'+last_active_tab+' a')[0]); });

Спасибо!

Ответы [ 2 ]

4 голосов
/ 03 января 2011

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

Компонент в вашем приложении должен использовать объектно-ориентированный подход.Компоненты пользовательского интерфейса могут быть представлены объектами, такими как «Календарь», которые могут иметь функции для добавления и удаления событий календаря.Каждый объект должен быть в своем собственном файле и может быть создан, возможно, несколько раз, или, возможно, как одиночный, когда документ будет готов.

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

Для пространств имен, компоновки объектов и инкапсуляции вы можете взглянуть на шаблон модуля Джастина Диаса, но Джонатан Снук против инкапсуляции, как это, поскольку он предотвращает наследованиеи затрудняет отладку, так как вы не можете проверить элемент (http://snook.ca/archives/javascript/no-love-for-module-pattern).

Лучшая статья, которую я нашел, о том, как создать иерархию объектов с объектами, для которых будет создано множество экземпляровраз ( с использованием прототипа объекта ) - Майк Косс (http://mckoss.com/jscript/object.htm). XML.com также имеет более простое введение (http://www.xml.com/pub/a/2006/06/07/object-oriented-javascript.html).

)
1 голос
/ 03 января 2011

Попробуйте применить MVC-подход к дизайну JavaScript с JavaScript MVC .Помимо более упрощенной структуры, вы получаете ряд других преимуществ , используя ее.

...