论前端代码的整洁性

论前端代码的整洁性。
从移动端过度到前端，很多代码是从copy别人的代码开始的，有的时候代码越写越乱，总是不能很好的去重构项目，当然，很多时候公司的项目也不允许你去重构，这导致的问题特别的复杂。
所幸最近接手了一个前端的项目，是用vue2写的，代码写的非常的工整，让人赏心悦目，也不是说代码的技术水平有多么的高，但是，从代码的整洁性上确实能看出原来的开发者是有一定的代码洁癖的，但是也让我感觉到原来代码也可以写的这样的优美，特别是前端的代码，我总是写的非常的随意，代码的结构也比较乱，其实很多时候前端的代码逻辑性不是太复杂，没有那么多的类、继承、协议等特性，代码的调用逻辑也不用很多文件之间来回的调用，所以我写前端的时候经常是写的非常的随意，很大一部分原因也是因为我不是从专业的前端出身吧，但是这不能影响我的代码质量，我想优美的代码是每个人都想看到的。
回到这个项目来说吧，本来是想让我帮忙写一点页面，我拿到项目立马感觉到了代码的优美，当然我的任务肯定是帮人家开发页面了。真的我想这种项目，包括甲方可能也没有很多的要求，所以功能设计上极尽简约，极尽常态化，这是很难想象的，我们很多时候接收到项目之后，我们随时开发，甲方可能随时修改需求，也有的甲方不懂技术，总是让我们去实现一些飞常态化的功能，最后总是将项目弄的一团糟，我们其实非常不愿意看到那种情况，但是我们也没有办法，我们总是想尽可能的去将代码写的优美健壮，但是很多时候往往会事与愿违。
好了，不多说了，都是泪啊。
说了这么半天，我们开始讲讲这个项目的优点，和我们能从中学到什么东西吧，首先这应该算是一个很常规的vue2的项目了，但是从项目的整洁性上，我们能看到开发者应该是一个非常专业的前端软件工程师。在一些技术的使用上，我们能看到代码会写的非常的简约和整洁，
比如说在打包的环境上，开发者设计了很多的运行和打包命令，配置的非常的清晰
在路由上，开发者设计的非常的合理，如何显示，如何隐藏，如何配置参数非常的清晰，代码结构非常的合理
在组件的封装上也非常的简单
在网络请求方面，开发者直接把api绑定到view上了，在页面上会非常的方便调用，也不用import，我想也不失为一个好的方式
在css上面，开发者极尽的简约，基本上很少编写css，这也是我非常的希望的事情
在表格显示上开发者采用混入的方式，将一些功能混入到页面中，减少了页面重复代码的编写
在每个页面上基本上是请求列表，展示，就是这么简单的一个展示，
所以从代码上我们也能看出开发者极深的代码功底，才能将代码写的如此的轻松写意，所以我们往往自己不知道的功能从这里拷贝从那里百度，出来的结果粘贴到那里，我们把功能看似实现了，实际上我们代码写的非常的乱，这也是我们今后需要注意的问题：

举例如下：

<template>
	<div class="main-body">
		<el-table :data="tableData" v-loading="loading">
			<NoInfo slot="empty"></NoInfo>
			<el-table-column label="规则编号" prop="id"></el-table-column>
			<el-table-column label="触发条件" prop="triggerDesc"></el-table-column>
			<el-table-column label="积分数" prop="integral"></el-table-column>
			<el-table-column label="适用范围" prop="rang"></el-table-column>
			<el-table-column label="生效状态" prop="forbiddenStr"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="clickHandler_close(scope.row)">{{scope.row.forbidden ? '允许' : '禁用'}}</el-button>
					<el-button type="text" @click="clickHandler_detail(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>

export default {
	data() {
		return {
			loading: false,
			tableData: []
		};
	},
	mounted() {
		this.fetchList();
	},
	methods: {
		async clickHandler_close(row) {
			this.loading = true;
			const params = {
				forbidden: !row.forbidden,
				id: row.id
			}
			let [result] = await this.$api.integralApi.operate_switchRule(params);
			this.loading = false;
			if (result === true) {
				this.$message.success('操作成功');
				this.fetchList();
			}
		},
		clickHandler_detail(row) {
			var id = row.id;
			this.toUrl('rule/detail', { id });
		},
		// 请求数据
		async fetchList() {
			// 请求
			this.loading = true;
			let [result] = await this.$api.integralApi.operate_rule();
			this.loading = false;
			this.tableData = result.map(item => {
				item.forbiddenStr = item.forbidden ? '禁止' : '允许';
				return item;
			});
		},
	}
};
</script>
<style lang="scss"></style>