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

  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"
}
]

  

持续总结分享中。。。

JS-01 书写规范的更多相关文章

  1. 前端js的书写规范和高效维护的方案_自我总结使用的方案

    作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...

  2. mutations.js文件书写规范及模板调用此文件书写方法

    1)mutations.js代码如下 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2 ...

  3. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  4. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  5. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  6. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  8. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  9. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  10. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

随机推荐

  1. Hybris Commerce下单时遇到产品库存不足的解决办法

    客户在Storefront下单试图购买一个产品时,遇到out of stock库存不足的错误,无法下单: 解决办法:登录Backoffice,Stock level菜单: 创建一个新的stock le ...

  2. 【leetcode】1046. Last Stone Weight

    题目如下: We have a collection of rocks, each rock has a positive integer weight. Each turn, we choose t ...

  3. IDEA git 合并多个commit

    当前三个commit,demo1,demo2,demo3 选择demo1右键 选择action 跟着指示操作,最后合并 时间线: Log 框时间线:是从上到下,越来越早. 弹出框时间线:是从上到下,越 ...

  4. Django2 + ORM

    创建模型类class UserInfo(models.Model): id = models.IntegerField() username = models.CharField(max_length ...

  5. Jenkins报错:该Jenkins实例似乎已离线

    解决方法: 1.保留此离线页面,重新开启一个浏览器tab标签页 2.输入输入网址http://localhost:8080/pluginManager/advanced 3.进入该页面最底下,找到[升 ...

  6. Facebook发布Tweaks:让微调iOS应用变得更简单

    假设,你正在开发一款iOS应用. 你的iOS应用有很多动画效果,而你(或你的设计师)希望让那些动画效果的持续时间恰到好处.那华丽的抽屉特效是应该耗时半秒钟,还是四分之三秒呢? 通常情况下,开发者会对合 ...

  7. Python3实现简单的钉钉机器人调用

    具体可以参考开发文档:https://ding-doc.dingtalk.com/doc#/serverapi3/iydd5h from urllib import parse, request im ...

  8. ruby异常处理

    begin # 这段代码抛出的异常将被下面的 rescue 子句捕获 rescue # 这个块将捕获所有类型的异常 retry # 这将把控制移到 begin 的开头 end

  9. leaflet-加载天地图-解决纬度偏移特别大

    这几天学习 leaflet 在加载天地图时将以前的接口拿来用结果偏差了特别大(差不多是 90 度),中国纬度到了 100 多,试了改变投影和 y 轴翻转的配置都不好使,最后上网搜索到了Leaflet. ...

  10. 123、TensorFlow的Job

    # 如果你在分布式环境中部署TensorFlow # 你或许需要指定job name和task ID # 来将变量放置在参数服务器上 # 将操作放在worker job import tensorfl ...