学习JavaScript设计模式之装饰者模式
有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。
装饰着模式可以动态地给某个对象添加一些额外的职责，从而不影响这个类中派生的其他对象。
装饰着模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。
一、不改动原函数的情况下，给该函数添加些额外的功能
1. 保存原引用
window.onload = function() {
console.log(1);
};
var _onload = window.onload || function() {};
window.onload = function() {
_onload();
console.log(2);
}
问题：
（1）必须维护中间变量
（2）可能遇到this被劫持问题
在window.onload的例子中没有这个烦恼，是因为调用普通函数_onload时，this也指向window，跟调用window.onload时一样。
2. this被劫持：
var _getElementById = document.getElementById;
document.getElementById = function(id) {
console.log(1);
return _getElementById(id);
}
return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”
因为_getElementById是全局函数，当调用全局函数时，this是指向window的，而document.getElementById中this预期指向document。
3. 解决this被劫持：
var _getElementById = document.getElementById;
document.getElementById = function(id) {
console.log(1);
return _getElementById.call(document, id);
}
二、用AOP装饰函数
/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
var _self = this;
return function() {
beforefn.apply(this, arguments); // 新函数接收的参数会被原封不动的传入原函数
return _self.apply(this, arguments);
};
};
/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
var _self = this;
return function() {
var ret = _self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
};
};
document.getElementById = document.getElementById.before(function() {
console.log(1);
});
三、避免污染原型
var before = function(fn, beforefn) {
return function() {
beforefn.apply(this, arguments);
return fn.apply(this, arguments);
};
};
var after = function(fn, afterfn) {
return function() {
var ret = fn.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
};
};
document.getElementById = before(document.getElementById, function(){
console.log(1);
});
四、示例–插件式的表单验证
结合《学习JavaScript设计模式之策略模式》中的【表单验证】，运用到ajax提交数据验证，效果很棒！
修改上述before方法
var before = function(fn, beforefn) {
return function() {
if(beforefn.apply(this, arguments) === false) {
// beforefn返回false，直接return，不执行后面的原函数
return;
}
return fn.apply(this, arguments);
};
};
/* 模拟数据验证*/
var validate = function() {
if(username === "") {
console.log("验证失败！");
return false;
}
return true;
}
/* 模拟ajax提交*/
var formSubmit = function() {
console.log("提交！！！");
}
username = 1; formSubmit = before(formSubmit, validate); // 提交！！！ formSubmit(); username = ""; formSubmit = before(formSubmit, validate); // 验证失败！ formSubmit();
五、装饰者模式和代理模式
相同点：这两种模式都描述了怎么为对象提供一定程度上的间接引用，它们的实现部分都保留了对另外一个对象的引用，并且向那个对象发送请求。
区别：
（1）代理模式：当直接访问本地不方便或者不符合需求时，为这个本体提供一个替代者。本地定义关键功能，而代理提供或拒绝对它的访问，或者在访问本体之前走一些额外的事情。（其做的事情还是跟本体一样）
（2）装饰者模式：为对象动态加入行为。（一开始不能确定对象的全部功能，实实在在的为对象添加新的职责和行为）
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
JavaScript验证18位身份证号码最后一位正确性的实现代码
这篇文章主要介绍了JavaScript验证18位身份证号码最后一位正确性的实现代码,小编亲测有效,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了JS实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要为大家详细介绍了js实现动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍了小程序实现上下切换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
单例模式（Singleton Pattern）是一种创建型设计模式,确保一个类只有一个实例,并提供全局访问该实例的方式,这在某些场景下非常有用,例如配置管理类、日志类或数据库连接管理类,需要的朋友可以参考下2024-08-08
在JavaScript可以使用try...catch来进行异常处理，下面有个不错的示例，大家可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要给大家介绍了关于如何在微信小程序实现一个幸运转盘小游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了js最全的数组的降维5种办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
用javascript[js]实现的必须经过点击才能出现严重码效果代码2008-04-04
最新评论