JavaScript代码规范
注:新手一枚,本篇博客为了给自己的学习做个记录,若有表述错误或其他错误欢迎指正,谢过各位了 ![手动抱拳]
1.嵌入规则
- JavaScript程序应尽量放在.js文件中,需要调用的时候在html文件中以script标签的形式包含进来,避免在html文件中直接编写JavaScript代码
<script src="filename.js">
2.空格与运算符
- 通常运算符(=±*/)前后需要添加空格
let x = y + z; let values = ["Volvo", "Saab", "Fiat"];
3.代码缩进
- 通常使用4个空格符来缩进代码块,不推荐使用TAB键来缩进,因为不同编辑器TAB键的解析可能不同
function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); }
4.语句规则
- 一条语句通常以分号作为结束符
let values = ["Volvo", "Saab", "Fiat"];
- 复杂语句的通用规则:
- 将做花括号放在第一行的结尾
- 做花括号前添加一个空格
- 将有花括号独立放在一行
- 不要以分号结束一个复杂的声明
// 函数 function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); } // 循环 for (let i = 0; i < 5; i++) { x += i; } // 条件语句 if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }
5.对象规则
- 短的对象代码可以直接写成一行
let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
- 较复杂对象定义的规则:
- 将左花括号与类名放在同一行
- 冒号与属性值间有个空格
- 字符串使用双引号,数字不需要
- 最后一个键值对后面不要添加逗号
- 将右花括号独立放在一行,并以分号作为结束符号
let person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
6.每行代码字符小于80
- 为了方便阅读,每行字符数建议小于80个
- 如果一个JavaScript语句超过了80个字符,建议在运算符或者逗号后换行
- 字符串过长时,利用字符串的+符号进行合并
let str1 = '' + '<article>' + '<h1>Title here</h1>' + '<p>This is a paragraph</p>' + '<footer>Complete</footer>' + '</article>';
- 三元运算符过长时,将条件以及两种结果分写在各行中
let result = condition ? resultA : thisIsAVeryVeryLongResult;
- 逻辑条件组合过长时,将每个条件独立一行,逻辑运算符放置在行首进行分隔
if(user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { // code }
- JSON或数组过长时,进行适当换行,将每一行控制在合理的范围内
let mapping = { one: 1, two: 2, three: 3, four: 4, five: 5, six: 6, seven: 7, eight: 8, nine: 9, ten: 10, eleven: 11, twelve: 12, thirteen: 13, fourteen: 14,fifteen: 15 };
- 字符串过长时,利用字符串的+符号进行合并
7.命名规则
- 变量、参数和函数使用驼峰法命名, 即除第一个单词之外,其他单词首字母大写
let lowerCamelCase = "abc";
- 全局变量使用全部大写的下划线命名法
let MAX = 100; let MAX_SIZE = 1000;
- 常量使用全部大写的下划线命名法
const PI = 3.14; const IS_DEBUG_ENABLED = 1;
8.HTML载入外部JavaScript文件
- 使用简洁的格式载入JavaScript文件(type属性不是必须的)
<script src="myscript.js">
9.使用JavaScript访问HTML元素
- 使用JavaScript获取HTML元素使用getElementById方法
let obj1 = getElementById("Demo") let obj2 = getElementById("demo")
10.return语句
- return如果用表达式的执行作为返回值,请把表达式和 return 放在同一行中,以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式,则返回 undefined。构造器的默认返回值为 this。
11.注释
- //用作代码的行注释
let itemsLayer; //礼物下落层
- /* … */形式用作对代码段的注释,或用于较正式的声明中,如函数参数、功能、文件功能等的描述
/* Zepto v1.1.6 - zepto event ajax form ie - zeptojs/license */ let Zepto = function(){ //code }
12.优先使用箭头函数
- 使用函数时,优先使用箭头函数
// bad [1, 2, 3].map( function (x) { const y = x + 1; return x * y; }); // good [1, 2, 3].map( (x) => { const y = x + 1; return x * y; });
13.建议每次只声明一个变量
- 声明变量时,建议每次只声明一个变量,避免一次声明多个变量
// bad let a = 1, b = 2, c = 3; // good let a = 1; let b = 2; let c = 3;
14.单引号的使用
- 建议使用单引号包裹普通字符串
let directive = 'No identification of self of mission.';
- 当字符串出现单引号时,使用``包裹字符串
let saying = `Say it ain't so`;
15.避免使用var声明
- var是方法作用域,在方法内均可访问该变量
function discountedPrices (prices, discount){ var discounted = []; for(var i = 0; i< prices.length; i++){ var discountedPrice = prices[i] * (1 - discount); var finalPrice = Math.round;(discountedPrice * 100) / 100; discounted.push(finalPrice); } console.log(i); //正常输出 console.log(discountedPrice); //正常输出 console.log(finalPrice); //正常输出 return discounted; }
- let是块作用域,即let声明的变量只能在局部代码块内被访问
function discountedPrices (prices, discount){ let discounted = []; for(let i = 0; i< prices.length; i++){ let discountedPrice = prices[i] * (1 - discount); let finalPrice = Math.round;(discountedPrice * 100) / 100; discounted.push(finalPrice); } console.log(i); //报错 console.log(discountedPrice); //报错 console.log(finalPrice); //报错 return discounted; }
- 综上,推荐使用let声明变量,尽可能避免使用var关键字
参考:
- JavaScript中文网
https://www.javascriptcn/read-2429.html - 菜鸟教程JavaScript代码规范
http://www.runoob/js/js-function-definition.html - CSDN博客教程
https://blog.csdn/Ee2222/article/details/79902181
更多推荐
JavaScript代码规范(常用)
发布评论