使用vue做项目如何提高代码效率
最近做了两个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做项目如何提高代码效率的更多相关文章
- Vue 做项目经验
Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...
- 使用vue做项目
使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包 安装完 nodejs后 我们需要执行 npm install vue-cli ...
- C语言提高代码效率的几种方法
一段完美的代码不仅在于找到一个给定的问题的解决方案,但在它的简单性,有效性,紧凑性和效率(内存).设计的代码比实际执行更难.因此,每一个程序员当用C语言开发时,都应该保持这些基本的东西在头脑中.本文向 ...
- 前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)
下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不 ...
- 使用 Django-debug-toolbar 优化Query 提高代码效率
一段程序执行效率慢,除了cpu计算耗时外,还有一个很重要的原因是SQL的Duplicated过多,使用Django-debug-toolbar能够快速找出哪些地方的SQL可以优化,提高程序执行效率 1 ...
- 如何提高单片机C语言代码效率
代码效率包括两个方面内容:代码的大小和代码执行速度.如果代码精简和执行速度快,我们就说这个代码效率高.一般情况下,代码精简了速度也相应提上来了.单片机的ROM和RAM的空间都很有限,当您编程时遇到单片 ...
- 2018年最值得关注的30个Vue开源项目
译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...
- 30个值得关注的Vue开源项目
译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...
- 优化javaScript代码,提高执行效率
今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...
随机推荐
- session共享原理以及PHP 实现多网站共享用户SESSION 数据解决方案
参考自: http://www.cnblogs.com/qulinke/articles/6003049.html https://segmentfault.com/q/101000000578847 ...
- springboot+elasticsearch 报错
错误1: .d.e.r.s.AbstractElasticsearchRepository : failed to load elasticsearch nodes : org.elasticsear ...
- VS开发框架DevExtreme v19.1全解析!Windows资源管理器UX值得拥有
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExtreme Complete Subscription v19.1中全新发布的文件管 ...
- python模块安装问题:no matching distribution found for XXX 或者 Read timed out.
https://blog.csdn.net/zhang_han666/article/details/88286010 看了很多解决问题的博客,亲测通过更换国内安装源和设置超时时间可以解决.在pip ...
- k8s-in-aciton-3
镜像构建过程 构建过程不是由Docker客户端进行的,而是将整个目录的文件上传到Docker守护进程并在那里进行的.Docker客户端和守护进程不要求在同一 台机器上.如果你在一台非Linux操作系统 ...
- 在linux 下安装mysql
1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6.33,通用版,linux下64位 也可 ...
- 计算机网络(十),HTTP的关键问题
目录 1.在浏览器地址栏键入URL,按下回车之后经历的流程 2.HTTP状态码 3.GET请求和POST请求的区别 4.Cookie和Session的区别 5.IPV4和IPV6 十.HTTP的关键问 ...
- BZOJ 4668: 冷战 并查集启发式合并/LCT
挺好想的,最简单的方法是并查集启发式合并,加暴力跳父亲. 然而,这个代码量比较小,比较好写,所以我写了 LCT,更具挑战性. #include <cstdio> #include < ...
- 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 ...
- LinkedList类源码浅析(二)
1.上一节介绍了LinkedList的几个基本的方法,其他方法类似,就不一一介绍: 现在再来看一个删除的方法:remove(Object o) remove方法接受一个Object参数,这里需要对参数 ...