记一次“祖传”代码的简化过程

背景

某天遇到一段shi一样的代码（已自查：非本人所写）。前天晚些，闲来无事，想着看看能不能改造着试下，费了点时间，稍微改造了下，实在改不动了，只能这样了。不知道列位看官可否有更好的办法？

原始代码

像下面这样，长得和shi一样的代码

// 省略部分代码...
hasContent(){
    return (
            this.hasHeader &&
            (((this.isButtonResident || !this.selectionCount) && 
                    (this.isShowTitle || !this.isSingleView)) || 
                    ((this.isButtonResident || this.selectionCount) && 
                            this.batchToolbarStore) || 
                    this.isShowToolbar || 
                    (!this.isButtonResident && this.selectionCount) || 
                    (this.switchable && this.displayStyle === 'standard')
                    )
            )
}
// 省略部分代码...

改造后

这是简单处理后，改造后的代码。

// 省略部分代码...
hasContent(){
    if (this.hasHeader){
            const conditions = [
                    (this.isButtonResident || !this.selectionCount) && (this.isShowTitle || !this.isSingleView),
                    (this.isButtonResident || this.selectionCount) && this.batchToolbarStore,
                    (!this.isButtonResident && this.selectionCount),
                    (this.switchable && this.displayStyle === 'standard')
            ]
            return conditions.some(item => !!item)
    }
    return false
}
// 省略部分代码...

改造思路

1. 代码分析

将代码进行“梳理”，办法也很简单，将“或”、“与”条件和括号等进行分析，其如果如下：

// 省略部分代码...
hasContent(){
    return (
            this.hasHeader &&
            (
                    ((this.isButtonResident || !this.selectionCount) && (this.isShowTitle || !this.isSingleView)) 
                    || 
                    (
                            (this.isButtonResident || this.selectionCount) && this.batchToolbarStore
                    ) 
                    || 
                    this.isShowToolbar 
                    || 
                    (!this.isButtonResident && this.selectionCount) 
                    || 
                    (this.switchable && this.displayStyle === 'standard')
            )
    )
}
// 省略部分代码...

2. 代码简化

将代码进行简单的分组处理。

// 省略部分代码...
hasContent(){
	const condition1 = (this.isButtonResident || !this.selectionCount) && (this.isShowTitle || !this.isSingleView)
	const condition2 = (this.isButtonResident || this.selectionCount) && this.batchToolbarStore
	const condition3 = (!this.isButtonResident && this.selectionCount)
	const condition4 = (this.switchable && this.displayStyle === 'standard')
	return (
		this.hasHeader &&
		(
			condition1 
			|| 
			condition2
			|| 
			this.isShowToolbar 
			|| 
			condition3
			|| 
			condition4
		)
	)
}
// 省略部分代码...

3. 代码优化

实在改造不动了，稍微对现有代码利用“Array.some”进行简单的优化一下吧, 多少看着也舒服一些。

// 省略部分代码...
hasContent(){
    if (this.hasHeader){
            const conditions = [
                    (this.isButtonResident || !this.selectionCount) && (this.isShowTitle || !this.isSingleView),
                    (this.isButtonResident || this.selectionCount) && this.batchToolbarStore,
                    (!this.isButtonResident && this.selectionCount),
                    (this.switchable && this.displayStyle === 'standard')
            ]
            return conditions.some(item => !!item)
    }
    return false
}
// 省略部分代码...

小结

虽然是shi一样的代码，但保不齐哪天自己需要改这段代码，就尴尬了！