js中装饰者模式的使用以及装饰者模式和代理模式的区别

递归的无用小技巧

// 使用这种方式来进行递归当改变指针时不会报错
let factorial = (function f(num) { 
 if (num <= 1) { 
 	return 1; 
 } else { 
 	return num * f(num - 1); 
 } 
});

const fn2 = factorial
fn2() // 不会因为指针问题导致函数内部的递归报错
factorial = () => {
	return 0
}

AOP应用实例

Function.prototype.before = function(beforefn) {
	let _self = this;
	return function() {
		beforefn.apply( this, arguments );
		return _self.apply( this, arguments );
	}
}

Function.prototype.after = function(afterfn) {
	let _self = this;
	return function() {
		let ret = _self.apply( this, arguments );
		afterfn.apply( this, arguments );
		return ret;
	}
}

// 使用方法
const ajax = function( type, url, params ) {
	console.log(params)
}
const getToken = function() {
	return "token"
}

ajax = ajax.before(function( type, url, params) {
	params.Token = getToken()
})

// 上面是一个ajax 使用AOP动态修改params携带的参数token 好处是方便解耦 随时可以取消使用token或者更改token

const validata = () => {
	if( username.value === '') {
		alert ('用户名不能为空')
		return false
	} 
	if (passname.value === '') {
		alert ('密码不能为空')
		return false
	}
}
Function.prototype.validateRule = function( beforefn ) {
	let _self = this;
	return function() {
		if(beforefn.apply( this, arguments ) === false ) return
		return _self.apply( this, arguments );
	}
}

const formSubmit = function {
	let params = {
		username: username.value,
		password: password.value
	}
	ajax("xxxxxx", params)
}

formSubmit = formSubmit.validateRule( validata )
submitBtn.onclick = function() {
	formSubmit()
}

装饰者模式和代理模式

• 在学习过程中一定会有这样的疑惑这两种模式看起来和实现起来的方式非常的相似,功能也都是为对象提供一定程度的间接引用,它们的实现部分都保留了对另外一个对象的引用,并且向那个对象发送请求。
• 两者最大的区别在于它们的意图和设计目的，代理模式的目的是，当直接访问本体不方便或者不符合需求的时候，为这个本体提供一个替代者。本体定义了关键功能，而代理提供或拒绝他们的访问，或者在访问本体之前做一些额外的事情。而装饰器的作用就是为对象动态加入行为。
• 代理模式强调一种关系，代理与实体之间的关系，可以是静态的表达，也就是说在一开始就可以被确定。而装饰器用于一开始不确定对象的全部功能时，对本体的功能增强，而装饰器通常会形成一条长长的装饰链。
• 在虚拟代理实现预加载中，本体负责设置img的src，代理提供预加载功能，与装饰器不一样的是装饰者模式是实实在在的为对象增加了新的职责和行为，而代理所做的事情还是跟本体一样，最终都是设置src。