所有的 JavaScript 项目适用同一种规范。


JavaScript 代码规范

代码规范通常包括以下几个方面:

  • 变量和函数的命名规则
  • 空格,缩进,注释的使用规则。
  • 其他常用规范……

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定,可以跟你的团队成员来协商设置。


变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John"; lastName = "Doe"; price = 19.90; tax = 0.20; fullPrice = price + (price * tax); 

在JavaScript中定义变量名时,还应该注意以下事项:

  • 变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;
  • 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型;
  • 变量名的命名应该是有意义的;
  • 变量名不能为JavaScript中的关键词、保留字全名;
  • 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

var x = y + z; var values = ["Volvo", "Saab", "Fiat"]; 


代码缩进

通常使用 4 个空格符号来缩进代码块:

函数:

function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); } 

注意:不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。

语句规则

简单语句的通用规则:

  • 一条语句通常以分号作为结束符。

实例:

var values = ["Volvo", "Saab", "Fiat"]; var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; 

复杂语句的通用规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。

函数:

function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); } 

循环:

for (i = 0; i < 5; i++) { x += i; } 

条件语句:

if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } 


对象规则

对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号,数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行,并以分号作为结束符号。

实例:

var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; 

短的对象代码可以直接写成一行:

实例:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 


每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。

实例:

实例:

document.getElementById("demo").innerHTML =
    "Hello W3Cschool.";

尝试一下 »

注意:在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 前换行。


命名规则

一般很多代码语言的命名规则都是类似的,例如:

  • 变量和函数为驼峰法( camelCase
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则: hyp-hens, camelCase, 或under_scores ?

HTML 和 CSS 的横杠(-)字符:

HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。

注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。

下划线:

很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法:

JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。

注意:变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。


HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj =getElementById("Demo")
var obj = getElementById("demo")

尝试一下 »

HTML 与 JavaScript 尽量使用相同的命名规则。

访问 HTML(5) 代码规范。


文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css

JavaScript 文件后缀是 .js


使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格,我们建议统一使用小写的文件名。

转载于:https://www.cnblogs.com/navysummer/p/8438938.html

JavaScript 代码规范相关推荐

  1. JavaScript代码规范及分号问题

    JavaScript代码规范及分号问题 JavaScript代码规范 -在实际开发项目中,每个开发者都有自己的代码风格,为了约定大家的代码风格,社区中诞生了一些比较规范的代码风格规范: -目前比较常用 ...

  2. JavaScript代码规范和性能整理

    性能 Js在性能方面有多要注意的地方: 避免全局查找 Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消 ...

  3. JavaScript代码规范

    类型 原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象. string number boolean null undefined var foo = 1,bar = ...

  4. javascript代码规范及格式化工具

    我使用vscode,vscode自带的有格式化的方法,但是使用起来并不是很方便.我发现同样的是js代码.有的文件可能会按四个空格格式化,有的会按两个空格格式化.我查了一个可以按照文件的类型配置缩进.但 ...

  5. 百度工程师手把手教你实现代码规范检测工具

    01 引言 代码规范是软件开发领域经久不衰的话题.在前端领域中,说到代码规范,我们会很容易想到检查代码缩进.尾逗号以及分号等等,除此之外,代码规范还包括了针对特殊场景定制化的检查.JavaScript ...

  6. 前端代码规范,vue 代码规范

    一.规范目的 对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护. 二.HTML/CS ...

  7. HTML5 代码规范

    HTML5 代码规范 在使用HTML5的过程中,使用规范化的代码能够更加方便你的运用与阅读,本节我们将带领你了解如何能够使得HTML5中的代码变得更加规范! HTML 代码约定 很多 Web 开发人员 ...

  8. 前端代码规范参考和如何保持前端代码规范

    1.前端代码规范参考 编写前端代码规范的主要驱动力是两方面:  1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践.  通过保持代码风格和传统的一致性,我们可以减少遗留系统维护 ...

  9. Javascript编码规范,好的代码从书写规范开始,增强代码的可读性,可维护性,这是相当重要的!...

    1. 前言 JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对JavaScript设 ...

最新文章

  1. 字符串拼接还在用StringBuilder?快试试Java8中的StringJoiner吧,真香!
  2. java compareto方法怎么排序的_深入理解Java中Comparable和Comparator排序
  3. 双边滤波器在灰度和彩色图像处理中的应用
  4. VMprotect简介
  5. (JAVA学习笔记) 关于方法的递归-阶乘方法演示
  6. 创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
  7. 时序竞态(竞态条件)
  8. mysql savepoint语法_SAVEPOINT语法错误一例
  9. 5.过滤器作为模板——模板匹配、Matlab模板匹配实战_2
  10. 【接口测试】接口和接口文档概念
  11. Node.js学习入门
  12. GB28181国标错误码整理
  13. vivado 下载bit报错End of startup status:LOW
  14. HBase2.4.10 踩坑笔记
  15. PHP鲜花销售管理系统毕业设计
  16. 爬虫,爬糗百热门段子
  17. 去广告插件——火狐浏览器
  18. MySQL——慢查询日志分析
  19. Tomcat是什么。Tomcat入门介绍
  20. sql server agent无法启动_PF启动首次实体瘤患者W0180人体临床试验

热门文章

  1. python重启路由器_Python3控制路由器——使用requests重启极路由.py
  2. java 自定义报表_灵活数据分析 | 自定义数据分析_集力数据系统平台_Java报表系统软件...
  3. Scude导入MySQL_FM2017_FMF赛季更新和真实修正数据库[更新至9.9,超过89000个更新]
  4. html生成自定义表格,自定义js的表格插件
  5. php-cgi cpu很高,php-cgi占用cpu资源过高的解决方法
  6. C语言开发笔记(八)static
  7. Java Calendar hashCode()方法与示例
  8. 用于将类型从double转换为int的C#程序
  9. Java——网络编程三要素
  10. 使用方法实现数组的对调与输出