今天博主就来趴一趴自己写的代码是多么的烂!故事是这样:
因为在公司我还是一个新手,实际参与的功能需求也比较少。有时候,一个页面都要花上几天的时间,刚开始我还没有觉得什么,甚至觉得自己还有点NewBee?但是,我今天发现了自己有这样的心态,实属太自我了。
因为我前面将我负责的项目需求完成的差不多了,所以。我就去看看他们写的代码。诶!突然发现,有个页面的数据一次性加载太多,我就想着将数据改为按需加载(数据懒加载),最后成功的将功能实现了。.
那么为什么说我写的代码超烂,烂到了极点呢?
下面是我写的代码:
<PullRefresh
v-model="isRefresh"
pulling-text="下拉刷新"
loosing-text="释放即可刷新"
loading-text="正在刷新..."
@refresh="onRefresh">
<div :style="{minHeight: pullRefreshMinHeight}">
<Tabs v-model="activeTab" sticky swipeable offset-top="81" color="#6699ff" @change="changeTabs()">
<Tab title="训练中">
<template>
//这是我加的
<List
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoadTraining">
<div>
省略若干代码......
</div>
</List>
</template>
</Tab>
<Tab title="已完成">
<template>
//这是我加的
<List
v-model="loading1"
:finished="finished1"
finished-text="没有更多了"
@load="onLoadTrained">
<div>
省略若干代码......
</div>
</List>
</template>
</Tab>
</Tabs>
</div>
</PullRefresh>
</div>
</template>
<script>
// 模板依赖
import { PullRefresh, Tab,Tabs, Button,List } from "vant";
import StatusHeader from "../../components/StatusHeader";
export default {
name: 'my-trainlist',
components: { PullRefresh, Tab,List, Tabs, Button, StatusHeader },
data() {
return {
title:"我的训练",
statusHeaderHeight: 0,
// 状态
isRefresh: false,
activeTab: 0,
// 数据
trainingList: [],
trainedList: [],
//这是我加的
cacheTrainingList:JSON.parse(Storage.get('my_trainingList') || '[]'),
cahceTrainedList:JSON.parse(Storage.get('my_trainedList') || '[]'),
loading: false,
finished: false,
loading1: false,
finished1: false,
page: 1,
page1: 1
};
},
created() {
this.requestMyTrain();
this.onLoadTraining()
this.onLoadTrained()
},
mounted() {
this.$nextTick(() => {
this.statusHeaderHeight = this.$refs.statusHeader.$el.offsetHeight;
});
},
methods: {
//这是我加的
changeTabs(){
this.trainingList = []
this.trainedList = []
this.finished = false;
this.finished1 = false;
this.page = 1
this.page1 = 1
this.onLoadTraining()
this.onLoadTrained()
},
//这是我加的
// 懒加载()
onLoadTraining(){
this.trainingList.push(...this.pagination(8, this.page++, this.cacheTrainingList))
// 加载状态结束
this.loading = false;
if(this.trainingList.length >= this.cacheTrainingList.length) this.finished = true;
},
onLoadTrained(){
this.trainedList.push(...this.pagination(8, this.page1++, this.cahceTrainedList))
// 加载状态结束
this.loading1 = false;
if(this.trainedList.length >= this.cahceTrainedList.length) this.finished1 = true;
},
//这是我加的
// 数组分页
pagination(pageSize, currentPage, arr) {
var skipNum = (currentPage - 1) * pageSize;
var newArr = (skipNum + pageSize >= arr.length) ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize);
return newArr;
},
requestMyTrain() {
Common.ajax('/api/getPractice', {"isdone": 3}).then(ret => {
this.cacheTrainingList = [];
this.cahceTrainedList = [];
ret.data.myTrain.forEach(train => {
train.rate = this.toPercentage(train.logcount, train.qcount);
if (train.rate < 100) {
this.cacheTrainingList.push(train);
} else {
this.cahceTrainedList.push(train);
}
})
}, err => { console.warn(err.msg) });
},
//这是我加的
// 下拉刷新
onRefresh(){
this.isRefresh = true;
Promise.all([this.requestMyTrain(),this.changeTabs()]).then(() => {
this.isRefresh = false;
})
},
如果你能耐心的看完上面我写的代码,我想你应该会有那种恨不得东西改改我这样的写法,甚至有点想删除重新的冲动。事实上,当我看完我们公司的大佬写的之后,也的确有那个必要全删重写。
"有对比就没有伤害!",那就来看看他是怎么写的:
下图中,左侧是我写的,右侧是大佬写的。我们首先来看看,data中的初始代码,将我前面的那种不易理解的写法,改成了对象的形式。第一次看到这个时候,就默默地给他点了个赞。为什么我当初就没想到这样写呢?
同样的,我们再来看看是如何在HTML代码中使用的。通过对比,我会发现,左侧写的实在是有点太差了。可理解性太差了。
最后,关键的部分来了。也就是JS代码了。
changTabs()方法的作用就是监听了,标签切换的时候所触发的。并且将一些变量都初始化。这里就会显的会有点冗余了。
蓝色部分的代码,就是数据懒加载的核心部分了。不知,这里似乎也看不出什么大问题。那么我们来看看大佬写的是什么样的呢?
通过对比,是不是觉得,博主写的的确有点LOW呢,博主为了实现懒加载,写了多个方法,来对应不同的页面。但是他却使用了一个方法就实现了我前面所写的三个方法。这的确也引发了我深深地反思。自认为这种写法和思维与博主相比高明了许多。