JS-01 书写规范
此部分内容整理自私教指导和自我体会:(持续更新...)
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 书写规范的更多相关文章
- 前端js的书写规范和高效维护的方案_自我总结使用的方案
作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...
- mutations.js文件书写规范及模板调用此文件书写方法
1)mutations.js代码如下 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- html、css、js的命名规范
最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
随机推荐
- 前端自动化gulp使用方法
gulp介绍 1. 网站: http://slides.com/contra/gulp#/ 2. 特点 易于使用:通过代码优于配置的策略, Gulp 让简单的任务简单,复杂的任务可管理. 构建快速 : ...
- Task1.PyTorch的基本概念
1.什么是Pytorch,为什么选择Pytroch? PyTorch的前身便是Torch,其底层和Torch框架一样,但是使用Python重新写了很多内容,不仅更加灵活,支持动态图,而且提供了Pyth ...
- LeetCode--058--最后一个单词(java)
给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...
- TFrecords读、写图片文件
参考:https://blog.csdn.net/u014802590/article/details/68495238 参考:https://www.2cto.com/kf/201709/68057 ...
- python编程中的一个经典错误之list引用
请看下面代码 class User: def __init__(self, name, hobby=[]): self.name = name self.hobby = hobby def add_h ...
- 银联高校极客挑战赛 初赛 第一场 B
自学图论的码队弟弟 试图写非递归求解,然后TLE了一下午==,全程找不到bug,换成递归,一发AC 判断环写得很丑== #include<bits/stdc++.h> using name ...
- git commit --amend用法(摘抄)
适用场景: 比方说,你的代码已经提交到git库,leader审核的时候发现有个Java文件代码有点问题,于是让你修改,通常有2种方法: 方法1:leader 将你提交的所有代码 abandon掉,然后 ...
- Oracle DataGuard日志传输
1. 日志传输方式 有两种日志传输方式(ARC和LGWR),第一种是采用ARC进程传输日志,其示意图如下: 注:上图来自<大话Oracle RAC> 其大致过程如下: 1)主库:日志先写入 ...
- P5018对称二叉树
传送 题目说了那么多,到底什么是对称二叉树呢? 就是关于根节点左右镜面对称的二叉树辣. 当然,一棵对称二叉树的子树不一定是对称二叉树,就比如下面这个 它是对称二叉树,但是对于它的子树 这并不是对称二叉 ...
- Note:目录2
ylbtech-Note:目录2 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech ...