Пять или меньше советов по написанию хорошего JavaScript? [закрыто]

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

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

Можете ли вы перечислить пять (или меньше) вопросов, специфичных для JavaScript, которые я должен задавать себе для каждого шага, который я делаю, когда кодирую JavaScript? Что бы они были?

Обновление: чтобы уточнить, я не прошу пять вещей, которые следует иметь в виду при изучении JavaScript; Я прошу пять вопросов, чтобы всегда задавать себе вопрос, который должен задавать каждый. Вопросы высокого уровня, такие как: «Могу ли я повторить это где-нибудь еще?» или «является ли это имя переменной / функции достаточно специфичным (или слишком специфичным)» <== за исключением того, что эти примеры вопросов не являются специфическими для JavaScript. Я ищу директивы, которые свойственны JavaScript.

Я собираюсь ответить на это в двух частях. Один из них - «Пять или меньше советов по обучению написанию хорошего JavaScript». Другой - «Пять или меньше советов по написанию хорошего JavaScript».

Учусь:

1. Задавать вопросы
2. Слушать
3. Читать
4. Сделать материал

Выполнение:

1. Избегайте глобальных (модульных)
2. Делать сложные вещи вне циклов (выбор DOM, объявления функций и т. Д.)
3. Узнайте, как работает сфера
4. Узнайте, когда и как использовать замыкания
5. Узнайте, как работает объектно-ориентированный JS

РЕДАКТИРОВАТЬ (добавление вопросов для соответствия ОП):

На какую область я ссылаюсь?

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

Я повторяюсь?

Правильная абстракция и использование ОО методов важны. Используйте их с умом.

Мой код повторяется?

Удивительно легко обнаружить, что вы помещаете доступ DOM в цикл или создаете функции (анонимные или иные) в цикле. Обратите внимание, что это может быть верно для кода, который использует setTimeoutили setIntervalтакже как и традиционные циклы.

Значит ли это, что я думаю?

Значения правдивости и ложности в JS могут быть немного хитрыми, особенно при использовании нестрогих сравнений ( ==в отличие от ===). Динамическая типизация, приведение типов и ссылки на объекты или литералы также могут иметь значение.

Во-первых, узнайте, как работают технологии.

Вы должны знать это, потому что знание того, как это работает, потому что вы столкнетесь с сетевыми проблемами, или, как я видел бесчисленное количество раз, люди совершенно весело понимают, что на самом деле является серверной и клиентской сторонами. Один из самых распространенных вопросов для новичка, который я вижу: «Как я могу заставить JS изменить переменную в моем коде ASP ?!»

• Вы понимаете, Ethernet / Wi-Fi и TCP / IP, чтобы иметь общее представление о том, что происходит?
• Сколько HTTP вы на самом деле знаете?
• Вы на самом деле получаете HTML? Конечно, вы можете знать, как работают теги и что-то вкладывать, но вы действительно понимаете режим doctype и quirks? Понимаете ли вы, что не следует помещать теги абзаца вокруг элемента списка?
• Придумайте JavaScript (и объясните, что его можно запустить на стороне сервера). ecmascript, livecript, mocascript, jsscript, узел ...
• Изучите Window API, DOM API и XHR API. Если вы не знаете этих трех вещей, у вас нет бизнес-кода для написания браузера.

Поймите, ваш код больше, чем вы, или ваша конкретная ситуация

• Конечно, вы что-то написали, но все это видят. Это все "открытый" источник. Конечно, вы можете запутать это, минимизировать это, что угодно ... в конце дня, если я хочу увидеть ваш код, для меня тривиально победить любые методы, которые вы используете.
• Вы должны понимать различия между браузерами. Ориентируйтесь на самые популярные или те, которые есть у вашего демографического рынка. Например, ie6 не будет отображать элементы ячейки таблицы DOM, если вы добавляете метод Child, а не методы API DOM специально для таблиц. Существуют и другие примеры, вам нужно их изучить.
• Вы должны понимать, как писать код вокруг всех этих проблем в браузерах, а не в вашем конкретном браузере. Вы быстро научитесь тому, что хорошо работает в одном браузере, в другом медленнее. Вы должны выяснить, как работают браузеры и почему они отличаются.
• Из-за любви к бороде Одина, не пишите код, который позволяет мне выполнять межсайтовые скриптовые атаки на ваш код. Если вы делаете ajax-вызов в ячейку и делаете что-то подобное cell.innerHTML = "<script>alert("xss")</script>", и появляется окно с предупреждением, вы сделали это неправильно.
• Держитесь подальше от кровавого ада от DynamicDrive, w3Schools и сайтов, которые дают плохие советы. Вам нужно найти сообщества, которые дают хороший совет. Здесь, в Stack Overflow, у нас есть чаты JavaScript и Node.JS, и мы делаем все возможное, чтобы продолжать расширять границы того, что «лучше», когда такие сайты, как w3s, хранят устаревшие данные и никогда не беспокоятся об этом. Вы должны придерживаться официальных сайтов, таких как W3C , Mozilla Developer Network (MDN). Запросите рецензирование вашего кода. Когда вы чувствуете, что делаете что-то болезненное с вашим кодом, когда вы делаете много копий + вставки + подстройки со своим кодом, вы должны немедленно прийти в чат и попросить совета по написанию лучшего кода.
• Когда вы приходите за советом или хотите поделиться этой действительно классной вещью, которую вы сделали ... пожалуйста, довольно, пожалуйста. Пожалуйста, убедитесь, что вы задокументировали это, убедитесь, что имена ваших переменных имеют смысл, убедитесь, что они не все однострочные. Вам нужно написать чистый код. Если у вас есть куча мусора, не только вы потерпели неудачу, но никто, кто знает, как помочь вам, не захочет . Помогите нам помочь вам.
• Вы хотите написать JavaScript - это круто, уважайте, что не все поддерживают JavaScript. Для этого есть две причины: 1) Ускоренный Интернет для всех (а не «аят все», что приводит к более медленному восприятию). 2) Интернет стал более доступным для пользователей в консольных браузерах, для людей, не использующих сценарии, для мобильных телефонов. Я пытаюсь сказать, что ваш сайт должен изящно деградировать, если у кого-то нет JavaScript и, по крайней мере, использовать <noscript>теги, чтобы предупредить их об этом.
• Из-за прототипа JavaScript, вы можете вносить изменения в то, как на самом деле работает язык, что очень мило. Видите ли, JavaScript развивается, мы вытесняем «ECMA Script 3», который является более старой версией JS, и в «ECMA Script 5» (он же es5). Из-за прототипа мы можем исправить язык es3 в поле, чтобы он работал как es5. Это означает, что, например, у 10-летнего браузера появилась языковая функция, появившаяся в прошлом году. Используйте es5-прокладки везде, где вы можете, они действительно крутые, и вам нужно изучить это.
• Западный мир англоязычных белых детей - это не тот, кто пользуется интернетом. Код соответственно. Это означает, что вам нужно понимать интернационализацию и писать код, который отвечает более высоким требованиям. 10 лет назад в сети было менее 500 миллионов человек, сегодня примерно 2 миллиарда, а еще через 10 лет? Вероятно, почти у каждого человека на планете будет доступ в Интернет, это означает, что вам нужно поддерживать имена, которые не соответствуют регулярному выражению /[a-z ']/i, но включают в себя хинди, арабский, акценты (это существующая проблема от недальновидных разработчиков), китайский , и другие. Понимать наборы символов, Unicode и UTF-8.

Ты программист, а не макаронная фабрика. Хватит писать спагетти.

• Назовите свои переменные после того, что имеет смысл.
• Документируйте свой код. Мне все равно, если вы используете JSDoc на Rhino или у вас есть куча каракулей. Напишите документацию, которая поможет человеку, который собирается использовать ваш код. Напишите документацию для тех, кто хочет улучшить или поддерживать ваш код. Включите полезные комментарии. Комментарии наподобие "This fizzes the bizz"или наполовину английские наполовину французские не помогают. Опишите, что делает функция. Опишите сложные разделы кода.
• Выясните, как ограничить повторение кода. Ищите модульный дизайн или функциональные образцы. Посмотрите, что вы можете абстрагироваться. Вы никогда не должны в конечном итоге вырезать + вставить + настроить большие сегменты кода, чтобы сделать то же самое.
• Вы должны понимать DOM API. Объекты DOM и window предоставляют много замечательных вещей. Это звучит как большая работа, но это потому, что это большая страшная аббревиатура. Многие из вас, ниндзя JavaScript, любят писать такой код, как <a href="javascript:alert("foo")">. FFS НЕ ДЕЛАЕТ ЭТОГО. Дождитесь полной загрузки документа, отделите ваш код JavaScript от HTML-документа. Это базовая практика ООП 101, просто никогда не вставляйте JS или CSS в ваш HTML-документ. Выясните, как это сделать правильно или найдите человека, который знает, как показать вам, как это сделать. Опять задавайте вопросы.
• Javascript:foo("buz")является psudeo-протокол, он не полностью поддерживается, и если вы не в линии Javascript вы бы не использовать его в первую очередь. Я обещаю вам от всего сердца, что на этой земле или в любой точке вселенной нет причин, по которым вам НУЖНО поместить свой JavaScript внутри элемента HTML. Когда-либо. Так что не делай этого. Я даже не буду помогать людям , которые делают , что больше, это что плохо.

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

• Глобальные переменные являются одной из самых больших проблем. Выясните, как работает функциональное программирование в JavaScript. Выясните, что такое подъем. Выясните, как избежать глобальных переменных.
• Используйте инструменты статического анализа кода. Они сразу же предупредят вас обо всех маленьких «упсах», которые вы сделали при написании кода. Забыли точку с запятой где-нибудь? О, вот оно. Есть глобальный где-нибудь? О, вот оно. Код, который может выдать кучу загадочных ошибок при попытке его запустить? ОЙ! Там они! Больше не нужно крутиться и часами глядеть в кучу кода, пытаясь выяснить что-то, что является просто синтаксической ошибкой. (Ну, вряд ли, вы могли бы сделать что-то, что он не может поймать, но в целом это здорово).
• Модульный тест. Там нет причин, чтобы не быть. Там есть множество инструментов для модульного тестирования. По сути, модульное тестирование - это «Вот моя функция» и «Я хочу, чтобы оно вывело Y», «Вот несколько тестовых входов», а тест - «Они все работали?» Существует множество сред тестирования JS, например, популярный QUnit. Совершите экскурсию по вашей любимой поисковой системе и посмотрите, что щекочет ваше воображение. Но используйте их.
• Управление исходным кодом, также известное как контроль версий. Git популярен, и не без причины. Так же и SVN и несколько других. То, что вам нужно прекратить делать в этот самый момент, это редактировать производственный код. Вам нужно перестать переименовывать файлы. main_backup_20110911.js.bak.1Вы теряете вещи, ваш каталог запутан, вы не можете легко «перемотать» к предыдущему моменту времени. Вы не можете видеть, что происходит, вы не можете делать исправления кода. Итак, просто начните изучать GIT, это займет у вас час, и вы никогда не вернетесь.
• Рецензия. Вы же не , что хорошо, и не я ! Я получаю лучше просить обратную связь столько , сколько я могу. Вот как ты должен это делать.

Напишите JavaScript, который любят люди

• Выясните, почему ваш код работает медленно. Используйте jspref и создайте тесты.
• Прекратите привязывать события к одному элементу DOM, это медленно и создает серьезные проблемы с пузырями событий, которые будут тратить много времени. Исследуйте «делегирование событий» в JavaScript.
• Прекратите использовать innerHTML для редактирования DOM. Это восходит к изучению того, что такое HTML, и изучению того, что такое DOM. HTML - это данные, отправленные с сервера, которые используются вашим механизмом рендеринга в браузере для создания группы программных объектов, которые в конечном итоге становятся объектами документа. Когда вы используете innerHTML, вы просите свой браузер перерисовать все это. К счастью, как и более 10 лет назад, мы создали DOM API, и он позволяет вам «добавлять дочерний элемент» или «создавать текстовый узел», не обновляя его целиком. innHTML - это позор, придуманный Microsoft - если вы его используете, вы также теряете все привилегии, чтобы скулить о том, что IE6 ужасен, потому что вы помогаете его мусору держаться вечно. Узнайте DOM.
• Он должен работать везде, где может. Если что-то не поддерживается, это должно изящно ухудшиться, чтобы опыт не отстой - вы не можете просто ударить своих пользователей по лицу и рухнуть.
• Авторское право и лицензия важны. Не грабите тяжелую работу других людей. Если кто-то скажет «не для перепродажи», вы не сможете его продать. Не будь придурком, иначе мы возненавидим твой код за грабеж трудолюбивых людей.
• JS - это прототипы, а не классы. Перестань. Если вы не понимаете, как работает прототип, вам нужно. Погугли это. JavaScript не основан на классах, перестаньте пытаться создавать классы, он очень редко работает хорошо. Люди пытаются написать классический код на языке прототипов и использовать его в качестве примера «почему язык отстой», я мог бы привести такой же пример для Ruby, который не может поддерживать прототип. Узнай что-то новое и перестань делать это неправильно.

Сосредоточьтесь на основах, всегда.

• Вы не правы, и это потрясающе, потому что вы что-то знаете сейчас. Нет ничего хуже, чем кто-то, кто не признается в своей неправоте и постоянно швыряет плохой код за дверь, словно они какой-то ниндзя-супергерой-рок-звезда-ренегат. Они просто дураки. Признай, что ты ошибаешься, признайся, что ошибаешься, попроси о помощи.
• Вам не всегда нужен JQuery. jQuery создает много медленного кода и помогает людям, которые не знают JS, писать JS. Это еще одна проблема, поскольку JS не требует, чтобы вы знали JS для написания JS. Пойди разберись. Как только вы поймете некоторые из вещей, которые я упомянул выше, такие как изучение событий, изучение DOM, изучение innerHTML, вы поймете, почему jQuery может быть вредным для вашего кода. Он может быть правильно использован во многих местах, но часто вы можете использовать меньшую библиотеку или даже вздохнуть со стандартным JavaScript, который поставляется с вашим браузером, чтобы чего-то добиться. Вам не нужен jQuery, чтобы делать что-либо, это упрощает написание некоторого кода, который хорош, если вы учитесь, но вам нужно начать делать лучше и учиться больше - когда вы узнаете больше, вы поймете, как в любом случае лучше писать код в jQuery.Проверьте некоторые другие библиотеки JavaScript и перестаньте быть такими внимательными.
• Вам не нужно вырезать + вставить + настроить, сделать сухой код. Я упоминал об этом раньше, но это важно и здесь. Вы не можете написать качественный код, если ваша кодовая база является позором.
• Не злоупотребляйте массивами / объектными различиями, научитесь зацикливаться. Узнайте, почему вы используете for (;;)и почему вы используете for( in )цикл. Когда использовать цикл while. Прекратите вложение IF, когда вы можете просто использовать переключатель. Объекты не сохраняют порядок, поэтому не используйте их как массив; старая Opera / FF, старая MISE, иногда Flash не учитывает порядок ваших объектов. Используйте массив, если вы хотите сохранить порядок вещей, используйте объект, если вы хотите объект (то, что не имеет порядка элементов).
• Как структуры решений могут использоваться в ваших интересах, а не усложнять ваш код. Перестаньте вкладывать IF, выясните, как работают логические операторы Boolean. Выясните, как работает коммутатор.
• RTFM. Лучшее место, чтобы узнать о лучшем коде - это прочитать спецификацию. Прочитайте спецификации RFC для той части кода, которую вы пытаетесь использовать. Прочитайте документ ECMAScript. Прочитайте спецификацию W3C DOM. Прочитайте спецификацию W3C XHTML / HTML / HTML5. Читайте спецификации, они хороши.

Сосредоточьтесь на долгой игре, а не на быстрой вспышке и умрите.

• Вы должны помочь сообществу, вы должны написать код, который будет присутствовать в течение длительного времени. Имейте некоторую страсть к своему коду и сообществу. Если вы где-то оставили плохие знания, отправляйтесь назад и исправьте это. Плохую информацию действительно трудно очистить, и она остается навсегда. Сделай свою часть. Не помогайте w3schools сделать сеть хуже.
• Не прыгайте из ниоткуда и скажите: «Эй, я получил отличную идею о том, как использовать which», бросьте кучу кода, который никто не сможет использовать, и исчезните. Вы ничего не внесли. Не используйте переменные, такие как aи chezburger.
• Научитесь распознавать плохой код и хороший код, найдите его в своем собственном коде, превратите плохой код в хороший код.
• Создайте что-нибудь, чему-то научитесь, чему-то научите
• Расширяйте ваш кругозор. Вы не можете просто написать JavaScript навсегда - взять творческий отпуск на что-то еще, что вас интересует, вернуться, поделиться тем, что вы узнали, и посмотреть, сможете ли вы найти место для этого в сообществе. Попробуйте показать остальному миру, какое значение имеет и JavaScript, пока вы там.
• Вы все еще не правы, даже когда вы все знаете. Для подтверждения используйте доказательство, а не ваш статус / авторитет. Вы никогда не можете быть правы, но ваши доказательства всегда верны. Не впадайте в спички, так как иногда их трудно избежать. Либо есть доказательства, либо их нет. Пламя никому не помогает.

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

1. Прочитайте Javascript Дугласа Крокфорда : хорошие части . Это довольно полезный совет, но, честно говоря, это лучший совет, который я когда-либо слышал для написания хорошего javascript.

2. Читайте также статьи Дугласа Крокфорда о Javascript .

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

Вот несколько вопросов, которые помогут вам перейти на JavaScript.

1. Как работает JSON и для чего он нужен?

2. Почему функции объектов в Javascript?

3. Почему я не должен использовать eval?

4. Как мне создать события в JavaScript?

5. Как я могу обнаружить функцию в JavaScript?

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

1. Всегда используйте точки с запятой. Неявные точки с запятой (в JS) - ужасная идея, особенно с некоторым интересным синтаксисом, распространяющимся в обычном использовании. Они также, как правило, требуются для любого JS minifier.
2. Избегайте eval () . Это вызывает всевозможные проблемы и является очень быстрым способом замедления работы вашего приложения. Большинство применений на самом деле являются злоупотреблениями. Каждый раз, когда вы думаете, что вам нужно использовать eval(), дважды и тройная проверка для другого способа; почти всегда есть более чистый и простой способ, если только вы на самом деле не пытаетесь выполнить весь код JavaScript.
3. (function() {/* stuff */})()хороший способ заключить набор кода и создать для него локальную область видимости. Использование объектов - это другой, часто лучший способ; объекты более похожи на пространства имен в других языках при использовании таким образом. Просто остерегайтесь this. В отличие от большинства других языков, thisне всегда ссылаются на то, что вы можете интуитивно думать, что это делает. Также помните, что если не указано иное, все переменные, функции и другие объекты JS являются глобальными, даже для нескольких .jsфайлов.
4. Найдите и изучите / используйте хорошую библиотеку JS. JQuery является одним из самых популярных. Они сделают для вас очень тяжелую работу, включая такие вещи, как обнаружение функций и абстрагирование от манипуляций с DOM, а также различные способы реализации разных вещей в разных браузерах.
5. Всегда используйте точки с запятой. Шутки в сторону. Получите IDE, которая предупредит вас, когда вы забудете их. Я не хочу показаться неуместным, но было несколько раз, когда ошибки были введены только из-за отсутствия точки с запятой, и браузер не будет предупреждать вас об этом.

Я считаю, что классы являются довольно мощным инструментом для структурирования кода. Существует множество не зависящих от языка правил о том, как проектировать системы, основанные на классах, и некоторые принципы ОО на самом деле более очевидно реализуются при использовании классов.
Поэтому я предлагаю вам взглянуть на CoffeeScript .

Оттуда я предлагаю вам просто попытаться собрать информацию о том, как реализовать SOLID , DRY , GRASP , KISS и YAGNI , и, что более важно, о том, как действовать в ситуациях, когда они кажутся конфликтующими (они никогда не делают, только ваше понимание их или проблема под рукой делает). Его довольно легко найти даже на стеке.

Обратите внимание, что эти принципы в равной степени применимы и к «сырой» разработке JavaScript. Однако большое количество контента, который вы найдете на них, проиллюстрирует их с использованием языков, основанных на классах, и поэтому может быть полезно для программирования на языке, где не требуется слишком много накладных расходов для их понимания.
Лично я считаю, что JavaScript является чрезвычайно мощным языком, но на самом деле вам придется сначала глубоко понять другие языки, чтобы действительно оценить этот факт.

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

1) Должно ли это быть на стороне клиента или на стороне сервера? Я знаю, что я пошел и написал серьезные куски кода, которые действительно заслуживают того, чтобы быть на стороне сервера, и наоборот. Много раз я собираюсь сделать AJAX-вызов, который в конечном итоге будет лучше размещен в коде Сервера, чтобы быть включенным по пути. Особенно вещи, которые статичны по своей природе, но меняются довольно регулярно (например, список категорий).

2) Есть ли плагин, который делает это уже? Я часто использую JQuery, и ответ почти всегда ДА! Я часто беру код плагина, который кто-то написал, и адаптирую его к моим потребностям (обычно добавляя дополнительные классы к вещам и т. Д.), Но редко мне когда-либо нужно начинать с нуля.

3) Является ли Javascript подходящим местом для этого? Иногда я ловлю себя на том, что добавляю целую кучу динамических стилей к чему-то через Javascript, когда разумнее использовать интеллектуальный CSS.

4) я должен использовать другой инструмент? Это то, с чем я боролся в последнее время. Есть несколько вариантов javascript, таких как кофейный скрипт , которые хорошо обрабатываются в моем стеке (Rails 3.1), и я думал, стоит ли перемещать большую часть моего кода туда.

5) Является ли этот код Javascript хорошим кодом? Javascript - это код, как и любой другой код. Этот код так же хорош, как и весь мой код? Если нет, то почему нет? Это одноразовый? Я ленивый?