职责链模式

什么是职责链模式？

  职责链模式的定义是解耦请求的发送者和请求的接受者，所有的对象都有机会执行，直到有对象处理请求为止。

  职责链的作用是让业务代码更具可维护性和可拓展性。

 

什么时候使用职责链？

例如：

1、给一个未知的元素里面添加一个按钮，并且给这个按钮添加一个点击事件

2、电商平台的优惠券：交满500元定金，得100优惠券；交满200元定金，50优惠券；没交定金的，按普通用户算，没有优惠券。

等等... 

需求多变的时候，需要考虑适应多种情况，可以考虑职责链是否可以封装业务代码。

 

怎么用职责链模式实现上面第二个需求？

考虑到未来可能会有新的类型，比如交满300元定金，得60元优惠券，然后不要交满200元定金这个需求，如何编写代码来更好的适配我们多变的需求？

let order500 = function( orderType, pay, stock ){
	if ( orderType === 1 && pay === true ){
			console.log( '500 元定金预购，得到100 优惠券' );
	}else{
			return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递,解耦
	}
};

let order200 = function( orderType, pay, stock ){
	if ( orderType === 2 && pay === true ){
			console.log( '200 元定金预购，得到50 优惠券' );
	}else{
			return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递
	}
};

let orderNormal = function( orderType, pay, stock ){
	if ( stock > 0 ){
			console.log( '普通购买，无优惠券' );
	}else{
			console.log( '手机库存不足' );
	}
};

let Chain = function( fn ){
	this.fn = fn;
	this.successor = null;
};

Chain.prototype.setNextSuccessor = function( successor ){
	return this.successor = successor;
};

Chain.prototype.passRequest = function(){
  
	let ret = this.fn.apply( this, arguments );//从执行chainOrder500开始，如果满足条件就会停止往下执行
	if ( ret === 'nextSuccessor' ){//如果执行chainOrder500没有满足条件就会返回nextSuccessor，执行下个函数
			return this.successor && this.successor.passRequest.apply( this.successor, arguments );
	}
	return ret;
};

//创建对象-节点
let chainOrder500 = new Chain( order500 );
let chainOrder200 = new Chain( order200 );
let chainOrderNormal = new Chain( orderNormal );

//将对象（节点）串成链
chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );

//执行测试
chainOrder500.passRequest( 1, true, 500 ); // 输出：500 元定金预购，得到100 优惠券
chainOrder500.passRequest( 2, true, 500 ); // 输出：200 元定金预购，得到50 优惠券
chainOrder500.passRequest( 3, true, 500 ); // 输出：普通购买，无优惠券
chainOrder500.passRequest( 1, false, 0 ); // 输出：手机库存不足

 

项目中的实际场景：

多种类型的复制链接的操作，也可以将业务代码用职责链来封装

1、

      copyLink() {
        const result = copyMethods({
            content: this.qr
        })
        if(result){
            this.$message.success('复制图片url成功！')
        } else {
            this.$message.error('复制失败')
        }
      },

　　

 2、

 

　　

        copy(content, e){
            const el = e.target.parentNode.querySelector('.piece-content')
            const result = copyMethods({ content, el })
            if(result){
                this.$message.success('成功复制文本')
            } else {
                this.$message.error('复制失败')
            }
        },

　

具体实现：　

function copyWithRange({ el }){
	if(!el || !document.createRange) return 'next'

	let range = document.createRange()
	range.selectNode(el)
	window.getSelection().addRange(range)

	const result = document.execCommand('copy')

	window.getSelection().removeAllRanges()
	return result
}

function copyWithClipEvent({ content }){
	function copy (e) {
			// content = `<${content}/>`
			e.clipboardData.setData('text/plain', content)
			e.preventDefault()
	}
	// 添加 copy 内容
	document.addEventListener('copy',copy)
	// 执行 copy 命令
	const result = document.execCommand('copy')
	// 移除绑定事件
	document.removeEventListener('copy',copy)
	return result
}

function copyWithInput({ content }){
	let aux = document.createElement('input')
	aux.setAttribute('value', content)
	document.body.appendChild(aux)

	aux.select()
	window.getSelection().toString()

	const result = document.execCommand('copy')
	document.body.removeChild(aux)

	return result
}

//职责链封装三个快捷复制的操作
function copyMethods({ content, el }){
	const fns = [
			copyWithRange,
			copyWithClipEvent,
			copyWithInput,
	]
	const fnChains = chain(fns)
	return fnChains({ content, el })
}

function after(fn, afterFn){
	return function(...args){
			const result = fn.apply(this, args)
			if(result === 'next'){
					return afterFn.apply(this, args)
			}
			return result
	}
}

function chain(fns){
	return fns.reduce((pre, next) => {
			return after(pre, next)
	})
}

　　

 

参考资料：

https://zhuanlan.zhihu.com/p/28327127

https://www.cnblogs.com/xiaohuochai/p/8040195.html