Javascript: лучший код / ​​лучший дизайн справки

Question

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

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

Является ли это прототипом с использованием замыкания или просто изящным стилизованным способом сделать что-то вместо того, чтобы делать это в обычном смысле:

Function doThis(el, type, fn){ ... }

Мой главный вопрос: зачем вам использовать этот метод ниже, и каковы его преимущества?

Заранее благодарю за помощь и терпение.

var addEvent = function() {
  if (window.addEventListener) {
    return function(el, type, fn) {
      el.addEventListener(type, fn, false);
    };
  } else if (window.attachEvent) {
    return function(el, type, fn) {
      var f = function() {
        fn.call(el, window.event);
      };
      el.attachEvent('on' + type, f);
    };
  }
}();

Источник: Учебник по Javascript

Answer 1

Код, который вы разместили, логически идентичен:

var addEvent;
if (window.addEventListener) {
  addEvent = function(el, type, fn) {
    el.addEventListener(type, fn, false);
  };
} else if (window.attachEvent) {
  addEvent = function(el, type, fn) {
    var f = function() {
      fn.call(el, window.event);
    };
    el.attachEvent('on' + type, f);
  };
}

Но есть и преимущества:

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

Answer 2

Обычно вы назначаете функции переменным при создании класса в Javascript.

function MyObject() {
 this.WhoAmI = function()
    {
       return "I don't know";
    };

} 

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

Вы также можете передать функцию в качестве параметра другой функции.В основном делегат в C #.

Answer 3

Похоже на оптимизацию скорости по сравнению с простым определением функции.

Представь, что у тебя было

Function addEvent(el, type, fn){
   if (window.addEventListener) {
      el.addEventListener(type, fn, false);
   } else if (window.attachEvent) {
      var f = function() {
         fn.call(el, window.event);
       };
      el.attachEvent('on' + type, f);
   }
}

Это кросс-браузерная функция для добавления события, которое работает так же, как в примере, который вы опубликовали. Разница возникает, когда у вас тысячи вызовов addEvent.

В примере, который вы разместили, функция «упрощена» и «материализована» для каждого типа браузера во время запуска (обратите внимание на «();» в конце)

вы получите либо

var addEvent = function(el, type, fn) {
  el.addEventListener(type, fn, false);
};

или

var addEvent= function(el, type, fn) {
  var f = function() {
    fn.call(el, window.event);
  };
  el.attachEvent('on' + type, f);
};

в зависимости от браузера. После этого выбор никогда не будет переоценен (это будет бесполезно, так как браузер не изменится во время выполнения ;-). Следовательно, функция избегает 1 или 2 тестов каждый раз, когда вызывается функция addEvent! Это может иметь значение для такой интенсивной функции использования, как addEvent.

Надеюсь, это поможет вам,

Джером Вагнер

Answer 4

Это аккуратный способ написания функций.Это не замыкание, скажем так, больше, чем обычная функция.Что действительно становится классным в этом способе объявления функций, так это то, что становится легче писать объектно-ориентированный JavaScript.Возьмите этот пример:

var COMMON = {};
COMMON.Util = {};
COMMON.Util.Sort = function(aArray,fCompare){...};

Перечисленная функция также показывает еще один интересный аспект JavaScript, функции могут быть переданы / возвращены, что приводит к некоторым интересным методам программирования.

Answer 5

Это не ...

• Закрытие - это когда вы обращаетесь к переменной, которая выходит за рамки, но детали обрабатываются средой
• Прототипирование - это когда вы добавляете функции или базовый класс объекта

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

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

Не уверен, что я ответил на ваш вопрос, но мне было приятно ....