Как вы упорядочиваете свой Javascript-код?

Когда я только начинал с Javascript, я обычно просто добавлял все, что мне нужно, в функции и называл их, когда мне это нужно. Что было тогда.

Теперь, когда я создаю все более сложные веб-приложения с Javascript; пользуясь более гибким взаимодействием с пользователем, я понимаю, что мне нужно сделать мой код более читаемым - не только мной, но и тем, кто меня заменяет. Кроме того, я хотел бы уменьшить моменты "что, черт возьми, почему я сделал это", когда я прочитал свой собственный код спустя несколько месяцев (да, я честен здесь, у меня есть то, что, черт возьми, я сам думал, хотя я стараюсь избегать таких случаев)

Несколько недель назад я попал в Joose, и до сих пор это было хорошо, но мне интересно, что делают остальные, чтобы сделать свой код их кодами в значимые сегменты и читаемыми следующим программистом.

Кроме того, чтобы сделать его доступным для чтения, каковы ваши шаги в том, чтобы отделить HTML от логики кода? Предположим, вам нужно создать динамические строки таблицы с данными. Вы включаете это в свой Javascript-код, добавляя элемент td в строку или делаете что-либо еще. Я ищу решения и идеи реального мира, а не некоторые теоретические идеи, высказанные каким-то экспертом.

Итак, если вы не поняли выше, используете ли вы методы ООП. Если вы не используете то, что используете?

Ответы

Ответ 1

Для действительно JS-тяжелых приложений вы должны попытаться имитировать Java.

  • Как можно меньше JS в вашем HTML (желательно - просто вызов функции бутстрапа)
  • Разбить код на логические единицы, сохранить их в отдельных файлах
  • Используйте script, чтобы объединить/минимизировать файлы в один пакет, который вы будете выполнять как часть вашего приложения.
  • Используйте пространства имен JS, чтобы избежать загромождения глобального пространства имен:

 

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... };

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

Ответ 2

Я использую ненавязчивый javascript, поэтому вне тегов script я не сохраняю javascript в html.

Эти два полностью разделены.

Функция javascript запустится, когда дерево DOM будет завершено, которое пройдет через html и добавит события javascript, и все, что еще нужно изменить.

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

Итак, например, если у меня есть функции пользовательского интерфейса, я могу назвать их: myapp_ui_functions.js

Я пытаюсь поместить имя приложения в имя файла, если только не существует javascript, который является общим для нескольких проектов, таких как strings.js.

Ответ 3

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

$(function() {
  $("#delete").click(delete_user);
  $("#new").click(new_user);
});

где delete_user() и new_user() определены во внешнем файле.

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

Вам не нужен отдельный файл для каждой страницы. Это просто означает более ненужные внешние HTTP-запросы. С одним файлом, предполагая, что вы кэшировали его эффективно, он будет загружен один раз и что он (пока он не изменится).

Если у меня есть большое количество Javascript или сайт эффективно разделен на несколько областей, тогда я могу разбить Javascript, но это не часто бывает.

Кроме того, с точки зрения моего исходного кода, у меня может быть несколько JS файлов, но я часто объединяю их в одну загрузку для клиента (для сокращения HTTP-запросов).

Подробнее в Несколько файлов javascript/css: лучшие практики? и Надбавка Javascript в PHP.

Ответ 4

Я переписывал много своего многоразового кода в качестве плагинов jQuery. Когда я начал делать ASP.NET MVC, я перешел в jQuery из Prototype. Сверхурочная работа. Я много раз переработал свой многоразовый код или, по крайней мере, идеи, от OO-прототипов до плагинов jQuery. Большинство из них хранятся в своих JS файлах (в основном, в интрасети, поэтому скорость загрузки страниц довольно высока, несмотря на дополнительные запросы). Я полагаю, что я мог бы добавить шаг сборки, который объединяет их, если мне нужно.

Я также остановился на подходе MasterPage, который использует ContentPlaceHolder для скриптов, который находится непосредственно перед закрывающим тегом body. Стандартный пользовательский интерфейс jQuery/jQuery загружается, и любые другие распространенные JS идут прямо перед script заполнителем в MasterPage. У меня крошечный бит JS в верхней части MasterPage, который определяет массив, который содержит любые функции, которые частичные представления должны запускаться при загрузке страницы. Эти функции запускаются из базовой функции document.ready() в MasterPage.

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

Ответ 5

Кроме того, если вы хотите перейти на OO heavy, проверьте mochikit: http://www.mochikit.com/

Ответ 6

Я считаю, что разработка вашего javascript с использованием методологии OO - это путь, если вы хотите, чтобы он был чистым, читаемым и даже несколько безопасным. Я отправил следующий вопрос

Самый чистый формат для записи объектов javascript

И получил некоторые фантастические ответы о том, как хорошо писать код javascript. Если вы будете следовать этим основным принципам, вы можете легко использовать практически любую библиотеку, такую ​​как yui, jquery и prototype.