概念
装饰者(decorator)模式能够在不改变对象自身的基础上,动态的给某个对象添加额外的职责,不会影响原有接口的功能。
模拟传统面向对象语言的装饰者模式
//原始的飞机类 var Plane = function () { }; Plane.prototype.fire = function () { console.log('发射普通子弹'); }; //装饰类 var MissileDecorator = function (plane) { this.plane = plane; } MissileDecorator.prototype.fire = function () { this.plane.fire(); console.log('发射导弹!'); }; var plane = new Plane(); plane = new MissileDecorator(plane); plane.fire();
JavaScript中的装饰器模式
var Plane = { fire: function () { console.log('发射普通的子弹'); } }; var missileDecorator= function () { console.log('发射导弹!'); }; var fire = Plane.fire; Plane.fire=function () { fire(); missileDecorator(); }; Plane.fire();
对 window.onload 进行装饰例子
window.onload=function () { console.log('onload'); }; var _onload= window.onload || function () {}; window.onload=function () { _onload(); console.log('自己的处理函数'); };
使用AOP(面向切面编程)装饰函数
主要是以为在JavaScript中会存在随着函数的调用,this
的指向发生变化,导致执行结果发生变化。
封装before函数
在需要执行的函数之前执行某个新添加的功能函数
//是新添加的函数在旧函数之前执行 Function.prototype.before=function (beforefn) { var _this= this; //保存旧函数的引用 return function () { //返回包含旧函数和新函数的“代理”函数 beforefn.apply(this,arguments); //执行新函数,且保证this不被劫持,新函数接受的参数 // 也会被原封不动的传入旧函数,新函数在旧函数之前执行 return _this.apply(this,arguments); }; };
封装 after 函数
在需要执行的函数之后执行某个新添加的功能函数
//新添加的函数在旧函数之后执行 Function.prototype.after=function (afterfn) { var _this=this; return function () { var ret=_this.apply(this,arguments); afterfn.apply(this,arguments); return ret; }; };
表单验证
Function.prototype.before=function (beforefn) { var _this= this; //保存旧函数的引用 return function () { //返回包含旧函数和新函数的“代理”函数 beforefn.apply(this,arguments); //执行新函数,且保证this不被劫持,新函数接受的参数 // 也会被原封不动的传入旧函数,新函数在旧函数之前执行 return _this.apply(this,arguments); }; }; var validata=function () { if(username.value===''){ alert('用户名不能为空!') return false; } if(password.value===''){ alert('密码不能为空!') return false; } } var formSubmit=function () { var param={ username=username.value; password=password.value; } ajax('post','http://www.xxx.com',param); } formSubmit= formSubmit.before(validata); submitBtn.onclick=function () { formSubmit(); }