JavaScript 代码规范

news2024/9/23 3:25:46

文章目录

  • JavaScript 代码规范
    • JavaScript 代码规范
    • 变量名
    • 空格与运算符
    • 代码缩进
    • 语句规则
    • 对象规则
    • 每行代码字符小于 80
    • 命名规则
    • HTML 载入外部 JavaScript 文件
    • 使用 JavaScript 访问 HTML 元素
    • 文件扩展名
    • 使用小写文件名


JavaScript 代码规范

在这里插入图片描述

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


JavaScript 代码规范

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

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

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

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


变量名

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

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

空格与运算符

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

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 Runoob.";

命名规则

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

  • 变量和函数为驼峰法( 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 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。


使用小写文件名

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

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

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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/357176.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PADS设计基础

目录 1 PADS设计流程简介 2 快捷键 2.1鼠标指令 2.2快捷键 3元件库概述 3.1元件库分类 3.2创建元件库 3.3新的元件类型的创建 3.3.1 插座的创建 1 PADS设计流程简介 常规PADS设计流程:设计启动→建库→原理图设计→网表调入→布局→布线→验证优化→设计资料输出→加…

VUE3源码分析————rollup打包遇见问题

文章目录一、require无法使用二、The requested module xxx does not provide an export named default三、__filename无法使用四、path.resolve() arguments must be a string一、require无法使用 在使用rullup打包的过程中&#xff0c;我们需要在最外层的package.json文件中…

时间序列分解法

影响时间序列变化的因素通常由长期趋势&#xff0c;季节变动&#xff0c;周期变动&#xff0c;不规则变动几部分组成 长期趋势指现象在较长时期内持续发展变化的一种趋向或状态。季节变动是由于季节的变化引起的现象发展水平的规则变动&#xff08;波动长度固定&#xff09;周…

n阶数字回转方阵 ← 模拟法

【问题描述】 请编程输出如下数字回旋方阵。 【算法代码】 #include <bits/stdc.h> using namespace std;const int maxn100; int z[maxn][maxn];void matrix(int n) {int num2;z[0][0]1;int i0,j1;while(i<n && j<n) {while(i<j) z[i][j]num;while(j&…

Redis底层原理(持久化+分布式锁)

Redis底层原理 持久化 Redis虽然是个内存数据库&#xff0c;但是Redis支持RDB和AOF &#xff08;Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中 &#xff1b;Appen…

基于粒子群优化算法的电动汽车充放电V2G研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

CMMI-质量保证

质量保证&#xff08;Quality Assurance, QA&#xff09;的目的是提供一种有效的人员组织形式和管理方法&#xff0c;通过客观地检查和监控“过程质量”与“产品质量”&#xff0c;从而实现持续地改进质量。质量保证是一种有计划的、贯穿于整个产品生命周期的质量管理方法。质量…

Java ~ Collection/Executor ~ LinkedBlockingDeque【总结】

一 概述 简介 LinkedBlockingDeque&#xff08;链接阻塞双端队列&#xff09;类&#xff08;下文简称链接阻塞双端队列&#xff09;是BlockingDeqeue&#xff08;阻塞双端队列&#xff09;接口的唯一实现类&#xff0c;采用链表的方式实现。链接阻塞双端队列与LinkedBlockingQu…

【Java|golang】1792. 最大平均通过率---封装最小堆

一所学校里有一些班级&#xff0c;每个班级里有一些学生&#xff0c;现在每个班都会进行一场期末考试。给你一个二维数组 classes &#xff0c;其中 classes[i] [passi, totali] &#xff0c;表示你提前知道了第 i 个班级总共有 totali 个学生&#xff0c;其中只有 passi 个学…

Windows使用ssh协议远程连接ubuntu linux系统

Windows使用ssh协议远程连接ubuntu linux系统一、Windows远程连接ubuntu linux系统二、开启ubuntu ssh服务三、获取ubuntu子系统的ip地址四、从windows上通过ssh连接到ubuntu子系统五、设置ubuntu系统ssh自启动&#xff08;18.04&#xff09;一、Windows远程连接ubuntu linux系…

【JavaScript】JavaScript基本使用方法

如何回复程序员发来的短信&#xff1a;Hello world —hello nerd. 前言&#xff1a; 大家好&#xff0c;我是程序猿爱打拳。今天我给大家讲解的是初识JavaScript中基本组成成分、引入方法、输入输出语句&#xff0c;并用源码与效果图的方式展示给大家。 目录 1.JavaScript组成…

手机文字转语音软件哪个好用?超火的两款好用的文字转语音软件

有很多小伙伴对短视频配音比较感兴趣&#xff0c;但方方面面了解得不多&#xff0c;比如&#xff1a;配音有哪几种方法&#xff1f;需要注意些什么&#xff1f;用手机就可以操作么&#xff1f;好用的文字转语音软件有哪些&#xff1f;这篇文&#xff0c;小编就带大家简单了解一…

(C语言篇)扫雷的实现

文章目录 一、开始时的基本思维&#xff1a;二、进入游戏的逻辑(test.c文件中实现)三、游戏的编写 1. 初始化棋盘 I. test.cII. game.hIII. game.c 2.打印棋盘 I. test.cII. game.hIII. game.c 3.布置雷 I. test.cII. game.hIII. game.c 4.排查雷 I. test.cII. game.hIII. gam…

Java集合学习之Map

1.什么是Map Java里的Map接口是一个集合根接口&#xff0c;表示一个 键值对&#xff08;Key-Value&#xff09; 的映射。 简单来说就是键和值是一对的&#xff0c;每一个 Key都有唯一确定的 Value对应。 其中要求 键&#xff08;Key&#xff09; 唯一&#xff0c;因为是按照…

宏观经济研究:全国各省、地级市-社会融资规模增量数据(包含总额及8类明细)2013-2021年

数据来源&#xff1a;中国人民银行 时间跨度&#xff1a;2013-2021年&#xff0c;季度数据&#xff08;累计数&#xff09; 区域范围&#xff1a;全国31省份 数据字段&#xff1a; 31个省市社会融资规模增量数据&#xff0c;包含社会融资总额以及8类明细&#xff08;人民币…

12-Composer的配置与使用详解

1、自定义类与非类的自动加载与测试 # composer> php 包管理工具 &#xff0c;类似npm1.自己写的类&#xff0c;函数&#xff0c;接口&#xff0c;常量等全局成员&#xff0c;通过自动加载来实现按需加载 2.自己写的代码&#xff0c;有哪些依赖&#xff0c;用到了哪些外部成…

MySQL数据库调优————GROUP BY及DISTINCT优化

GROUP BY 三种处理GROUP BY的方式 松散索引扫描&#xff08;Loose Index Scan&#xff09;紧凑索引扫描&#xff08;Tight Index Scan&#xff09;临时表&#xff08;Temporary table&#xff09; 三种方式的性能一次递减 松散索引扫描 无需扫描满足条件的所有索引键即可返…

基于SSM,Spring, BootStrap 毕业设计管理系统的设计与实现

目录 一.前言介绍 二、主要技术 2.1 SSM框架介绍 2.2 MYSQL数据库 2.3 持久层框架MyBatis 2.4 前端框架BootStrap 三. 系统设计 3.1 系统架构设计 3.2 系统功能模块 3.2.1 学生模块 3.2.2 教师模块 3.2.3 管理员模块 四、数据库设计 4.1 数据分析 4.2 概念设计 …

SpringBoot搭建SpringMVC项目

前言据我的了解&#xff0c;现在不管是大公司或是小公司&#xff0c;如果使用java开发一个web项目&#xff0c;大部分都会选择使用SpringBoot&#xff0c;关于Springboot的好处&#xff0c;就不在这里过多赘述&#xff0c;总之Springboot有一套完整的生态&#xff0c;从项目构建…

Java【七大排序】算法详细图解,一篇文章吃透

文章目录一、排序相关概念二、七大排序1&#xff0c;直接插入排序2&#xff0c;希尔排序3&#xff0c;选择排序4&#xff0c;堆排序5&#xff0c;冒泡排序5.1冒泡排序的优化6&#xff0c;快速排序6.1 快速排序的优化7&#xff0c;归并排序三、排序算法总体分析对比总结提示&…