SULI COMPANY | Научно-технический сайт Сулико Асабашвили » Программирование » JavaScript » Хорошие практики программирования на Javascript
Информация к новости
  • Просмотров: 507
  • Автор: sulicompany
  • Дата: 30-05-2012, 03:48
 (голосов: 0)
30-05-2012, 03:48

Хорошие практики программирования на Javascript

Категория: Программирование » JavaScript


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

Правильно используйте тег <script>

Когда нужно вставить код javascript в файл html, всегда следует использовать тег <script> следующим образом:

1<script type="text/javascript">
2    ... код javascript
3</script>

Однако, как часто вы видите в исходном коде следующую конструкцию?

1<script type="text/javascript" language="javascript">
2    ... код javascript
3</script>

В HTML атрибут language не рекомендуется использовать вместе с атрибутом type по причине избыточности. Поэтому его следует исключить из употребления.

Сохраняйте ваш код в отдельном файле

Использование файла .js для кода javascript более предпочтительно, чем включение скрипта в HTML документ, кроме того, браузер кеширует файл, в результате чего сайт работает быстрее.

Размещайте ваш код javascript в файле .js, а затем с помощью тега <script> ваш HTML документ может импортировать код:

1<script type='text/javascript' src=''></script>

Не оборачивайте код в комментарии HTML

В 90-х некоторые старые браузеры не могли интерпретировать javascript. Для того, чтобы предотвратить проявление неожиданных результатов в таких браузерах, в  1994-1997 годах использовался метод оборачивания кода javascript в комментарии HTML, таким образом, старые браузеры просто игнорировали скрипт. Пример такого кода выглядит следующим образом:

1<script language="javascript">
2<!--
3...код javascript
4//-->
5</script>

Однако в 2010 году все браузеры (даже IE6, что является просто чудом) могут интерпретировать javascript, поэтому нет никакой необходимости оборачивать код комментариями. Более того, если код обернут комментариями и использует оператор декремента --, то вы можете получить сюрприз, по причине того, что брауззер может воспринять его как завершение комментария HTML.

Используйте рабочую среду

Несмотря на то, что код javascript бывает весьма короток и прост, всегда следует избегать повторного изобретения колеса. В данном вопросе очень помогают рабочие среды, которые имеют внушительный набор готовых функций (jQuery, Mootools, DoJo и так далее). Вы наверняка сможете подобрать среди обширного списка рабочих сред то, что вам более всего подходит.

Всегда объявляйте переменные с использованием var

Следует всегда использовать выражение var при объявлении переменной, иначе она попадает в глобальный контекст. Кроме того, использование var делает ваш код более удобным для чтения. Примеры объявления переменных с использованием выражения var:

1var name = "Jean";
2var size = data.length;

Пишите малозаметный код

Несколько лет назад, когда программисты хотели добавить событие к элементу HTML (например, для проверки данных при вводе), они просто размещали javascript код в HTML документе с помощью специальных атрибутов (например, onbluronchangeonclick, и т.д.). Пример:

1<input type="text" name="date" onchange="validateDate()" />

Это отлично работает, но все же имеет недостаток. HTML должен содержать только описание документа. Так же, как плохой практикой является использование встроенных стилей CSS, использование встроенного javascript тоже плохая привычка.

Вместо этого можно использовать малозаметный код javascript. Например с помощью jQuery выше приведенный пример очень легко изменить и вынести код javascript в отдельный файл:

1$(document).ready(function(){
2    $('input[name=date]').bind('change', validateDate);
3});

Включайте ваши скрипты внизу ваших файлов HTML

Не так давно хорошей практикой считалось вставка файлов javascript между тегами <head> и </head> HTML документа. Но браузеры читают HTML файлы сверху вниз и загружают внешние файлы динамически. Таким образом, вставка скрипта между <head> и </head> приведет к тому, что код javascript  будет загружаться перед основным контентом страницы. Чтобы всегда загружать скрипты после контента, вставка javascript файлов должна осуществляться внизу HTML файла:

1    <script src="myscript.js?" type="text/javascript"></script>
2  </body>
3</html>

Используйте JSLint

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

Не используйте document.write

Старый верный метод document.write не рекомендуется использовать уже несколько лет. Однако он встречается еще очень часто в коде.

1document.write("hello world");

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

1document.getElementById('hello').innerHTML('hello world');