В этой статье описываются 14 правил, которые следует следовать при написании кода JavaScript. Поделитесь этим для вашей ссылки, следующим образом:
1. Всегда используйте 'var'
В JavaScript переменные либо глобально, либо по всему функции. Использование ключевого слова «var» будет ключом к сохранению переменных кратким и ясным. При объявлении переменной, которая является либо глобальной, либо на уровне функций, ключевое слово «var» всегда должно быть предшествующее. В следующем примере подчеркнут потенциальная проблема, связанная с этим.
Проблемы, вызванные не использованием var
var i = 0; // это хорошо - создает глобальный тест функции переменной () {for (i = 0; i <10; i ++) {alert ("hello world!");}} Test (); alert (i); // Глобальная переменная I сейчас 10!Поскольку переменная I в функции переменной не использует VAR, чтобы сделать ее переменной уровня функции, в этом примере она ссылается на глобальную переменную. Всегда использование VAR для объявления глобальных переменных-это много практики, но важно использовать VAR для определения переменной по всей функции. Следующие два метода функционально одинаковы:
Правильная функция
Function test () {var i = 0; for (i = 0; i <10; i ++) {alert ("Hello World!");}}Правильная функция
Function test () {for (var i = 0; i <10; i ++) {alert ("Привет, мир!");}}2. Обнаружение функций, а не обнаружение браузера
Некоторый код написан, чтобы обнаружить версию браузера и выполнять различные поведения на ней на основе клиента, которого использует пользователь. Это, в целом, очень плохая практика. Лучшим подходом является использование обнаружения функций, сначала обнаружите (браузер), есть ли эта функция или функция перед использованием расширенной функции, которую старый браузер может не поддерживать, а затем использовать ее. Это индивидуально обнаруживает версию браузера лучше, даже если вы знаете ее производительность. Вы можете найти статью, в которой подробно обсуждается этот вопрос по адресу http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
пример:
if (document.getElementbyId) {var element = document.getElementById ('myID');} else {alert ('В вашему браузере не хватает возможностей, необходимых для запуска этого скрипта!');}3. Используйте нотацию квадратного кронштейна
При доступе определяется выполнение или включает свойства объекта, к которым нельзя получить доступ с «». Знак, используется квадратная кронштейна. Если вы не опытный программист JavaScript, всегда использовать квадратные кронштейны - хороший способ сделать это
Свойства объекта доступны двумя фиксированными методами: "." Существительное и "[]".
"." Метод нотации:
Myobject.property
"[]».
Myobject ["Property"]
Используйте "." Подпишите, имя атрибута является жестким кодом и не может быть изменено во время выполнения. Используя квадратные кронштейны «[]», имя атрибута - это строка, которая поступает из расчета имени атрибута. Строкой должна быть жесткий код, или переменная, или даже функция, которая вызывает строковое значение. Если имя атрибута генерируется во время выполнения, требуются квадратные скобки. Если у вас есть свойства, такие как «Value1», «value2» и «value3», и вы хотите использовать переменную i = 2 для доступа к ней
Это может работать:
Myobject ["value"+i]
Это не может быть:
Myobject.value+i
И в некоторых средах на стороне сервера (PHP, стойки и т. Д.) Формы прикреплены с [] числами, чтобы указать, что формы формируют как массивы на стороне сервера. Таким образом, используя «». Подписание для обозначения поля, содержащего знак [], не будет выполнен, потому что [] является синтаксисом для ссылки на массив JavaScript. Следовательно, [] нотация необходима:
Это может работать:
formref.elements ["name []"]
Это не может быть:
FormRef.Elements.name []
Рекомендуемое использование нотации «[]» квадратного кронштейна означает, что она всегда используется, когда он нуждается в этом (очевидно). Это личное предпочтение и привычка, когда его использовать строго не необходим. Хороший эмпирический принцип - использовать «». обозначения для доступа к стандартным свойствам объекта и используйте нотацию «[]» квадратного кронштейна, чтобы получить доступ к свойствам объекта, определенные страницей. Таким образом, документ ["getElementById"] () является совершенно осуществимым "[]". Смешайте эти две обозначения, чтобы сделать, который является стандартным атрибутом объекта и какое имя атрибута определяется контекстом, показывает в коде:
document.forms ["myformname"]. Элементы ["myIinput"]. Значение
Здесь Forms является стандартным свойством документа, а имя формы MyFormName определяется страницей. В то же время элементы и атрибуты значения являются стандартными атрибутами, определенными спецификацией. MyInput определяется страницей. Эта страница представляет собой синтаксис, который делает людей очень простыми для понимания (содержание кода) и является рекомендуемой идиомой, но не строгим принципом.
4. Избегайте 'eval'
В JavaScript функция eval () является методом выполнения произвольного кода во время выполнения. Практически во всех случаях eval не должна использоваться. Если он появляется на вашей странице, это означает, что есть лучший способ к тому, что вы делаете. Например, Eval обычно используется программистами, которые не знают, для использования нотации квадратных кронштейнов.
В принципе, «Eval - это зло (Eval - это дьявол). Не используйте его, если вы не являетесь опытным разработчиком и не знаете, что ваша ситуация является исключением.
5. Правильные ссылки на элементы формы и формы
Все HTML -формы должны иметь атрибут имени. Для документов xhtml атрибут имени не требуется, но тег формы должен иметь соответствующий атрибут идентификатора и должен быть упомянут с помощью Document.getElementById (). Использование методов индексации, таких как Document.forms [0] для эталонных форм, является плохой практикой практически во всех случаях. Некоторые браузеры рассматривают элементы, названные в документах, используя форму как доступную атрибут формы. Это не надежно и не должно использоваться.
В следующем примере показано, как предотвратить неправильную ссылку ввода формы с использованием квадратных кронштейнов и правильного метода ссылки на объект:
Правильный ввод справочной формы:
document.forms ["formname"]. Elements ["inputName"]
Плохой подход:
document.formname.inputname
Если вы хотите ссылаться на два элемента формы в функции, лучше сначала обратиться к объекту формы и сохранить его в переменной. Это избегает дублирующих запросов для разрешения ссылок на форму:
var formElements = document.forms ["mainform"]. Elements; сформулирование ["input1"]. value = "a"; сформулирование ["input2"]. value = "b";
Когда вы используете OnChange или другие аналогичные методы обработки событий, хороший подход - всегда обращаться к самому входному элементу в функцию с помощью записей. Все входные элементы несут ссылку на форму формы, которая ее содержит:
<input type = "text" name = "address" onchange = "validate (this)">
Функция Validate (input_obj) {// Справочный FormVar Форма, содержащая этот элемент = input_obj.form; // Теперь вы можете обратиться к самой форме без использования жесткого кода if (theform.elents ["city"]. Value == ") {alert (" error ");}}Доступ к свойствам формы, ссылаясь на элемент формы, вы можете написать функцию, которая не содержит жесткого кода, чтобы ссылаться на любую форму на этой странице с определенным именем. Это очень хорошая практика, потому что функции становятся многоразовыми.
Избегайте 'с'
Объявление с JavaScript вводит объект на переднем конце области, поэтому любая ссылка на атрибуты/переменные будут разрешены в первую очередь на основе объекта. Это часто используется в качестве ярлыка, чтобы избежать дублирующих ссылок:
Пример использования с:
с (document.forms ["mainform"]. Elements) {input1.value = "junk"; input2.value = "junk";}Но проблема в том, что у программистов нет способа проверить, что Input1 или Input2 фактически решены как свойства массивов элементов формы. Сначала он обнаруживает атрибут с этими значениями имен, и, если его нельзя найти, он будет продолжать обнаружить этот прибор (вниз). Наконец, он пытается рассматривать Inpul1 и Input2 как глобальный объект, и это заканчивается ошибкой.
Обходной путь состоит в том, чтобы создать объект, который уменьшает ссылки и использует его для разрешения этих ссылок.
Используйте ссылку:
var elements = document.forms ["mainform"]. elements; elements.input1.value = "junk"; elements.input2.value = "Junk";
7. Используйте «onclick» в якоре вместо «JavaScript: псевдопротокол»
Если вы хотите запустить код JavaScript в теге <a>, выберите OnClick вместо JavaScript: Pseudo-Protocol; Код JavaScript, работающий с использованием OnClick, должен вернуть Ture или false (или выражение, чем оценки TRUE или FALSE [Как перевести это предложение? Я понимаю таким образом: выражение с приоритетом выше истинного или ложного]), чтобы вернуть сам тег: если истинно, hREF якоря будет рассматриваться как общая ссылка; Если неверно, HREF будет игнорироваться. Вот почему «вернуть ложь»; часто включается в конце кода, обработанного OnClick.
Правильный синтаксис:
Скопируйте код следующим образом: <a href = "// www.vevb.com" onclick = "dosomething (); return false;"> go </a>
В этом случае функция «dosomething ()» (определенная в углу страницы) будет вызвана при нажатии. HREF никогда не будет доступен в браузере с поддержкой JavaScript. Документ javascript_required.html будет загружен в браузер, где вы можете напомнить JavaScript, который необходим и не включен пользователем. Обычно, когда вы убедитесь, что пользователь будет включать поддержку JavaScript, как можно больше, ссылка будет включать только href = "#". И этот подход не поощряется. Обычно есть хороший подход: он может предоставить страницу, которая возвращается в локальную область без использования JavaScript.
Иногда многие люди хотят посетить ссылку в соответствии с ситуациями. Например, когда пользователь хочет оставить одну из страниц вашей формы и захотеть сначала проверить, чтобы ничего не изменилось. В этом случае ваш OnClick будет получить доступ к функции, которая возвращает запрос, следует ли соблюдать ссылку:
Условный доступ к ссылке:
<a href = "/" onclick = "return validate ();"> Home </a>
Функция validate () {return reffice ("Вы уверены, что хотите выйти из этой страницы?");}В этом случае функция validate () должна возвращать только туру или ложь. Когда пользователь находится в туре, пользователю будет разрешено выпустить домашнюю страницу или когда ссылка не будет доступна. Этот пример предлагает подтверждение (его поведение) для доступа к Ture или False, которое полностью определяется пользователем, который щелкнет «Real» или «Отмена».
Вот несколько примеров «не должно быть». Если вы видите следующий код на вашей странице, это неверно и должно быть изменено:
Что не следует делать:
<a href = "javascript: dosomething ()"> link </a> <a href = "// www.vevb.com/#" onclick = "dosomething ()"> link </a> <a href = "// www.vevb.com/#" onclick = "javascript: dosomething (); href = "// www.vevb.com/#" onclick = "javascript: dosomething (); return false;"> ссылка </a>
8. Используйте Unary '+' Operator, чтобы повернуть тип на номер
В JavaScript оператор знака «+» действует как знак математического плюса, так и соединитель. Это может вызвать проблемы, когда значения поля формы добавляются вместе. Например, поскольку JavaScript является языком слабого типа, ценность поля формы будет обрабатываться как массив, а когда вы возьмете их вместе, «+» будет рассматриваться как соединитель, а не математический знак плюс.
Примеры проблем:
<form name = "myform" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </form>
function total () {var theform = document.forms ["myform"]; var otation = theform.elents ["val1"]. value + theform.elents ["val2"]. value; alert (total); // это появится "12", но вы хотите 3!}Чтобы решить эту проблему, JavaScript требует подсказки, чтобы она обрабатывала эти значения в виде чисел. Вы можете использовать знак «+», чтобы преобразовать массив в число. Представление переменной или выражения со знаком «+» заставит ее обрабатывать как число, и это также позволит успешно применять математику «+».
Модифицированный код:
function total () {var theform = document.forms ["myform"]; var otting = (+theform.elents ["val1"]. value)+(+theform.elements ["val2"]. value); alert (total); // это будет предупреждать 3}9. Избегайте документа. Все
Document. Все было представлено Microsoft IE и не является стандартной функцией DOM JavaScript. Хотя большинство новых браузеров поддерживают его для поддержки плохого кода, который зависит от него, (и) есть много браузеров, которые не поддерживают его.
Нет никаких причин, по которым другие методы не применимы, и старый браузер IE (<5.0) нуждается в поддержке, и документ. Все используется в JavaScript в качестве компромисса. Вам не нужно использовать документ. Все, чтобы определить, является ли он браузером IE, потому что другие браузеры теперь обычно поддерживают его.
Только документ. Все является последним выбором:
if (document.getElementById) {var obj = document.getElementById ("myId");} else if (document.all) {var obj = document.all ("myId");}Некоторые принципы использования документа. Все:
Попробуйте другие методы
Когда это последний выбор
Когда это необходимо для поддержки браузеров IE ниже версии 5.0
Всегда используйте «if (document.all) {}», чтобы увидеть, поддерживается ли это.
10. Не используйте HTML -комментарии в блоках кода скрипта
В старые времена JavaScript (1995) некоторые браузеры, такие как Netscape 1.0, не поддерживали и не распознавали тег <cript>. Итак, когда JavaScript был впервые выпущен, была технология, которая предотвратит отображение фактического кода в старых браузерах в качестве текста. В коде есть «взлом», который использует HTML -комментарии, чтобы скрыть эти коды.
Делать HTML -комментарии не хорошими:
<script language = "javascript"> <!-// код здесь //-> </script>
Сегодня ни один общепринятый браузер игнорирует тег <croppling>. Поэтому больше не нужно скрывать исходный код JavaScript. Фактически, это также можно считать бесполезным по следующим причинам:
В документации XHTML исходный код будет скрыт от всех браузеров и представлен для бесполезного (контент);
Комментарии HTML не допускаются, это лишает аннулирования любой операции уменьшения.
11. Избегайте использования глобальных пространств имен без разбора
Как правило, все переменные и функции редко требуются. Глобальное использование может привести к конфликтам документа с исходным файлом JavaScript и прерываниями кода. Поэтому хорошим подходом является принятие функциональной инкапсуляции в глобальном пространстве имен. Есть несколько способов выполнить эту задачу, которая относительно сложна. Самый простой способ - создать глобальный объект и назначить свойства и методы этого объекта:
Создайте пространство имен:
var mylib = {}; // Глобальный объект cantaMylib.value = 1; mylib.increment = function () {mylib.value ++;} mylib.show = function () {alert (mylib.value);} mylib.value = 6; mylib.increment (); mylib.show (); // оповещения 7Пространства имен также могут быть созданы с использованием закрытия, а переменные частного члена также могут быть замаскированы в JavaScript.
12. Избегайте синхронных вызовов «аякс»
При использовании запроса «Ajax» вы либо выбираете асинхронный режим, либо используете синхронный режим. Когда поведение браузера может продолжать выполняться, асинхронный режим помещает запрос в фоновом режиме, а синхронный режим будет ждать, пока запрос не будет выполнен до продолжения.
Следует избегать запросов, сделанных в режиме синхронизации. Эти запросы отключат браузер для пользователя до возвращения запроса. После того, как сервер будет занят и потребуется некоторое время для выполнения запроса, браузер пользователя (или ОС) не сможет сделать что -либо еще, пока запрос не будет истешен.
Если вы чувствуете, что ваша ситуация требует режима синхронизации, самая большая возможность заключается в том, что вам нужно время, чтобы переосмыслить ваш дизайн. Редко, если таковые имеются, запросы Ajax в синхронном режиме фактически требуются.
13. Использование JSON
Когда необходимо хранить структуру данных в простом тексту или отправлять/извлечь структуру данных через AJAX, используйте JSON вместо XML, насколько это возможно. JSON (javaScript Object Notation) является более кратким и эффективным форматом хранения данных и не зависит от любого языка (и является нейтральным языком).
14. Используйте правильный тег <Script>
Использование языкового свойства в <Script> не предпочтительнее. Подходящим способом является создание следующего блока кода JavaScript:
<script type = "text/javascript"> // код здесь </script>
PS: приведенный выше код не был отформатирован, и форматированный код обычно будет легче читать и понять. Вот несколько онлайн -инструментов форматирования и сжатия, которые вы можете использовать в будущем разработке:
Онлайн инструменты для украшения и форматирования онлайн -кода:
http://tools.vevb.com/code/js
Украшение кода JavaScript/сжатие/Форматирование/Инструменты шифрования:
http://tools.vevb.com/code/jscompress
JSMIN Online JS сжатие:
http://tools.vevb.com/code/jsmincompress
Код JSON онлайн форматирование/благоустройство/сжатие/редактирование/преобразование инструментов:
http://tools.vevb.com/code/jsoncodeformat
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.