Роль шаблона проектирования JavaScript заключается в улучшении повторного использования и читаемости кода, что облегчает поддержание и расширение кода.
В JavaScript функция - это класс объектов, что означает, что ее можно передавать как параметр для других функций; Кроме того, функция также может обеспечить масштаб.
Синтаксис для создания функции
Названные функции выражения
Кода -копия выглядит следующим образом:
// Имя Функциональное выражение
var add = function add (a, b) {
вернуть A+B;
};
Функциональные выражения
Кода -копия выглядит следующим образом:
// также известный как анонимная функция
var add = function (a, b) {
вернуть A+B;
};
Значение, назначенное переменной, является само определение функции. Таким образом, добавление становится функцией, которую можно назвать в любом месте.
Объявление функций
Кода -копия выглядит следующим образом:
функция foo () {
// код здесь
} // Здесь не требуется полуколон
При трейлинге полуколоны выражения функций всегда должны использовать полуколоны, а окончание полуколонов не требуется в объявлении функции.
Функциональные объявления и выражения
Продвижение функции (подъем)
Поведение объявления функции не эквивалентно именованному выражению функции. Разница - это поведение поднятия. См. Следующий пример:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// Глобальная функция
function foo () {alert ("Global foo!");}
функция bar () {alert ('global bar');}
функция hoist () {
console.log (typeof foo); // function
console.log (typeof bar); // не определен
foo (); // местный foo!
bar (); // typeerror: «не определяется» не является функцией
// переменные Foo и Eupreler повышаются
функция foo () {
оповещение ('Local foo! ');
}
// Продвигается только переменная полоса, часть реализации функции не повышается
var bar = function () {
оповещение ('local Bar!');
};
}
подъем ();
</script>
Для всех переменных, где бы они ни были объявлены в теле, они внутренне продвигаются на вершину функции. Причина общего применения функций заключается в том, что функции представляют собой только объекты, назначенные переменным.
Как следует из названия, улучшение означает упоминание следующих вещей на вершину. В JS он должен обновить вещи, определенные в следующем (переменные или функции) до предыдущего определения. Как видно из приведенного выше примера, Foo и Bar в функциональном подъеме внутри функции перемещаются на вершину, охватывая, таким образом, глобальные функции Foo и Bar. Разница между локальной функцией и Foo заключается в том, что FOO продвигается на вершине и может работать нормально, в то время как определение BAR () не было улучшено, только ее объявление продвигается. Следовательно, когда bar () выполняется, результат не определен, а не используется в качестве функции.
Режим функции в реальном времени
Функции также являются объектами, поэтому их можно использовать в качестве возвращаемых значений. Преимущество использования функций самообучения состоит в том, чтобы напрямую объявить анонимную функцию и немедленно использовать ее, чтобы избежать определения функции, которая не используется один раз, и она свободна от проблемы именования конфликтов. В JS нет концепции пространства имен, поэтому легко иметь конфликты с именем функции. Как только конфликт с именованием вступит, последний объявил, что один должен преобладать.
Режим 1:
Кода -копия выглядит следующим образом:
<Скрипт>
(function () {
var a = 1;
return function () {
предупреждение (2);
};
} () ()); // pop 2, первые скобки выполняются, а вторые скобки выполняют внутреннюю анонимную функцию
</script>
Паттерн 2: Указывание переменных функции самостоятельного выполнения
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var result = (function () {
возврат 2;
}) (); // функция была выполнена здесь
оповещение (результат); // Результат указывает на возвращаемое значение 2 самостоятельной функции; Если result () появится, произойдет ошибка.
</script>
Образец третий: вложенные функции
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var result = (function () {
return function () {
возврат 2;
};
}) ();
Alert (result ()); // 2 появляется при оповещении (результат); function () {return 2}
</script>
Режим 4: Функция самовосставления присваивает его возвращаемое значение переменной
Кода -копия выглядит следующим образом:
var abc = (function () {
var a = 1;
return function () {
return ++ a;
}
}) (); // Функция самостоятельной работы возвращает функцию после возвращения к переменной
alert (abc ()); // Если он предупреждает (ABC), появится код после возврата; Если это ABC (), функция после возврата будет выполнена
Шаблон 5: функция выполняется внутри, рекурсивно
Кода -копия выглядит следующим образом:
// это функция самостоятельной работы, функция выполняется внутри, рекурсивно
function abc () {abc (); }
Режим обратного вызова
Функция обратного вызова: Когда вы передаете функцию write () в качестве аргумента в другой функцию call (), то Call () может выполнить (или call) write () в какой -то момент. В этом случае write () называется функцией обратного вызова.
Асинхронное слушатель событий
Режим обратного вызова имеет много применений, например, когда слушатель событий прикреплен к элементу на странице, он фактически дает указатель на функцию обратного вызова, которая будет вызвана при возникновении события. нравиться:
Кода -копия выглядит следующим образом:
document.addeventlistener ("click", console.log, false);
Приведенный выше пример кода показывает консоль функции обратного вызова. Log () в режиме пузырьков, когда нажимает документ.
JavaScript особенно подходит для программирования, управляемого событиями, потому что режим обратного вызова поддерживает программы для работы асинхронно.
время
Другим примером использования режима обратного вызова является использование метода тайм -аута, предоставленного объектом Window Brower's Owind: setTimeout () и setInterval (), например:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var call = function () {
console.log ("100 мс будет спросить ...");
};
setTimeout (звонок, 100);
</script>
Режим обратного вызова в библиотеке
При разработке библиотеки JS функция обратного вызова пригодится. Код библиотеки должен как можно больше использовать многоразовый код, и обратный вызов может помочь достичь этого обобщения. Когда мы разрабатываем огромную библиотеку JS, факт заключается в том, что пользователям не нужна большая часть ее, мы можем сосредоточиться на основных функциях и предоставлять функции обратного вызова в «форме крюка», что облегчит нам создание, масштабирование и настраивание библиотечных методов
Каррики
Карринг - это метод, который преобразует функцию в новую упрощенную (в меньшее количество параметров) функцию, заполняя несколько параметров в корпус функции. ― 【Опытный в JavaScript】
Проще говоря, карризация - это процесс преобразования, то есть процесс преобразования нашей функции. Как показано в следующем примере:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// Функция ADD () на основе карри
функция добавить (x, y) {
var oldx = x, oldy = y;
if (typeOf Oldy == "не определен") {
вернуть функцию (newy) {
вернуть Oldx + Newy;
};
}
// полное приложение
вернуть x+y;
}
//тест
TypeOf add (5); // Выход "Функция"
Добавить (3) (4); // 7
// Создать и хранить новую функцию
var add2000 = add (2000);
add2000 (10); // Выход 2010
</script>
Когда add () вызывает впервые, он создает закрытие для возвращенной внутренней функции. Это закрытие хранит исходные значения x и y в частных переменных Oldx и Oldy.
Теперь мы сможем использовать произвольную функцию общие методы карри, такие как:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// нормальные функции
функция добавить (x, y) {
вернуть x + y;
}
// карри функция для получения новой функции
var newadd = test (add, 5);
Newadd (4); // 9
// другой вариант, вызовите новую функцию напрямую
Тест (добавить, 6) (7); // Выход 13
</script>
Когда использовать карри
Когда обнаруживается, что одна и та же функция вызывается, и большая часть пропущенных параметров одинакова, тогда функция может быть хорошим кандидатом на причал