首页 > 技术文章 > JS-01 书写规范

Helen-code 2019-08-19 16:19 原文

此部分内容整理自私教指导和自我体会:(持续更新...)

  1.运算符左右两边留空格 (webstorm快捷键ctrl+alt+l);

  2.判断值是否相等尽量用“===” 严格等于 ;

  3.编程中,可有可无的变量不要有,这样代码才能精简,编程不要做多余的事情

    精简 准确 细致 

    ①比如下面这个,getsum就是一个可有可无的变量 

        function sum(arr) {
            var getsum= arr.reduce(function(prev,cur){
                return prev+cur;
            });
               return getsum;  
        }

    修改后如下,这样就省了一个变量,看着也更精简了

        function sum(arr) {
            return arr.reduce(function(prev,cur){
                return prev+cur;
            });
        }

    ②尽量预存选择器,不然每次都要重新查询所有DOM,很伤

  修改前:

<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        my$("dv").style.width = "200px";
        my$("dv").style.height = "200px";
        my$("dv").style.backgroundColor = "hotpink";
    };
</script> 

  JS部分修改后:

<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
    var oDv=my$("dv");
    my$("btn").onclick = function () {
        oDv.style.width = "200px";
        oDv.style.height = "200px";
        oDv.style.backgroundColor = "hotpink";
    };
</script>

  4.当代码写完后,某个功能没有实现,浏览器也没有报错,这时先去检查该功能对应的函数有无调用,再确认代码有无写错

     5. if-else语句和return的使用注意

    function fizzBuzz(num) {
        if(num%3===0 && num%5===0){
            return "fizzbuzz";
        }else if(num%3===0){
            return "fizz";
        }else if(num%5===0){
            return "buzz";
        } else if(num===null||isNaN(Number(num))){
            return false;
        }else {
            return num;
        }
    }
//写if else会预载整个判断链,浪费,换种写法
    function fizzBuzz(num) {
        if(num%3===0 && num%5===0){
            return "fizzbuzz";
        }
        if(num%3===0){
            return "fizz";
        }
        if(num%5===0){
            return "buzz";
        }
        if(num===null||isNaN(Number(num))){
            return false;
        }
            return num;
    }

  6.json格式的数据最后一行不加逗号,如果加了可能会报错

[
  {
    "user" : "蜡笔小新",
    "email" : "xiaoxin@163.com",
    "date" : "2020-01-01"
  },
  {
    "user" : "蜡笔中新",
    "email" : "xiaoxin@163.com",
    "date" : "2020-01-01"
  },
  {
    "user" : "蜡笔大新",
    "email" : "xiaoxin@163.com",
    "date" : "2020-01-01"
  }
]

  

 

 

 持续总结分享中。。。

推荐阅读