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开发过程中的代码优化,需要的朋友参考下 通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说 ...
随机推荐
- 【Linux】- ps -ef |grep 命令
ps:将某个进程显示出来 grep:查找 |:管道命令 表示ps命令与grep同时执行 PS是LINUX下最常用的也是非常强大的进程查看命令 grep命令是查找,是一种强大的文本搜索工具,它能使用正则 ...
- Chrome 的扩展功能
chrome浏览器修改cookie edit this cookie chrome插件是一款专为谷歌内核浏览器打造的cookie插件,安装谷歌浏览器edit this cookie插件后你就可以在浏览 ...
- ResultSet 可滚动性和可更新性
JDBC 2.0 API 为结果集增加了两个新的基本能力:可滚动性和可更新性,我想肯定满足了你的要求.在滚动结果集中可用的方法有: rs.previous();//向前滚动 rs.next();//向 ...
- linux tomcat shutdown.sh 不能正常关闭
一般造成这种原因是因为项目中有非守护线程的存在 基本原理为启动tomcat时记录启动tomcat的进程id(pid),关闭时强制杀死该进程 1.找到tomcat下bin/catalina.sh文件,v ...
- java 中使用Base64
byte[] cipherData = Base64.encodeBase64(plainText.getBytes()); //默认不换行 byte[] cipherData = Base64.en ...
- robot framework连接Oracle错误:ORA-12504: TNS:listener was not given the SERVICE_NAME in CONNECT_DATA
在使用robot framework的关键字Connect to Database Using Custom params连接Oracle数据库: Connect to Database Using ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- [洛谷P4139]上帝与集合的正确用法
题目大意:多次询问,每次给你$p$询问$2^{2^{2^{\dots}}}\bmod p$ 题解:扩展欧拉定理,求出$\varphi(p)$即可.因为$2^{2^{2^{\dots}}}>> ...
- 洛谷 P4495 [HAOI2018]奇怪的背包 解题报告
P4495 [HAOI2018]奇怪的背包 题目描述 小\(C\)非常擅长背包问题,他有一个奇怪的背包,这个背包有一个参数\(P\),当他 向这个背包内放入若干个物品后,背包的重量是物品总体积对\(P ...
- UVA.297 Quadtrees (四分树 DFS)
UVA.297 Quadtrees (四分树 DFS) 题意分析 将一个正方形像素分成4个小的正方形,接着根据字符序列来判断是否继续分成小的正方形表示像素块.字符表示规则是: p表示这个像素块继续分解 ...