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

Question

Использование Javascript стало значительно более сложным и мощным за последние пять лет. Один из аспектов такого рода функционального программирования, с которым я борюсь, особенно с особенностями Javascript, заключается в том, как разъяснить, что происходит, посредством комментариев или кода. Зачастую для такого рода кода требуется много времени для расшифровки, даже если вы понимаете прототип, первоклассный функциональный способ Javascript. Какие-нибудь мысли или методы для того, чтобы сделать совершенно ясным, что ваш код делает и как в Javascript?

Я задавал этот вопрос в другом месте, но не получил большого ответа.

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

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

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

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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