这是前端新手该写出的代码吗？水平太差！

今天博主就来趴一趴自己写的代码是多么的烂！故事是这样：

因为在公司我还是一个新手，实际参与的功能需求也比较少。有时候，一个页面都要花上几天的时间，刚开始我还没有觉得什么，甚至觉得自己还有点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呢，博主为了实现懒加载，写了多个方法，来对应不同的页面。但是他却使用了一个方法就实现了我前面所写的三个方法。这的确也引发了我深深地反思。自认为这种写法和思维与博主相比高明了许多。