首页 > 编程知识 正文

javascript 代码规范,js基本代码规范

时间:2023-05-06 03:12:50 阅读:219243 作者:1153

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.com/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.建议每次只声明一个变量 声明变量时,建议每次只声明一个变量,避免一次声明多个变量// badlet a = 1, b = 2, c = 3;// goodlet 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.com/read-2429.html菜鸟教程JavaScript代码规范
http://www.runoob.com/js/js-function-definition.htmlCSDN博客教程
https://blog.csdn.net/Ee2222/article/details/79902181

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。