В традиционных объектно-ориентированных языках добавление функций в объекты часто используют наследование, но метод наследования может вызвать проблемы: когда родительский класс изменяется, все его подклассы будут соответствующим образом изменяться.
Когда работает сценарий JavaScript, добавление поведения в объект (или на его прототип) влияет на все экземпляры этого объекта.
Декоратор является альтернативой реализации наследования, которая добавляет новые функции с помощью перегруженных методов. Этот шаблон может добавить свое собственное поведение до или после декоратора, чтобы достичь определенной цели.
Узор декоратора - это способ динамически добавить больше функций к существующим функциям. Каждая функция, которая будет украшена, помещается в отдельную функцию, а затем используйте эту функцию, чтобы обернуть существующий объект функции, который будет украшен. Поэтому, когда необходимо выполнить специальное поведение, вызовный код может выборочно и последовательно использовать функцию декорирования для обертывания объекта по мере необходимости. Преимущество заключается в том, что он отличает основные обязанности класса (функции) от декоративной функции.
Мы можем определить функции инструментов следующим образом:
Function.prototype.before = function (передфн) {var self = this; // Сохранить ссылку исходной функции Function Function () {// возвращать функцию прокси, которая содержит новую функцию и исходную функцию передфн.апли (это, аргументы); // выполнить новую функцию и убедиться, что это не угнает return self.apply (это, аргументы); // Выполните исходную функцию и верните результат выполнения исходной функции и убедитесь, что это не захвачено}}; Function.prototype.after = function (atherfn) {var self = this; return function () {var ret = self.apply (this, аргументы); Afterfn.Apply (это, аргументы); возврат возврата; }};Параметры передфн и Afterfn Вот новые функции (добавить украшение) для расширения новых функций для исходной функции. Единственная разница между ними - это различный порядок выполнения. Если вы не хотите загрязнять прототип функции, вы можете использовать следующий метод:
var до = function (fn, передфн) {return function () {передфн.apply (это, аргументы); вернуть fn.apply (это, аргументы); }}; var After = function (fn, efefn) {return function () {var ret = fn.Apply (this, arguments); Afterfn.Apply (это, аргументы); вернуть вт; }};Пример: поместите параметр в HTTP -запрос, чтобы предотвратить атаки CSRF
var ajax = function (type, url, param) {console.log (param); // Отправить код запроса ajax немного ...}; var передфн = function (type, url, param) {param.token = 'token';}; ajax = ajax.before (передфн); ajax ('get', 'http: //...com/userinfo', {name: 'sufa'}); }Динамически украшая параметры токена для функции AJAX, вместо того, чтобы напрямую изменять параметры на исходной функции, функция AJAX по -прежнему является чистой функцией, улучшая его повторную возможность, и ее можно напрямую использовать в других проектах без каких -либо модификаций.
Пример: проверка формы (отделяйте ввод проверки от представленной формы кода, а затем динамически украсить входную функцию проверки перед представленной формой.
// подтвердите функцию ввода var valyata = function () {if (username.value === '') {alert («Имя пользователя не может быть пустым»); вернуть ложь; } if (password.value === '') {alert ('пароль не может быть пустым'); вернуть ложь; }}; // Функция подчинения формы var forceUbmit = function () {var param = {username: username.value, пароль: пароль.value}; ajax ('http://xxx.com/login', param);}; forsubmit = formbmit.before (validata); opperbtn.onclick = function () {forsubmit ();};Список литературы: «Паттерн JavaScript» «Образец проектирования и разработки JavaScript»
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.