Сокращаем JavaScript код
Эта заметка о приеме, который позволяет сократить количество 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, Web разработка Комментарии (14) »
Комментарии (14)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Хороший подход и правильный! Как всегда отличная заметка
Подход интересный и полезный, но лично мне больше импонирует другой способ создания «классов» в 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. Cпасибо за статью, буду применять на практике.
Что-то я тоже про фабрику не понял не много!
действительно подробней про фабрику если можно
Я новичок, и мне тяжело понять про фабрику… я слыхала на плюсах есть такое. оказывается и здесь тоже..Только все равно тяжело понять. Вижу я здесь не одна такая)