资讯专栏INFORMATION COLUMN

JavaScript 编码规范

wenshi11019 / 2040人阅读

摘要:这样的变量增加了代码量,并且混淆读者。错误代码示例变量虽然声明了,但没被使用持续更新

JavaScript 编码规范 一、命名规范 1. 变量

命名方法:小驼峰式命名法(由小写字母开始,后续每个单词首字母都大写)

命名建议:语义化的名词

特殊:
布尔值变量建议添加符合其含义的前缀动词

is:是否

can:能不能

has:有没有

示例:

</>复制代码

  1. // 页面标题
  2. let pageTitle = "JS命名规范";
  3. // 是否显示
  4. let isShow = false;

2. 常量

命名方法:全部大写,用下划线来分割单词

3. 函数

命名方法:小驼峰式命名法(由小写字母开始,后续每个单词首字母都大写)

命名建议:语义化,前缀为动词

示例:

</>复制代码

  1. // 获取列表数据
  2. function getList() {
  3. // ...
  4. }

3. 类(构造函数)

命名方法:大驼峰式命名法(由大写字母开始,后续每个单词首字母都大写)

命名建议:语义化的名词

</>复制代码

  1. class Login {
  2. // ...
  3. }

实例属性和方法(遵循变量和函数的命名规范)

</>复制代码

  1. class Login {
  2. // 实例属性
  3. name = "iqeq";
  4. // 实例方法
  5. login = function () {
  6. // ...
  7. }
  8. // 实例方法简写
  9. reset() {
  10. // ...
  11. }
  12. }

静态属性和方法(遵循变量和函数的命名规范)

</>复制代码

  1. class Login {
  2. // 静态属性
  3. static description = "登陆业务逻辑";
  4. // 静态方法
  5. static log = function () {
  6. // ...
  7. }
  8. }

二、编码规则 1. 禁止在function中定义同名的变量

如果在一个函数中出现多个同名的参数,后面出现的会覆盖前面出现的参数。

错误代码示例:

</>复制代码

  1. function foo(a, b, a) {
  2. console.log("value of the second a:", a);
  3. }

正确代码示例:

</>复制代码

  1. function foo(a, b, c) {
  2. console.log(a, b, c);
  3. }
2. 禁止对在代码块中声明function

错误代码示例:

</>复制代码

  1. if (test) {
  2. function doSomethingElse () {
  3. // ...
  4. }
  5. doSomethingElse();
  6. }

正确代码示例:

</>复制代码

  1. function doSomethingElse () {
  2. // ...
  3. }
  4. if (test) {
  5. doSomethingElse();
  6. }
3. 禁止在 return throw continuebreak语句后出现不可达代码

错误代码示例:

</>复制代码

  1. function foo() {
  2. return true;
  3. console.log("done");
  4. }
  5. function bar() {
  6. throw new Error("Oops!");
  7. console.log("done");
  8. }
  9. while(value) {
  10. break;
  11. console.log("done");
  12. }
  13. throw new Error("Oops!");
  14. console.log("done");
  15. function baz() {
  16. if (Math.random() < 0.5) {
  17. return;
  18. } else {
  19. throw new Error();
  20. }
  21. console.log("done");
  22. }
4. 禁止对原生对象赋值

错误代码示例:

</>复制代码

  1. window = {};
  2. Object = null;
  3. undefined = 1;
5. 禁止重新声明变量

JavaScript中,可以对同一个变量再次声明。这会使变量实际声明和定义的位置混乱不堪。

错误代码示例:

</>复制代码

  1. var a = 3;
  2. var a = 10;

正确代码示例:

</>复制代码

  1. var a = 3;
  2. // ...
  3. a = 10;
6. 禁止声明未被使用过的变量

已声明的变量在代码里未被使用过,就像是由于不完整的重构而导致的遗漏错误。这样的变量增加了代码量,并且混淆读者。

错误代码示例:

</>复制代码

  1. function test(a) {
  2. // b变量虽然声明了,但没被使用
  3. var b = 1;
  4. return a + 1;
  5. }

持续更新....

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98044.html

相关文章

  • HTML编码规范

    摘要:当然我们还可以引入框架,这些框架一般都自带模板处理引擎,比如等语义化命名和语义化标签我们尽量多采用语义化来命名,并且采用语义化标签来书写代码,多用中新增的标签来书写。 1.黄金法则(Golden rule) 不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。 Every line of code should appear to be written by a si...

    nifhlheimr 评论0 收藏0
  • 在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

    摘要:编码规范是独角兽公司内部的编码规范,该项目是上很受欢迎的一个开源项目,在前端开发中使用广泛,本文的配置规则就是以编码规范和编码规范作为基础的。 更新时间:2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范 前言 为什么要使用 ESLint 在项目开发过程中,编写符合团队编码规...

    Hujiawei 评论0 收藏0
  • 编码规范 —— 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

    摘要:用两个空格代替制表符这是唯一能保证在所有环境下获得一致展现的方法。编辑器配置将你的编辑器按照下面的配置进行设置,以免常见的代码不一致和差异用两个空格代替制表符保存文件时删除尾部的空白符设置文件编码为在文件结尾添加一个空白行。 黄金定律 永远遵循同一套编码规范 - 可以是这里列出的,也可以是你自己总结的。如果发现规范中有任何错误,敬请指正。 HTML 语法 用两个空格代替制表符 (ta...

    Karuru 评论0 收藏0
  • 编码规范-html.md

    摘要:写在前面对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性可维护性。减少标签的数量编写代码时,尽量避免多余的父元素。 写在前面 对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。 本文大部分内容来自网上,仅供个人参考学习! 网络上的知...

    tomlingtm 评论0 收藏0
  • 编写灵活、稳定、高质量的HTML代码的规范

    摘要:六字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。十一减少标签的数量编写代码时,尽量避免多余的父元素。未完待续编写灵活稳定高质量的代码的规范阅读更多 一、唯一定律 无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的。 二、HTML 2.1 语法 (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法...

    anquan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<