最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点

1.代码没有高效的复用

  自从使用vue做项目之后,以前使用面向过程变成的习惯随之被面向对象取代了,这是一个很好的转变,让代码看起来不是那么混乱了,但是不混乱并不代表质量高,比如实现一个检验输入是否有效的功能写的代码很长,而且重复代码很多例如:

  

function checkInput(data) {
let isTrue;
if(!data.date) {
this.$message.error("请选择日期!");
return isTrue = false;
return;
}
if(!data.url) {
this.$message.error("请选择链接!");
return isTrue = false;
return;
}
if(!data.imgUrl) {
this.$message.error("请选择图片!");
return isTrue = false;
return;
}
return isTrue=true;
}

然后判断该函数返回的值是否为true,使用了太多的判断,现在是三个输入框还行,如果说十个输入框的话那代码就太长了,而且有很多重复的代码,这个时候就必须考虑如何将代码简化,

否则自己看着就很low,更不用说给别人看了.

分析一下代码,判断很多都是重复的,那么我们使用一个for in循环就好了,因为提示信息和输入的字段是不一样的,那么就单独提出来放入一个数组内.例如

function checkInput(data) {
let isTrue=true;
let count=0;
let errorInfo = ["请选择日期","请选择链接","请选择图片"];
for(let item in data) {
if(!data[item]){
alert(errorInfo[count]);
return isTrue=false;
break;
}
count++;
}
return isTrue;
}

这样子就简化了很多不必要的重复的代码.

未完待续....

使用vue做项目如何提高代码效率的更多相关文章

  1. Vue 做项目经验

    Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...

  2. 使用vue做项目

    使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包  安装完 nodejs后 我们需要执行 npm install vue-cli ...

  3. C语言提高代码效率的几种方法

    一段完美的代码不仅在于找到一个给定的问题的解决方案,但在它的简单性,有效性,紧凑性和效率(内存).设计的代码比实际执行更难.因此,每一个程序员当用C语言开发时,都应该保持这些基本的东西在头脑中.本文向 ...

  4. 前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)

    下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不 ...

  5. 使用 Django-debug-toolbar 优化Query 提高代码效率

    一段程序执行效率慢,除了cpu计算耗时外,还有一个很重要的原因是SQL的Duplicated过多,使用Django-debug-toolbar能够快速找出哪些地方的SQL可以优化,提高程序执行效率 1 ...

  6. 如何提高单片机C语言代码效率

    代码效率包括两个方面内容:代码的大小和代码执行速度.如果代码精简和执行速度快,我们就说这个代码效率高.一般情况下,代码精简了速度也相应提上来了.单片机的ROM和RAM的空间都很有限,当您编程时遇到单片 ...

  7. 2018年最值得关注的30个Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  8. 30个值得关注的Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  9. 优化javaScript代码,提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

随机推荐

  1. session共享原理以及PHP 实现多网站共享用户SESSION 数据解决方案

    参考自: http://www.cnblogs.com/qulinke/articles/6003049.html https://segmentfault.com/q/101000000578847 ...

  2. springboot+elasticsearch 报错

    错误1: .d.e.r.s.AbstractElasticsearchRepository : failed to load elasticsearch nodes : org.elasticsear ...

  3. VS开发框架DevExtreme v19.1全解析!Windows资源管理器UX值得拥有

    行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExtreme Complete Subscription v19.1中全新发布的文件管 ...

  4. python模块安装问题:no matching distribution found for XXX 或者 Read timed out.

    https://blog.csdn.net/zhang_han666/article/details/88286010 看了很多解决问题的博客,亲测通过更换国内安装源和设置超时时间可以解决.在pip ...

  5. k8s-in-aciton-3

    镜像构建过程 构建过程不是由Docker客户端进行的,而是将整个目录的文件上传到Docker守护进程并在那里进行的.Docker客户端和守护进程不要求在同一 台机器上.如果你在一台非Linux操作系统 ...

  6. 在linux 下安装mysql

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6.33,通用版,linux下64位 也可 ...

  7. 计算机网络(十),HTTP的关键问题

    目录 1.在浏览器地址栏键入URL,按下回车之后经历的流程 2.HTTP状态码 3.GET请求和POST请求的区别 4.Cookie和Session的区别 5.IPV4和IPV6 十.HTTP的关键问 ...

  8. BZOJ 4668: 冷战 并查集启发式合并/LCT

    挺好想的,最简单的方法是并查集启发式合并,加暴力跳父亲. 然而,这个代码量比较小,比较好写,所以我写了 LCT,更具挑战性. #include <cstdio> #include < ...

  9. linux下安装R

    下载 版本:R3.2.2 下载地址:http://cran.rstudio.com/src/base/R-3/R-3.2.2.tar.gz 安装步骤: 解压 tar -zxvf R-3.2.2.tar ...

  10. LinkedList类源码浅析(二)

    1.上一节介绍了LinkedList的几个基本的方法,其他方法类似,就不一一介绍: 现在再来看一个删除的方法:remove(Object o) remove方法接受一个Object参数,这里需要对参数 ...