javaScript设计模式之装饰者模式

叁歲伎倆 2022-09-22 03:51 154阅读 0赞

## 1.介绍 ##

装饰者模式能够在不改变对象自身的基础上，在程序运行期间对对象动态的添加职责。与继承相比，装饰者是一种更加轻便灵活的做法，这是一种“即用即付”的方式。

## 2.实例引入 ##

<span style="font-size:14px;">	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 AtomDecorator = function( plane ){
    		this.plane = plane;
    	}
    	AtomDecorator.prototype.fire = function(){
    		this.plane.fire();
    		console.log( '发射原子弹' );
    	}
    
    	var plane = new Plane();
    	plane = new MissileDecorator( plane );
    	plane = new AtomDecorator( plane );
    	plane.fire();</span>

这种给对象以一条链的方式进行引用，形成了一个聚合对象，这些对象都拥有相同的接口（fire)方法，当请求达到链中的某个对象时，这个对象会执行自身的操作，随后把请求转发给链中的下一个对象。

改写对象或者对象的某个方法，并不需要使用“类”来装饰实现装饰者模式：

下面引入一个AOP装饰函数，其中把职责分为更细的函数，随后通过装饰者把他们合并到一起。

<html>
    <body>
    	用户名：<input id="username" type="text"/>
    
    	密码： <input id="password" type="password"/>
    	<input id="submitBtn" type="button" value="提交"></button>
    </body>
    <script>
    	var username = document.getElementById( 'username' ),
    	password = document.getElementById( 'password' ),
    	submitBtn = document.getElementById( 'submitBtn' );
    	var formSubmit = function(){
    		if ( username.value === '' ){
    			return alert ( '用户名不能为空' );
    		}
    		if ( password.value === '' ){
    			return alert ( '密码不能为空' );
    		}
    		var param = {
    			username: username.value,
    			password: password.value
    		}
    		ajax( 'http:// xxx.com/login', param ); // ajax 具体实现略
    	}
    
    	submitBtn.onclick = function(){
    		formSubmit();
    	}
    
    
    	var validata = function(){
    		if ( username.value === '' ){
    			alert ( '用户名不能为空' );
    			return false;
    		}
    		if ( password.value === '' ){
    			alert ( '密码不能为空' );
    			return false;
    		}
    	}
    
    	var formSubmit = function(){
    		if ( validata() === false ){ // 校验未通过
    			return;
    		}
    		var param = {
    			username: username.value,
    			password: password.value
    		}
    		ajax( 'http:// xxx.com/login', param );
    	}
    
    
    	submitBtn.onclick = function(){
    		formSubmit();
    	}
    
    	Function.prototype.before = function( beforefn ){
    		var __self = this;
    		return function(){
    			if ( beforefn.apply( this, arguments ) === false ){
    	// beforefn 返回false 的情况直接return，不再执行后面的原函数
    				return;
    			}
    			return __self.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( 'http:// xxx.com/login', param );
    	}
    
    	formSubmit = formSubmit.before( validata );
    
    	submitBtn.onclick = function(){
    		formSubmit();
    	}
    	
    </script>
    </html>

这段代码验证和输入完全分离开来，他们不再有任何偶和关系。其中formSubmit 函数除了提交ajax请求以外，还要验证用户输入的合法性；分离校验输入和提交ajax请求的代码，把输入的逻辑放到validata函数中，并且约定validate函数返回false的时候表示验证未通过。

## 总结    ##

装饰者模式和代理模式的结构看起来非常像，这两种模式都描述了怎样为对象提供一定程度上的间接引用，他们实际上都保留了对另外一个对象的引用，并且对那个对象发送请求。代理模式强调Proxy与它的实体之间的关系，这种关系一开始就被确定，可以静态的表达。而装饰者模式用于一开始不能确定对象的全部功能时，代理模式通常只有一层代理-本体的引用，而装饰者模式通常会形成一条长长的装饰链。比如在代理图片预加载的例子中，本体负责设置img节点的src，代理则提供预加载的功能，这看起来也是“加入行动”的一种方式；而装饰者模式是实实在在的为对象增加新的职责和行为，而代理做的事情还是和本体一样，最终都是设置src。