JQuery и JavaScript кодирования: Примеры и лучшие практики

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

1.Почему JQuery

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

Javascript и лучший Practices

Javascript долгое время был предметом многих горячих споров о том, можно ли использовать его в то же время придерживаться передовой практики в области доступности и стандартов compliance.

Ответ на этот вопрос еще не решен, однако, появление структур, как Javascript Jquery предоставила необходимые инструменты для создания красивых веб-сайты, не беспокоясь (столько) о доступности issues.

Очевидно, что существуют случаи, когда решение Javascript не самый лучший вариант.Основное правило здесь: Использование DOM сценариев enhance функциональности, а не создавать it.

Ненавязчивый DOM Scripting

В то время как термин «DOM сценариев” на самом деле просто относится к использованию скриптов (в данном случае, JavaScript) для доступа к объектной модели документа, он широко восприниматься как способ описания того, что должно быть действительно называется “ ненавязчивый DOMscripting”-в основном, искусство добавив Javascript на свою страницу таким образом, что если бы не было Javascript, страница будет работать (или хотя бы ухудшить изящно).На сайте мир, наши DOM сценариев осуществляется с помощью Javascript.

Bottom Line: Доступная, разложению Content

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

2.Ненавязчивый DOM сценариев

В идеальном мире, веб-сайтов будет иметь динамическую функциональность и эффекты, которые ухудшают хорошо.Что это значит?Это означало бы найти способ включить, скажем, шикарный Javascript Web 2.0 анимированныераздвижные новостная лента виджет на веб-страницу, при этом гарантируя, что она не изящно, если visitor’ с браузером can’ т (или won’ т) выполнения Javascripts.

Теория, лежащая этот метод довольно прост: конечной целью является использование Javascript для неинвазивного, “ behavioural” элементов страницы.Javascript используется для добавления или повышения интерактивности и эффектов.Основной правила DOM сценариев follow.

Правило № 1: Отдельная Javascript Functionality

Отдельные функциональные Javascript в “ поведенческий слой, ”, так что это отдельный и независимый от (X) HTML и CSS.(X) HTML это разметка, CSS и Javascript презентации поведенческий слой.Это означает, что хранение всех коде Javascript во внешних файлах сценария и здание страниц, которые не полагаться на Javascript, чтобы быть полезной.

Для демонстрации, проверьте следующие фрагменты кода:

Bad разметки:

Никогда не включайте Javascript событий, как встроенные атрибуты.Эта практика должна быть полностью стерты с вашего mind.

<a onclick="doSomething()" href="#">Click!</a>

Хорошая разметка:

Все Javascript поведения должны быть включены во внешние файлы сценария и связанный с этим документом с < script> теги в голову на этой странице.Таким образом, якорь тег будет выглядеть так:

<a href="backuplink.html" class="doSomething">Click!</a>

И Javascript внутри myscript.js файл будет содержать что-то вроде этого:

...

$('a.doSomething').click(function(){
	// Do something here!
	alert('You did something, woo hoo!');
});
...

. Нажмите кнопку () в jQuery позволяет легко прикрепить события нажатия на результат (ы) нашего выбора.Таким образом, код будет выбрать все < a> теги класса “ doSomething” и прикрепить событие щелчка, который будет вызывать функцию.На практике, this

В Правило № 2 есть еще одна демонстрация того, как аналогичная цель может быть достигнута без встроенного Javascript code.

Правило № 2: Никогда не зависящих от Javascript

Чтобы быть по-настоящему ненавязчивый, разработчик никогда не должны рассчитывать на поддержку Javascript для доставки контента или информации.It’ нормально использовать Javascript для повышения информацию, сделать ее красивее, или более интерактивным, но не следует думать, user’ с браузером будет включен Javascript.Это правило действительно может быть применен к любой сторонних технологий, таких как флэш-память или Java.Если it’ ы не встроены в каждый веб-браузер (и всегда включен), то убедитесь, что страница все еще вполне доступных и пригодных без it.

Bad разметки:

Следующий фрагмент показывает Javascript, который может быть использован для отображения “ Хорошо morning” (или “ afternoon”) сообщение на сайте, в зависимости от времени суток.. (Очевидно, что это элементарный пример и будет на самом деле, вероятно, будет достигнута в некоторых серверных языков сценариев)

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
	document.write('Good Morning!');
else
	document.write('Good Afternoon!');
</script>

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

Хорошая разметка:

Семантически правильно и доступный способ осуществить это потребует гораздо более простым и читаемым (X) HTML, например:

<p title="Good Day Message">Good Morning!</p>

В том числе “ title” атрибут, этот пункт может быть выбран в использовании JQuery селектор ( селекторы объяснил позже в этом article), как в следующем фрагменте Javascript:

var now = new Date();
if(now.getHours() >= 12)
{
	var goodDay = $('p[title="Good Day Message"]');
	goodDay.text('Good Afternoon!');
}

Красота здесь является то, что все Javascript жизнь во внешний файл сценария и страница отображается в стандартном (X) HTML, который означает, что если Javascript isn’ T перспективе, страница по-прежнему 100% семантически чистым (X)HTML-нет Javascript хлама.Единственной проблемой будет то, что во второй половине дня, на странице будет по-прежнему говорят “ Хорошо morning.” Однако, это может рассматриваться как приемлемое degradation.

Правило № 3: семантический и доступной разметки Приходит First

Это очень важно, что (X) HTML разметку семантической структуры.(Хотя это выходит за рамки этой статьи, чтобы объяснить, почему, см. ссылки ниже для дальнейшего чтения по семантической разметки.) По общему правилу в том, что если page’ с разметкой семантически структурировано, оно должно следовать, что она также доступнадля широкого круга устройств.Это не всегда верно, хотя, но это хорошее правило, чтобы получить один started.

Семантическая разметка важно ненавязчиво DOM сценариев, потому что она формирует пути разработчиков будет создавать DOM сценариев эффект.Первый шаг в построении любого JQuery повышенной виджет на страницу, чтобы написать разметки и убедитесь, что семантическая разметка.Как только это будет достигнуто, разработчик может использовать JQuery для взаимодействия с семантически корректной разметки (выезд (X) HTML документ, который является чистым и читаемым, и отделения поведенческой слоя)

Ужасно разметки:

В следующем фрагменте показан типичный список предметов и их описания в типичный (и страшно UNsemantic) way.

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

Bad разметки:

В следующем фрагменте показан типичный список предметов и описаний в более семантическим способом.Тем не менее, встроенный Javascript далеко от perfect.

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

Хорошая разметка:

Этот фрагмент показывает, как приведенный выше список should быть размечена.Любое взаимодействие с Javascript будет приложена нагрузка на DOM использованием jQuery, эффективно удаляя все поведенческие разметки от оказанных (X) HTML.

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

< id> __ из 52 | OptionList” позволит нам цель данного определения списка в использовании JQuery селектор-Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 16.09.2008 by Newsbot