Структура с кодом Javascript? CSS, Divs, а затем сценарии?

Question

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

Мой личный уклон заключается в том, что хороший код должен легко читаться снизу вверх.Так, например, в браузере может быть скрипт browse() внизу, чтобы начать просмотр, и остальные наркоманы, которые он использует для вершины в логическом порядке, поэтому после browse() его скрипт выше должен быть чем-то, что browse(),Значения полей должны быть определены вверху, я думаю, что такие вещи, как CSS и divs - грубая аналогия, которую я знаю.Но если браузер пользователя работает медленно, сценарий может вообще не выполняться и код кажется неработающим.Дилемма между практичностью и читабельностью.

Пожалуйста, определите такие термины, как кодирование сверху вниз и кодирование снизу вверх, и покажите структуру.

Answer 1

В голове поставьте CSS, затем скрипты в порядке использования и в теле Divs.

Пример, если вы используете jQuery и у вас есть файл .js, который использует код jQuery, рекомендуется импортировать файлы jQuery до вашего .js

Лично я стараюсь не помещать скрипты в тело и редко сталкиваюсь с такими проблемами, как скрипты, не находящие div ниже.

Answer 2

K-I-S-S моя догма. Когда мой код не работает, он обычно начинает работать, когда я убиваю не свойственный код. О некоторых хороших вещах рассказывается в таких ответах, как mwilcox и prodigitalson . Никаких ненужных картинок и лишних блоков скриптов. На самом деле, некоторые люди, кажется, имеют рабочий JS-код длиной более 500 000 строк, например, с Gmail . Я понятия не имею, как они это делают, но это намекает на критическое отношение к ответам здесь! Дальнейшие ответы могут рассказать о том, как спроектировать массивный JS-код, например, размером 100 000 строк.

Исключения

библиотеки и аналитические скрипты являются исключением и переходят к началу (если это вообще необходимо). Из-за такого рода беспорядков вы можете понять, почему термин structure сбивает с толку. Но для создания какой-то структуры это будет выглядеть примерно так:

1. CSS
2. Divs
3. сценарии в конце

Answer 3

Таблицы стилей идут первыми, а сценарии - позже. Причина этого заключается в том, что скрипты «блокируют», то есть браузер загружает JavaScript, но не загружает ничего другого - ни таблицы стилей, ни изображения.

Браузеры загружают только столько ресурсов одновременно и блокируют все остальные загрузки до тех пор, пока это количество ресурсов не освободится. IE8 на самом деле будет загружать довольно много одновременно, целых 18 или больше. Firefox и Safari будут загружать 6 одновременно, но IE6 и 7 будут загружать только один сценарий или два не-сценария одновременно. Следует помнить, что эти ресурсы не бесплатны, а сценарии различны.

Хорошее практическое правило - размещать таблицы стилей в голове, а JavaScript - в самом низу тела. Конечно, библиотеки JS дают вам возможность подключаться к DOM. Вы можете использовать это, как и большинство разработчиков, но есть побочные эффекты:

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

Если ваш JavaScript находится в конце страницы, вам никогда не придется беспокоиться о том, загружен ли материал или доступен DOM-узел. И страница будет отображаться и стилизоваться, пока ваш JavaScript загружается и вычисляется.

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

Answer 4

RequireJS - Аутсорсинговая загрузка скриптов

Я нашел RequireJS особенно полезным для разработки приложений JavaScript.В моем случае я имею дело с десятками файлов JavaScript (модулей), но я уверен, что это пригодится и в других случаях.

Библиотека обрабатывает много скучных вещей для вас.Все, что вам нужно сделать, это настроить некоторые файлы (main.js, опции сборки), установить зависимости модуля модуля, и вы готовы к работе.Он включает в себя систему сборки, так что вы можете легко выполнить отладку или производственную сборку (минимизированную).

В структуре приложения

Мне нравится кодировать "сверху вниз".Идея состоит в том, что более высокие уровни приложения должны быть определены очень свободно.Вы не должны видеть реальных алгоритмов, используемых для решения некоторых конкретных проблем.Наивысший уровень должен быть связан с соединением частей приложения.Нижние уровни решают более конкретные проблемы, пока не дойдут до конкретных реализаций.

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

Вкл. Функции

Это может помочь прочитать «function» как «to» ( Logo концепция :)).Я думаю, что хорошо написанная функция читается как рецепт (для «drawLine» вы должны сделать это и это, используя эти параметры ...).

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

Элементы не готовы

Учитывая, что элементы не готовы и загрузка сценария ... вы могли бы быть лучшеот определения вашего кода в обработчике "готов к документу".Это довольно стандартная вещь.

Если вы используете RequireJS или подобную библиотеку, вам, вероятно, об этом не нужно беспокоиться.Они решают эту конкретную проблему для вас.

Answer 5

Я стараюсь не иметь чрезмерных блоков скриптов в моем коде вообще.Я вызываю все внешние сценарии в голове или перед закрытием тела в случае включения API (например, addthis).Все встроенные сценарии также выполняются в одном блоке непосредственно перед закрытием тега body.

Answer 6

Вы можете рассматривать всю страницу, JavaScript, CSS и HTML, как комбинацию универсальной программы «сверху вниз», где более поздний код может ссылаться на более ранний код.Потому что, когда страница загружается, она просто начинает «выполнять» или интерпретировать «код» так, как видит его.В большинстве случаев этот «код» - это просто определения (например, JS-переменные или функции) и размещение элементов (например, DIV).

Однако, если у вас есть JS, который фактически выполняется во время загрузки, это код, то есть вне определения функции, то он будет «видеть» только то, что существует до выполнения кода.Таким образом, в этом смысле, все это просто одна длинная программа, с HTML в качестве метаязыка, создающего DOM, поскольку HTML интерпретируется браузером.

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

Но, по сути, это сценарий сверху вниз, почти любойостальное.

Answer 7

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

Однако библиотеки (такие как jQuery) должны идти в <head>.