js_如何优化你的代码让它更好看
1.对于美的东西我们很难拒绝,比如美女。哈哈哈,程序员的梗。
2.所以我希望我写出来的代码也是很美观的,让人看起来会很舒服。
3.要想让你的代码简约美观,就要涉及封装,模块化了,可复用代码。vue可以参考,但今天我不讨论vue,就从一些原生讨论一下优化的。
今后如果更加深入前端这块,我会更新后面学到的应用,我必会让我的代码更逻辑,更美观。
技术段:
在评审需求的时候,产品的需求会有各种各样的判断,这样的情况这样做,否则那样做。这是最常见的不过了。刚入门前端的同学可能会用到if(){}else{},
这是最常用到,当写多了,会发现代码会很乱。如果只有两个分支的判断,推荐使用三目运算做判断,直观!还好看。
var judge = 1;
judege == 1 ? console.log(1) : console.log(0);
上面是一个简单的三目判断,结果是在控制台打印1.
如果只有一个判断的时候,可以用if(){},之前看了一个php的经典写法,直接把大括号给去掉,管它黑猫白猫,捉到老鼠的就是好猫。
管你怎么写,浏览器能运行就可以了。
var judge = 1;
if(judge == 1) console.log(1);
如果有很多判断的时候,会有很多分支的时候,推荐使用switch做判断。
这样做判断会让你的代码非常的好看。
<script type="text/javascript">
var day = new Date().getDay();
switch(day) {
case 0:
x = "Today it's Sunday";
break;
case 1:
x = "Today it's Monday";
break;
case 2:
x = "Today it's Tuesday";
break;
case 3:
x = "Today it's Wednesday";
break;
case 4:
x = "Today it's Thursday";
break;
case 5:
x = "Today it's Friday";
break;
case 6:
x = "Today it's Saturday";
break;
};
console.log(x);
</script>
接下来是一些简化写法判断:
//如果value的值为"",null,undefind,0,则执行判断
var value = 0;
if(!value) console.log(11);// //判断为true则执行判断
(value < 1) && console.log(22);// //判断为false则执行判断
(value < -1) || console.log(33);//
2018年1月3日21点13分,星期三,在深圳。想去你住的城市看大雪纷飞的样子。
js_如何优化你的代码让它更好看的更多相关文章
- CssStats – 分析和优化网站 CSS 代码的利器
CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...
- 优化C/C++代码的小技巧
说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...
- 优化C/C++代码的小技巧(转)
源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序 ...
- [Android] Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就 ...
- 《Java程序性能优化:让你的Java程序更快、更稳定》
Java程序性能优化:让你的Java程序更快.更稳定, 卓越网更便宜,不错的书吧
- 用AOP来让你的JS代码变得更有可维护性吧
此文已由作者吴佳祥授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 好吧我承认这是篇任务. 最近看到个消息,ES2017已经定稿了,心想,我去,还完全没了解ES2016呢,ES ...
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 如何优化C语言代码(程序员必读)
1.选择合适的算法和数据结构 应该熟悉算法语言,知道各种算法的优缺点,具体资料请参见相应的参考资料,有很多计算机书籍上都有介绍.将比较慢的顺序查找法用较快的二分查找或乱序查找法代替,插入排序或冒泡排序 ...
- 解析Android开发优化之:从代码角度进行优化的技巧
下面我们就从几个方面来了解Android开发过程中的代码优化,需要的朋友参考下 通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说 ...
随机推荐
- 织梦dede:list标签在列表页同一文章显示两次的解决方法
在列表页用{dede:list}标签调用文章的时候出现了同一篇文章显示两次的问题,经过一天的奋战最后终于解决了,下面CMS集中营站长简单说下我的解决过程来供各位学友参考:1.怀疑是不是每次添加都会自动 ...
- [BinaryTree] 最大堆的类实现
堆的定义: 最大树(最小树):每个结点的值都大于(小于)或等于其子结点(如果有的话)值的树.最大堆(最小堆):最大(最小)的完全二叉树. 最大堆的抽象数据结构: class MaxHeap { pri ...
- 第71天:jQuery基本选择器(二)
jQuery选择器 一.内容过滤选择器 选择器 描 述 返 回 示 例 :contains(text) 匹配含有文本内容text的元素 集合元素 $(“p:contains(今天)”) :empty ...
- 第20天:京东nav、footer部分制作
一.鼠标的4种状态 cursor:pointer; 鼠标变成小手cursor:default;小白cursor:move;移动cursor:text;文本输入 二.网页布局:1.input.butto ...
- WPF DataGrid的使用
构造数据: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...
- HUAS 1476 不等数列(DP)
考虑DP. 如果把转移看出当前位填什么数的话,这样是有后效性的. 如果考虑当前的序列是将1至n依次插入序列中的话. 考虑将i插入1到i-1的序列中,如果插入到<号中或者首部,那么最后就会多出一个 ...
- hadoop 把mapreduce任务从本地提交到hadoop集群上运行
MapReduce任务有三种运行方式: 1.windows(linux)本地调试运行,需要本地hadoop环境支持 2.本地编译成jar包,手动发送到hadoop集群上用hadoop jar或者yar ...
- IntellIJ IDEA 配置 Maven
一.配置Maven环境 1.下载apache-maven文件,选择自己需要的版本 2.解压1所下载文件,E:\apache-maven-3.5.4 3.配置Maven环境变量 a. MAVEN_HOM ...
- BZOJ2761 不重复的数字 【treap】
2761: [JLOI2011]不重复数字 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 5517 Solved: 2087 [Submit][S ...
- IE6“无法打开站点,已终止操作”提示的解决
今天遇到一个问题,网站在IE 6下面打开会提示:Internet Explorer无法打开站点XXX.已终止操作. 先介绍一下网上常见的解决方法. 因为在页面还没有ready的时候就调用了htmlOb ...