Сокращаем JavaScript код

Владимир | | JavaScript, Web разработка.

javascript call

Эта заметка о приеме, который позволяет сократить количество JavaScript кода и сделать его легко читаемым.

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

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

function Fruits() {
	this.apples = 10;
	this.oranges = 20;
	this.pears = 30;
}

Fruits.prototype.get_apples = function() {
	return this.apples;
}

Fruits.prototype.get_oranges = function() {
	return this.oranges;
}

Fruits.prototype.get_pears = function() {
	return this.pears;
}

Создать экземпляр этого класса можно так:

var f = new Fruits;

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

Нам нужно написать функцию-обработчик, которая будет возвращать количество фруктов.

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

Первое решение, которое напрашивается само собой – использовать операторы switch или if.

Т.е. написать что-то вроде:

switch (curFruit) {
	case "apples" :
		f.get_apples();
		break;
	case "oranges" :
		f.get_oranges();
		break;
	case "pears" :
		f.get_pears();
		break;
	default :
		alert("unknown");
}

Безусловно, этот код работать будет, но есть более элегантное решение:

if (typeof f["get_" + curFruit] == "function") {
	f["get_" + curFruit]();
}
else {
	alert("unknown");
}

Разберем его подробнее. На JavaScript к любому методу класса можно обратиться как к элементу массива. Т.е. f["get_apples"]() работает точно также как и f.get_apples().

Смысл в том, что в названии элемента массива – это обычная строка, и для ее формирования можно использовать любые переменные (в данном случае к приставке "get_" мы добавляем curFruit).

Теперь взгляните на использование оператора typeof. Он просто возвращает тип объекта. В данном примере мы используем его для того, чтобы определить существует выбранный метод или нет.

Очень важно. При использовании typeof можно легко ошибиться. Посмотрите на следующие две строки.

typeof f["get_" + curFruit] //возвращает "function"
typeof f["get_" + curFruit]() //возвращает "number"

или

typeof f.get_apple //возвращает "function"
typeof f.get_apple() //возвращает "number"

В первой строке оператору typeof передан метод класса, во второй – значение, которое этот метод возвращает (т.е. число 10). Разница только в круглых скобках в конце выражения.

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

Все вопросы и замечания – пишите в комментариях.

До встречи!

  • Хороший подход и правильный! Как всегда отличная заметка 🙂

  • Хороший подход и правильный! Как всегда отличная заметка 🙂

  • Чистяков Денис

    Подход интересный и полезный, но лично мне больше импонирует другой способ создания «классов» в JavaScript'ах — не через использование прототипов, а через прямое создание методов:

    // Конструктор.
    function NewClass() {
    this.property = 123;
    // Создаем методы класса прямо в конструкторе.
    this.method1 = function(x) {
    alert("Вызван method1("+x+")");
    }
    // То же самое.
    this.method2 = function(x) {
    alert("Вызван method2("+x+")");
    this.method1();
    }
    }

    // Создаем объект и проверяем работу.
    var obj = new NewClass();
    obj.method1(10);

    подробнее: Большие хитрости JavaScript

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

    • Да, способ удобный. Почему-то не встречал его раньше. Вообще мне никогда не нравилось, что на JavaScript код класса можно разбросать по всему скрипту.

      Кстати, отличная статья!

  • Чистяков Денис

    Подход интересный и полезный, но лично мне больше импонирует другой способ создания «классов» в JavaScript'ах — не через использование прототипов, а через прямое создание методов:

    // Конструктор.
    function NewClass() {
    this.property = 123;
    // Создаем методы класса прямо в конструкторе.
    this.method1 = function(x) {
    alert("Вызван method1("+x+")");
    }
    // То же самое.
    this.method2 = function(x) {
    alert("Вызван method2("+x+")");
    this.method1();
    }
    }

    // Создаем объект и проверяем работу.
    var obj = new NewClass();
    obj.method1(10);

    подробнее: Большие хитрости JavaScript

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

    • Да, способ удобный. Почему-то не встречал его раньше. Вообще мне никогда не нравилось, что на JavaScript код класса можно разбросать по всему скрипту.

      Кстати, отличная статья!

  • Чистяков Денис

    Ой, пардон ссылка вставилась не так как хотел, подправь, если не сложно.

    • Исправил, надеюсь правильно 🙂

      • Чистяков Денис

        Да, спасибо.
        Там в принципе три статьи, как минимум повещены JavaScript, все очень стоящие и все актуальны и сейчас хотя написаны достаточно давно.
        Котерова, вообще интересно читать и очень познавательно, для PHP, Perl и JS разработчиков.

  • Чистяков Денис

    Ой, пардон ссылка вставилась не так как хотел, подправь, если не сложно.

    • Исправил, надеюсь правильно 🙂

      • Чистяков Денис

        Да, спасибо.
        Там в принципе три статьи, как минимум повещены JavaScript, все очень стоящие и все актуальны и сейчас хотя написаны достаточно давно.
        Котерова, вообще интересно читать и очень познавательно, для PHP, Perl и JS разработчиков.

  • Pingback: Мир CSS » Как сократить JavaScript код()

  • Хм… Фабррика?

    • Честно говоря, не понял. Какая фабрика?

  • Хм… Фабррика?

    • Честно говоря, не понял. Какая фабрика?

  • типичные методы объекто-ориентированного программирования + особенности, характерные именно для javascript. Cпасибо за статью, буду применять на практике.

  • типичные методы объекто-ориентированного программирования + особенности, характерные именно для javascript. Cпасибо за статью, буду применять на практике.

  • Что-то я тоже про фабрику не понял не много!

  • Что-то я тоже про фабрику не понял не много!

  • действительно подробней про фабрику если можно

  • действительно подробней про фабрику если можно

  • Pingback: Ассемблер для начинающих. Урок 1 - Вызов API функций. « Блог для Программистов()

  • Я новичок, и мне тяжело понять про фабрику… я слыхала на плюсах есть такое. оказывается и здесь тоже..Только все равно тяжело понять. Вижу я здесь не одна такая)

  • Я новичок, и мне тяжело понять про фабрику… я слыхала на плюсах есть такое. оказывается и здесь тоже..Только все равно тяжело понять. Вижу я здесь не одна такая)

  • Вероятно, имелся ввиду паттерн проектирования абстрактная фабрика.

    Интересно, как именно Scratch предлагает его использовать в этом примере? (правильный ответ — никак, он тут не подходит без полного перепроектирования).

    • Спасибо за ссылку. Но я не совсем понимаю что тут можно перепроектировать. Пример ведь написан для того, чтобы показать особенности JS. Точнее то, что к методу объекта можно обратиться как к элементу массива.
      На мой взгляд, чтобы был смысл в Factory нужно вообще другой пример подобрать. Объект ведь в данном случае один, а Factory паттерн предназначен для создания разных объектов и при этом у них должны быть методы с одинаковыми именами. Здесь обратная ситуация.

  • Вероятно, имелся ввиду паттерн проектирования абстрактная фабрика.

    Интересно, как именно Scratch предлагает его использовать в этом примере? (правильный ответ — никак, он тут не подходит без полного перепроектирования).

    • Спасибо за ссылку. Но я не совсем понимаю что тут можно перепроектировать. Пример ведь написан для того, чтобы показать особенности JS. Точнее то, что к методу объекта можно обратиться как к элементу массива.
      На мой взгляд, чтобы был смысл в Factory нужно вообще другой пример подобрать. Объект ведь в данном случае один, а Factory паттерн предназначен для создания разных объектов и при этом у них должны быть методы с одинаковыми именами. Здесь обратная ситуация.