zoukankan      html  css  js  c++  java
  • js_如何优化你的代码让它更好看

    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做判断。

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

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

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

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

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

  • 相关阅读:
    HDU 1251 统计难题(字典树模板题)
    POJ 1182 食物链(带权并查集)
    FJUT 2351 T^T的图论(并查集)
    10.QT程序框架与connect
    9.正则表达式
    8.QList QMap QVariant
    7.treeview
    6.图形化列表查询显示
    5.listview(QStringList QStringListModel)
    4.QList
  • 原文地址:https://www.cnblogs.com/wush-1215/p/8185739.html
Copyright © 2011-2022 走看看