[JavaScript知识库]vue项目实际开发的问题及实用技巧分享（二）

粗读整体项目将业务流程整体梳理了一遍，发现项目中很多“ES5老式代码”，当然我也不是说用ES5写法不行，会有BUG，只是会造成代码量增多，可读性变差。

这里就目前维护的项目里遇到的一些整理一下:

1、解构赋值在具体项目上的应用

<el-table-column label="操作" width="100" align='center'>
	<template slot-scope="scope">
		<div v-if="isSee">
             <el-button @click='handleClick(scope.row,scope.$index)'>编辑</el-button>			
        </div>
    </template>
</el-table-column>
<script>
export default {
    methods: {
        handleClick(row,index){
            let name = row.name,
                age = row.age,
                id = row.ID,
                leadName = row.lead.name,
                leadId =row.lead.id,
                leadCode =row.lead.code
        }
    }
}
</script>

这要是在业务中涉及到更多的参数那不是得定义更多的变量。

改进方案：

handleClick({name,age,ID:id,lead},index){
    let {name:leadName,id:leadId:,code:leadCode} =lead||{}
}

2、关于同参数多判断条件非常复杂的情况（使用ES6新增数组实例方法includes）

<el-table-column prop="proAsk" label="产品工艺要求" align='center'>
	<template slot-scope="scope">
		<div v-if="isSee">
			<div class="tabel-input" v-if="scope.row.nameSort==4">
				<div
					v-if='scope.row.classSort==1||scope.row.classSort==2||scope.row.classSort==3||scope.row.classSort==5||scope.row.classSort==6||scope.row.classSort==7'>
					<el-form-item :prop="'tableDatas.'+scope.$index+'.proAsk'" :rules="rules.proAsk">
						<el-input v-model="scope.row.proAsk" center></el-input>
					</el-form-item>
				</div>
				<div v-else>
					<el-input v-model="scope.row.proAsk" center></el-input>
				</div>
			</div>
			<div class="tabel-input" v-else-if="scope.row.nameSort==5||scope.row.nameSort==6||scope.row.nameSort==8">
				<el-input v-model="scope.row.proAsk" center></el-input>
			</div>
			<div v-else>
				{{scope.row.proAsk}}
			</div>
		</div>
		<div v-else>
			{{scope.row.proAsk}}
		</div>
	</template>
</el-table-column>

这样写后来接手项目的人读起来会很难受，如果他继续加条件，这一块不得再加个好几十行

改进方案：

<el-table-column prop="proAsk" label="产品工艺要求" align='center'>
	<template slot-scope="scope">
		<div v-if="isSee">
			<div class="tabel-input" v-if="scope.row.nameSort==4">
				<div v-if='[1,2,3,5,6,7].includes(scope.row.classSort)'>
					<el-form-item :prop="'tableDatas.'+scope.$index+'.proAsk'" :rules="rules.proAsk">
						<el-input v-model="scope.row.proAsk" center></el-input>
					</el-form-item>
				</div>
				<div v-else>
					<el-input v-model="scope.row.proAsk" center></el-input>
				</div>
			</div>
			<div class="tabel-input" v-else-if="[5,6,8].includes(scope.row.nameSort)">
				<el-input v-model="scope.row.proAsk" center></el-input>
			</div>
			<div v-else>
				{{scope.row.proAsk}}
			</div>
		</div>
		<div v-else>
			{{scope.row.proAsk}}
		</div>
	</template>
</el-table-column>

3、模板字符串的应用

if (str1.length || str2.length) {
	if (str1.length) { //定价单位不一致
		let msgStr = str1.join(',')
		msgStr = '第' + msgStr + '行定价单位与所关联报价不一致'
		this.$message.error(msgStr)
        return
	}
	if(str2.length){//材质校验不一致
		let msgStr2=str2.join(',')
		msgStr2='第'+msgStr2+'行材质与所关联报价不一致'	
		this.$message.error(msgStr2)
        return
	}
}

模板字符串可以直接使用表达式，就不需要额外创建这些变量了

改进方案：

if (str1.length || str2.length) {
	if (str1.length) { //定价单位不一致
		this.$message.error(`第 ${str1.join(',')}行定价单位与所关联报价不一致`)
	}
	if(str2.length){//材质校验不一致
		this.$message.error(`第${str2.join(',')}行材质与所关联报价不一致`)
	}
    return
}

4、删除列表选中数据

<template>
	<el-row>
		<el-col :span="24" style="height: 40px;" v-show="!isSee">
			<el-button  size="mini" type="text" @click='addTable'>增加</el-button>
			<el-button size="mini" type="text" @click='delTableRow'>删除</el-button>
			<el-button size="mini" type="text" @click='selectAll'>全选</el-button>
			<el-button size="mini" type="text" @click='delTableChose'>取消全选</el-button>
		</el-col>

		<el-col :span="22">
			<el-table ref="multipleTable" border :data="tableData" max-height='300' show-summary size='mini'
				tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" v-if="!isSee">
				</el-table-column>
				<el-table-column label="行项目" width="70" align="center" fixed="left">
					<template slot-scope="scope">
						{{ scope.row.od }}
					</template>
				</el-table-column>
				<el-table-column label="产品名称" width="100" align="center" prop="productName" fixed="left">
					<template slot-scope="scope">
						<div class="tabel-input">
							<el-input v-model="scope.row.productName" :disabled="isSee" center placeholder="产品名称">
							</el-input>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="材质" width="160" align="center" prop="material" fixed="left" />
			</el-table>
		</el-col>
	</el-row>
</template>
<script>
	export default {
		data() {
			return {
				choseData: [],
				tableData: [],
				isSee: false
			}
		},
		methods: {
			handleSelectionChange(arr) {
				this.choseData = arr
			},
			delTableChose() {
				this.$refs.multipleTable.clearSelection();
			},
			// 设置全选
			selectAll() {
				this.tableData.forEach((obj) => {
					this.$refs.multipleTable.toggleRowSelection(obj, true)
				})
			},
            //新增行数据
			addTable() {
				let data = {
					'od': this.tableData.length + 1, //序号
					"addition": "",
					"productName": "",
					"material": "",
				}			
				this.tableData.push(data)
			},
			// 删除行数据
			delTableRow() {
				let arr2 = this.tableData,
					arr1 = this.choseData
				for (var i = 0; i < arr2.length; i++) {
					for (var j = 0; j < arr1.length; j++) {
						if (arr2[i].od == arr1[j].od) {
							arr2.splice(i, 1);
						}
					}
				}
				this.tableData = arr2
				this.changeData()
			},
		}
	}
</script>

这里会存在的问题是od项是自定义的数值，所以会出现多个条目od值一样的情况（删除后再添加），需要在删除之后对该数组od值重排

改进方案：

delTableRow() {
	let arr1 = this.tableData,
		arr2 = this.choseData,
		newArr = []
	// 遍历两个数组，并判断数值是否相等，如果相等，就将空字符串赋值给该数值
	newArr = arr1.filter(items => {
		if (!arr2.includes(items)) return items;
	})
	newArr.forEach((i, j) => {
		i.od = j + 1
	})
	this.tableData = newArr
	this.changeData()
}

当然了，这些技能可能原本的方式也能处理相应的业务逻辑，我给大家讲这些方案的目的是让大家学以致用，为什么面试都要问ES6,CSS3,HTML5,随着技术的不断更迭，作为技术人员的我们不说永远走在技术前沿，最起码也不能落后太多吧！

最后总结一下，学习学习，讲的是先求学然后要习练，理论知识掌握得不论多到位，不去练习到了实际应用中还是不会。什么是学知识，那是要长年累月地磨炼，不是光会看秘籍就能成为武林高手的，正真的高手的身上全是伤，手上全是茧。所以，不管是学习还是我们的生活，其实都是一个不断练习巩固知识的过程，最终通过这些经验来面对生活和工作中随时会出现的各种问题，难的不是生活和工作，难的是如何去面对生活和工作！