Полезные шаблоны проектирования в JavaScript
В этом посте мы познакомимся со следующими шаблонами проектирования в JavaScript:
- Функции как абстракции
- Функции для создания модулей
- Немедленно вызываемые функциональные выражения (IIFE)
Функции как абстракции
Функция может быть передана как указатель и обернута в вызов:
var work = function()
{
console.log("working hard");
}
var doWork = function(f)
{
console.log("starting");
try
{
f();
}
catch(ex)
{
console.log(ex);
}
console.log("ending");
}
doWork(work);
Функции для создания модулей
Функции могут быть использованы как объекты, которые имеют члены, методы и приватные переменные:
var worker = createWorker();
worker.job1();
worker.job2();
Этого можно добиться так:
var createWorker = function()
{
return
{
job1: function()
{
console.log("task1");
},
job2: function()
{
console.log("task2");
}
};
}
Или лучше так:
var createWorker = function()
{
// Private variable
var workCount = 0;
var task1 = function()
{
workCount+=1;
console.log("task1" + workCount);
};
var task2 = function()
{
workCount+=1;
console.log("task2" + workCount);
};
return
{
job1: task1,
job2: task2
};
};
var worker = createWorker();
Немедленно вызываемые функциональные выражения (IIFE)
Один из недостатков вышеприведенных шаблонов – это то, что мы создаем глобальные переменные. К примеру, createWorker – это глобальная переменная. createWorker создает такие scopes и переменные, как workCount, task1 и task2, которые видны только внутри createWorker. В Javascript глобальные переменные – это зло. Очень легко переопределить глобальную переменную, объявленную кем-то еще. Как же нам избежать этого? Один способ – это обернуть createWorker внутрь другой функции:
var program = function()
{
var createWorker = function()
{
// Private variable
var workCount = 0;
var task1 = function()
{
workCount+=1;
console.log("task1" + workCount);
};
var task2 = function()
{
workCount+=1;
console.log("task2" + workCount);
};
return
{
job1: task1,
job2: task2
};
};
var worker = createWorker();
worker.job1();
worker.job2();
}
program();
Однако, тут мы по-прежнему имеем глобальную переменную program. Как мы можем избавиться и от нее? Введя такое понятие, как IIFE – immediately-invoked function expression (немедленно вызываемое функциональное выражение):
(function()
{
var createWorker = function()
{
// Private variable
var workCount = 0;
var task1 = function()
{
workCount+=1;
console.log("task1" + workCount);
};
var task2 = function()
{
workCount+=1;
console.log("task2" + workCount);
};
return
{
job1: task1,
job2: task2
};
};
var worker = createWorker();
worker.job1();
worker.job2();
}());
Теперь все переменные определены в IIFE. Этот шаблон используется в большом количестве JavaScript-библиотек – например, таких как JQuery. По мотивам www.madhur.co.in
Leave a Comment