JavaScript 学习总结

JavaScript是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。
JavaScript虽然非常灵活,但是制定相对应的编程规范,可以增强代码的阅读性,提高代码的质量,避免因为灵活性而导致代码过于杂乱。

文件规范#

文件名#

脚本文件名推荐全部小写,中间可以使用下划线作为连接。

例如main_camera.js

但是需要优先考虑项目风格统一问题,所以优先按项目风格来命名。

编码方式#

源文件通常使用UTF-8编码。

代码内容#

模块导入和导出#

导入
推荐使用import而不是require

import '../utils/helper.js';

可以对导入的模块重命名:

1
2
import * as myModule from '/modules/my-module.js';
myModule.helper();

导出
模块导出必须命名,不能使用默认导出,避免不同模块命名不一样。

代码命名#

  • Package 驼峰法 myPackageName

  • Class 首字大写 MyClassName

  • Method 驼峰法 myFunctionName

  • Enum 首字大写 MyEnumName

  • 常量 全大写 CONSTANT_CASE

  • 参数 驼峰法 myParameterName

  • 变量 驼峰法 myVariableName

对象和数组的赋值#

推荐使用 块状结构,这样阅读更加的清晰。

1
2
3
4
5
6
7
8
9
10
11
const list = [
0,
1,
2
];

const someone = {
a: 0,
b: 1,
c: 2
};

语句换行注意完整性#

换行需要保证语句的完整性。

1
2
3
4
5
6
7
// error
let result = this.add() + Floor(
50 * 2 - 60);

// right
let result = this.add() +
Floor(50 * 2 - 60);

代码缩进#

提倡用 4 个空格来进行缩进,并在同一产品中采用同一种缩进标准。不支持用 TAB 键进行缩进。这是因为直到现在还没有统一的标准来定义 TAB 键所代替的空白大小。

代码空行#

  • 函数和类的第一行和最后一行不要是空行
1
2
3
4
func() {
this.add();
this.leave();
}
  • 变量声明结束后
1
2
3
4
let value = 10;

funcTest() {
};
  • 注释前空行,但当注释在代码块的第一行时,则无需空行
1
2
3
4
5
6
7
funcTest() {
/* 第一行 */
fitstLine();

/* 第二行 */
secondLint();
};
  • 代码块后
1
2
3
4
5
func1() {
//...
}

func2();
  • 文件最后保留一个空行
1
2
3
class({
//....
});

函数的参数过长时注意换行#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
func(topNumber, rightNumber, leftNumber, bottomNumber) {
//...
}

// right
func(
topNumber,
rightNumber,
leftNumber,
bottomNumber
) {
//...
}

分号#

  • 变量声明 let a = 10;
  • 表达式 value = a > 0 ? 1: 3;
  • return return result;
  • throw throw new Error("404 Not Found!");
  • break break;
  • continue continue;
  • do-while do { } while(true);

以上语句的末尾都需要加上分号。

虽然在js中不加分号,也没有问题,但是加上分号更加的方便阅读。

let 和 const#

let表示声明变量,而const表示声明常量,两者都为块级作用域;const 声明的变量都会被认为是常量,意思就是它的值被设置完成后就不能再修改了;但是如果const的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址没有变就行.

局部变量不要使用var关键字,var关键字的声明会提升到函数或全局内的最顶部,那么其变量的作用域就相当于整个函数或全局。

总结一下:

  • var 是修饰全局变量
  • let 是修饰局部变量
  • const 是修饰不可更改的常量,但是修饰对象时,对象的属性时可变的
1
2
3
4
5
6
7
8
func() {
// bad
var a = 1;

// right
let b = 2;
const c = 3;
}

从安全性讲,在开发中使用: const > let > var 。

变量声明不要合在一起#

1
2
3
4
5
6
// right
let a;
let b;

// bad
let a, b;

使用字面值而不是Array构造函数#

1
2
3
4
5
// bad
const list = new Array(1, 2, 3);

// right
cosnt arr = [1, 2, 3];

null 和 undefinde 区别#

  • null 是对象
  • undefinde 是为定义
1
2
3
let a = null; // a is object

let b; // b未赋值,所以 b is undefinde

Number#

需要注意的是,JavaScript没有什么浮点型之类的数据类型,JavaScript 只有一种数字类型Number

在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,它能表示最大值为 ±1.7976931348623157e+308,最小值为 ±5e-324。

1
2
let a = 1;
let b = 2.3;

this的指向#

函数中的this一般指的是当前对象本身,如果是箭头函数的话,就是函数之外的作用域了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
func() {
this.name = 'Tom';
return {
name: 'Jerry';
method() {
return this.name;
}
};
}
// 实际return值:Jerry

func() {
this.name = 'Tom';
return {
name: 'Jerry';
method: () => {
return this.name;
}
};
}
// 实际return值:Tom

字符串拼接#

常见两种写法:

1
2
3
4
5
6
7
const content = 100;
let str = "前缀" + content + "后缀"; // "前缀100后缀"

const content = 200;
let str = "前缀${content}后缀"; // "前缀200后缀";

let lenght = str.length; // str字符串的长度;

Enums#

枚举模板:

1
2
3
4
5
6
7
8
9
/**
* URL Sign
* @enum {string}
*/
const DefineWebUrlContent = {
SCHEME: "https",
ERROR_WEBGL: "WebGL",
BACK: "back",
};

纯字符串可以使用单引号#

在浏览器中单引号的解析速度更快;

在查找资料时,有种说法:双引号会搜索引号内的内容是不是有变量,有则输出其值,没有则输出原有内容。所以输出纯字符串的时候用单引号比双引号效率高,因为省去检索的过程。

但是在法语中,本身就有带单引号的单词,所以具体情况具体分析。

如果是要考虑HTML的前端文件,可以推荐使用单引号;
如果是单纯的JS脚本,使用双引号也没有影响。

遍历#

推荐使用常规 for循环
如果希望使用更加方便的新语法的话,推荐 for-of

for-in 效果很差,应该避免使用

值得注意的是,只有实现了迭代器(迭代协议)的对象才可以使用 for-of,js中所有的集合对象(数组、Set集合及Map集合)和字符串都是可迭代对象,这些对象中都有默认的迭代器。

比较#

JS 中的比较推荐使用: ===!==

但是,如果是与 null undefined 来对比就需要使用==

1
2
3
4
5
6
7
8
9
let a = 0;
let b = 2;
if (a === b) {
//...
}

if (a == null) {
//...
}

注释规范#

注释规范通常推荐使用 JSDoc 的规则。

JSDoc 是一个根据 JavaScript 文件中注释信息,生成 JavaScript 应用程序或模块的API文档的工具。

JSDoc注释一般应该放置在方法或函数声明之前,它必须以 /** 开始,以便由JSDoc解析器识别。

常用模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
* RoomInfo类,代房间信息.
* @constructor
* @param {number} roomId - 房间ID.
* @param {string} roomUser - 房间拥有者.
*/
roomInfo(roomId, roomUser) {
// ...
}

/**
* @return {Number} 返回值描述
* @example
* let id = this.getRoomId('Test');
*/
getRoomId(roomUser) {
return roomId;
}
  • @constructor 表示这是一个构造函数
  • @param {xx} yy 表示这是一个名为yy的参数,类型是xx
  • @return {xx} zzz 表示返回值类型是xx,返回值描述是zzz
  • @example 为举例的标识符,通常另起一行来写例子

JSDoc 的插件有很多,很多编辑器都是支持的,只需要通过插件生成就可以了。

附录#

CocosCreator本地储存 - cc.sys.localStorage

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×