JS-01 书写规范
此部分内容整理自私教指导和自我体会:(持续更新...)
1.运算符左右两边留空格 (webstorm快捷键ctrl+alt+l);
2.判断值是否相等尽量用“===” 严格等于 ;
3.编程中,可有可无的变量不要有,这样代码才能精简,编程不要做多余的事情
精简 准确 细致
①比如下面这个,getsum就是一个可有可无的变量
1 2 3 4 5 6 | function sum(arr) { var getsum= arr.reduce( function (prev,cur){ return prev+cur; }); return getsum; } |
修改后如下,这样就省了一个变量,看着也更精简了
1 2 3 4 5 | function sum(arr) { return arr.reduce( function (prev,cur){ return prev+cur; }); } |
②尽量预存选择器,不然每次都要重新查询所有DOM,很伤
修改前:
1 2 3 4 5 6 7 8 9 10 | <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><em id= "__mceDel" style= "background-color: rgba(255, 255, 255, 1); font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px" > </em> |
JS部分修改后:
1 2 3 4 5 6 7 8 9 10 11 | <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的使用注意
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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格式的数据最后一行不加逗号,如果加了可能会报错
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | [ { "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" } ] |
持续总结分享中。。。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步