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书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
随机推荐
- Jmeter接口测试---加解密
1.加解密的jar包放到jmeter的lib/ext目录下. 项目打jar包参考https://www.cnblogs.com/fulucky/p/9436229.html 2.在测试计划---> ...
- NOIP2011提高组 Day1 T3 Mayan游戏
题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行×5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定的步 ...
- UVa 10054 : The Necklace 【欧拉回路】
题目链接 题目大意:我的妹妹有一串由各种颜色组成的项链. 项链中两个连续珠子的接头处共享同一个颜色. 如上图, 第一个珠子是green+red, 那么接这个珠子的必须以red开头,如图的red+whi ...
- NodeJS使用puppeteer进行截图
const puppeteer = require('/home/ordinaryUser_2/automation/NodeJS/node/lib/node_global/lib/node_modu ...
- Anaconda概念和使用方法
Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...
- macOS 10.14 Mojave Apache Setup: Multiple PHP Versions
Part 1: macOS 10.14 Mojave Web Development Environment Developing web applications on macOS is a rea ...
- sql-hive笔试题整理 1 (学生表-成绩表-课程表-教师表)
题记:一直在写各种sql查询语句,最长的有一百多行,自信什么需求都可以接,可......,想了想,可能一直在固定的场景下写,平时也是以满足实际需求为目的,竟不知道应试的题都是怎么出的,又应该怎么做.遂 ...
- Hadoop学习之路(二)HDFS基础
1.HDFS前言 HDFS:Hadoop Distributed File System,Hadoop分布式文件系统,主要用来解决海量数据的存储问题. 设计思想 分散均匀存储 dfs.blocksiz ...
- ubuntu18.04英文环境解决各种软件中文乱码问题
如果要同时支持中文也支持英文,进入到该软件的字体设置界面,字体格式选择为: Noto Sans CJK SC
- PageObject设计模式 在selenium 自动化测试里面的应用
PageObject设计模式1. Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 2. web测试时,建议 ...