1.对于美的东西我们很难拒绝,比如美女。哈哈哈,程序员的梗。

2.所以我希望我写出来的代码也是很美观的,让人看起来会很舒服。

3.要想让你的代码简约美观,就要涉及封装,模块化了,可复用代码。vue可以参考,但今天我不讨论vue,就从一些原生讨论一下优化的。

今后如果更加深入前端这块,我会更新后面学到的应用,我必会让我的代码更逻辑,更美观。

技术段:

在评审需求的时候,产品的需求会有各种各样的判断,这样的情况这样做,否则那样做。这是最常见的不过了。刚入门前端的同学可能会用到if(){}else{},

这是最常用到,当写多了,会发现代码会很乱。如果只有两个分支的判断,推荐使用三目运算做判断,直观!还好看。

  1. var judge = 1;
  2. judege == 1 ? console.log(1) : console.log(0);

上面是一个简单的三目判断,结果是在控制台打印1.

如果只有一个判断的时候,可以用if(){},之前看了一个php的经典写法,直接把大括号给去掉,管它黑猫白猫,捉到老鼠的就是好猫。

管你怎么写,浏览器能运行就可以了。

  1. var judge = 1;
  2. if(judge == 1) console.log(1);

如果有很多判断的时候,会有很多分支的时候,推荐使用switch做判断。

这样做判断会让你的代码非常的好看。

  1. <script type="text/javascript">
  2. var day = new Date().getDay();
  3. switch(day) {
  4. case 0:
  5. x = "Today it's Sunday";
  6. break;
  7. case 1:
  8. x = "Today it's Monday";
  9. break;
  10. case 2:
  11. x = "Today it's Tuesday";
  12. break;
  13. case 3:
  14. x = "Today it's Wednesday";
  15. break;
  16. case 4:
  17. x = "Today it's Thursday";
  18. break;
  19. case 5:
  20. x = "Today it's Friday";
  21. break;
  22. case 6:
  23. x = "Today it's Saturday";
  24. break;
  25. };
  26. console.log(x);
  27. </script>

接下来是一些简化写法判断:

  1. //如果value的值为"",null,undefind,0,则执行判断
  2. var value = 0;
  3. if(!value) console.log(11);//
  4.  
  5. //判断为true则执行判断
  6. (value < 1) && console.log(22);//
  7.  
  8. //判断为false则执行判断
  9. (value < 1) || console.log(33);//

2018年1月3日21点13分,星期三,在深圳。想去你住的城市看大雪纷飞的样子。

js_如何优化你的代码让它更好看的更多相关文章

  1. CssStats – 分析和优化网站 CSS 代码的利器

    CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...

  2. 优化C/C++代码的小技巧

    说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...

  3. 优化C/C++代码的小技巧(转)

    源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序 ...

  4. [Android] Android开发优化之——从代码角度进行优化

    通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就 ...

  5. 《Java程序性能优化:让你的Java程序更快、更稳定》

    Java程序性能优化:让你的Java程序更快.更稳定, 卓越网更便宜,不错的书吧

  6. 用AOP来让你的JS代码变得更有可维护性吧

    此文已由作者吴佳祥授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 好吧我承认这是篇任务. 最近看到个消息,ES2017已经定稿了,心想,我去,还完全没了解ES2016呢,ES ...

  7. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  8. 如何优化C语言代码(程序员必读)

    1.选择合适的算法和数据结构 应该熟悉算法语言,知道各种算法的优缺点,具体资料请参见相应的参考资料,有很多计算机书籍上都有介绍.将比较慢的顺序查找法用较快的二分查找或乱序查找法代替,插入排序或冒泡排序 ...

  9. 解析Android开发优化之:从代码角度进行优化的技巧

    下面我们就从几个方面来了解Android开发过程中的代码优化,需要的朋友参考下   通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说 ...

随机推荐

  1. 【Linux】- ps -ef |grep 命令

    ps:将某个进程显示出来 grep:查找 |:管道命令 表示ps命令与grep同时执行 PS是LINUX下最常用的也是非常强大的进程查看命令 grep命令是查找,是一种强大的文本搜索工具,它能使用正则 ...

  2. Chrome 的扩展功能

    chrome浏览器修改cookie edit this cookie chrome插件是一款专为谷歌内核浏览器打造的cookie插件,安装谷歌浏览器edit this cookie插件后你就可以在浏览 ...

  3. ResultSet 可滚动性和可更新性

    JDBC 2.0 API 为结果集增加了两个新的基本能力:可滚动性和可更新性,我想肯定满足了你的要求.在滚动结果集中可用的方法有: rs.previous();//向前滚动 rs.next();//向 ...

  4. linux tomcat shutdown.sh 不能正常关闭

    一般造成这种原因是因为项目中有非守护线程的存在 基本原理为启动tomcat时记录启动tomcat的进程id(pid),关闭时强制杀死该进程 1.找到tomcat下bin/catalina.sh文件,v ...

  5. java 中使用Base64

    byte[] cipherData = Base64.encodeBase64(plainText.getBytes()); //默认不换行 byte[] cipherData = Base64.en ...

  6. 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 ...

  7. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  8. [洛谷P4139]上帝与集合的正确用法

    题目大意:多次询问,每次给你$p$询问$2^{2^{2^{\dots}}}\bmod p$ 题解:扩展欧拉定理,求出$\varphi(p)$即可.因为$2^{2^{2^{\dots}}}>> ...

  9. 洛谷 P4495 [HAOI2018]奇怪的背包 解题报告

    P4495 [HAOI2018]奇怪的背包 题目描述 小\(C\)非常擅长背包问题,他有一个奇怪的背包,这个背包有一个参数\(P\),当他 向这个背包内放入若干个物品后,背包的重量是物品总体积对\(P ...

  10. UVA.297 Quadtrees (四分树 DFS)

    UVA.297 Quadtrees (四分树 DFS) 题意分析 将一个正方形像素分成4个小的正方形,接着根据字符序列来判断是否继续分成小的正方形表示像素块.字符表示规则是: p表示这个像素块继续分解 ...