Ясность цели Javascript

Я думаю, что одна из целей таких фреймворков, как prototype или jQuery, - скрыть большую часть материала JavaScript. Поскольку это непросто понять, они созданы максимально простыми. Поэтому, если вы используете такие фреймворки, JavaScript становится чище. Что я делаю, так это пишу много комментариев, использую много пробелов, строк и так далее. Но эти {{function () {... истории остались.

Один из хороших способов сделать это - использовать принципы ненавязчивого JavaScript для разделения проблем. Использование jQuery, предложенного Себастьяном, использовало этот принцип.

Ненавязчивый JavaScript

Использование общей библиотеки - это одно, но я думаю, что «получение» JavaScript - это просто трата времени на его написание. Вещи, которые могут показаться эзотерическими, постепенно станут обыденными. Это верно практически для любого языка или фреймворка.

Многие идиомы, используемые в JavaScript, такие как анонимные функции, буквальный синтаксис и т. д., Кажутся странными только тогда, когда вы впервые сталкиваетесь с ними. Думаю, такие же правила написания понятны C# / Java / C++ / VB / etc. код применяется к JavaScript - используйте имена переменных, которые имеют семантическое значение, пишите комментарии, которые помогут кому-то понять намерение и подтвердить предположения, быть явными и т. д.

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

Например, эта функция может показаться очень странной тем, кто не знаком с JavaScript, но для меня (и я уверен, что многие другие) это не так сложно понять:

// comments are not included *on purpose* for illustrating 
// my point about the need for language knowledge
function copy(obj) {
  return new (function(o) {
    for(var property in o) {
      if (o[property].constructor == Array) {
        this[property] = [];
        for(var i = 0; i < o[property].length; i++) {
          this[property][i] = new arguments.callee(o[property][i]);
        }
      } else if (o[property].constructor == Object) {
        this[property] = new arguments.callee(o[property]);
      } else {
        this[property] = o[property];
      }
    }
  })(obj);
}

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

ОБНОВЛЕНИЕ: для тех, кто говорит, что комментарии в приведенном выше примере могут помочь разработчику, пытающемуся понять это - очевидно. Комментарии полезны, и я думаю, что это само собой разумеющееся. Приведенный выше пример кода был предназначен для иллюстрации множества специфических особенностей JavaScript, которые будут понятны только тем, кто достаточно глубоко знает язык.

Как я уже сказал в комментариях к чужому ответу, мой код, который я могу полностью понять на основе моих знаний JavaScript, не должен быть прокомментирован так, что он заменяет знание языка. Мне не нужно объяснять, например, где находится анонимная функция или что я использую ее в приведенном выше коде в качестве функции анонимного конструктора и что она изменит воспринимаемое стандартное поведение (для разработчиков C# и Java) this. ключевое слово, все то, что может смутить невысоких разработчиков JavaScript.

Мое мнение двоякое:

• Учить язык. Замыкания JavaScript и {key: {function}} не так уж и сложны для понимания. На самом деле это довольно распространенный диалект.
• Изучите структуру. jQuery, prototype и т. д. - все это отличные фреймворки, которые стараются следовать принципу регулярности и однородности во всем API. Если вы поймете этот способ делать что-то в своем собственном коде JavaScript, все станет ясно.

Например, мне недавно понадобился метод для применения настраиваемого поведения к некоторым входам. Вместо того, чтобы перейти к функциональному стилю, я расширил все элементы <input> своим методом (я использую прототип), который соответствует остальным элементам прототипа. Если при разработке помнить об этих типах принципы, большая часть кода становится довольно простой.

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

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

@ Джейсон Бантинг

Должен сказать, что я не согласен с тем, что «только прилично глубокое знание» тонкостей javascript поможет понять ваш пример copy (). Комментарии типа «глубокая копия» или «рекурсивный вызов для копирования свойств объекта» и т. д. Могут быстро прояснить для программиста, который не грешит за ушами, но не знает всех деталей особенностей Javascript.

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

1. Отформатируйте свой код. Если вы не знаете, как его использовать - положитесь на IDE (в NetBeans или WebStorm он встроен) или на JS Beautyfier (если вы по какой-то причине все еще кодируете в Блокноте).

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

3. Убедитесь, что ваша IDE может распознать ваш код. Часто это означает, что вам нужно отказаться от шаблон модуля aka силовой конструкторvar module = ( function () { ... } )(); в пользу классический конструкторModule = function () { ... }; Module.prototype.method1 = function () { ... };

4. Объявить vars в начале функции, чтобы избежать хорошо известных проблем с подъемом переменных.

5. Заменить this в конструкторах на лучшее имя. Которая каким-то образом показывает фактическое назначение объекта. function Car() { _car = this; _car.accelerate = function () { ... }; }

6. Напишите кроссбраузерный код для современных браузеров, и, если вам нужна поддержка старой хрени вроде IE8 и ниже - используйте jQuery или другой фреймворк. По возможности избегайте обнаружения браузера где-либо после функции инициализатора.

7. Использовать JS Doc, когда вы можете - т.е. если ваша IDE или репо-браузер поддерживает это.

8. Написать для отладки, когда ваш код действительно сложен. то есть: не используйте function() { return { огромные куски кода, не злоупотребляйте цепочкой, не вставляйте вещи, которые могут сломаться.

9. Не используйте eval, ни автономный, ни неявный eval в setTimeout или addEventListener.