可维护性

基本的编码规范

1. 变量名应该是名词，如 person，car 等
2. 函数名以动词开头，如，getName()。返回布尔类型函数应该以 is 开头，如，isPerson()
3. 变量名和函数名都应该使用符合逻辑的名称，且尽量不要使用单词缩写，除非是达成共识的缩写，如，有些开发者在开发中，将 project 写成 proj 这是不必要的
4. 变量，函数和方法应该以小写字母开头，多个单词组合应该按照驼峰大小写。类名首字母大写，如，Person
5. 常量值全大写，且以下划线分割，如，TIMETABLE_HOUR
6. 变量类型透明化，因为 JavaScript 中变量类型是松散的，所以很容易忘记变量类型，最好的方式就是初始化表明变量类型，如 let age = 11，let person = null。在函数中（ES6 之后）同样可以赋值默认值

function funcExample(param = 'value') {}

7. 必要的时候可以利用注释，但谨记，注释是函数表意没有达到满意要求的不得已而为之，不要把注释当做一件好事，它是最坏的解决方式。注释
8. 避免不必要的上下文

// 错误示例
const user = {
	userId: "1",
	userEmail: "xxx@example.com",
	userAge: 12
}

// 正确示例
const user = {
	id: "1",
	email: "xxx@example.com",
	age: 12
}

松散耦合

编码中，应做到 HTML 和 JavaScript，CSS 和 JavaScript 分开。

1. 如果需要修改 CSS 样式，采用动态类名的方式，而不是直接修改 CSS 样式
2. 函数，方法与事件都应该遵循单一权责原则，每个函数只负责一个功能，不应该将多个功能放入一个函数，应该剥离开，通过函数调用的方式书写，通常这样书写后，每个函数并不会太长，保证了可读性
3. 事件中，不要将 event 对象传给其他方法，而是传递 event 中的必要数据，如 event.target

编码惯例

1. 尊重对象所有权，如果你不负责创建和维护某个对象，就不应该修改它的属性和方法。你可以通过创建新对象与之互动，或者继承的方式来添加新功能
2. 少量的全局变量，创建过多的全局变量势必造成污染和不可维护，一个页面尽量只创建一个全局变量，将这个全局变量当做容器（命名空间），其他内容写在容器中，通常这个容器的名字为公司的名字

var companyName = {
	name: 'realMetrix',
	sayName: function() {
		console.log(this.name);
	}
}

3. 不要比较 null，很多情况下，开发者喜欢在判断中比较 null，以便验证合法性，但这种仅仅是验证了存在性，比如传递的参数为 Array，仅仅比较 null，那传递费控字符串的时依旧可以通过验证，但不合法

// 使用 instanceof 或者 typeof 来验证类型
values instanceof Array

4. 使用常量，随着开发内容的增多，一旦对非常量数据的错误操作，就会导致整个变量的出错，所以应该对某些特定数据做到数据与逻辑分离。如，重复出现的值，用户界面字符串，URL，可能变化的字面值

性能

作为解释型语言，天生执行速度就比编译型语言慢，虽然现在的浏览器引擎可以对 JavaScript 进行编译和优化速度，但是不可以忽视良好的编码习惯对性能的影响

1. 避免变量的全局查找。因为作用域链的原理，任何对全局变量的访问都比局部变量慢，所以尽量采用局部变量，当你需要使用全局变量时，现在作用域中用局部变量指向它

// doc 位于函数体中
let doc = document; // document 是一个全局变量

语句最少化

1. 在一条语句中声明多个变量

// no
let count = 5;
let color = "blue";
let values = [1,2,3];
let now = new Date();

// yes
let count = 5,
	color = "blue",
	values = [1,2,3],
	now = new Date();

2. 一句话迭代值

// no
let name = values[i];
i++;

// yes
let name = values[i++];

3. 尽量使用对象字面量

优化 dom 交互

使用 dom 是非常影响速度的，当然类似 vue 这样的框架采用数据驱动，则很好的解决了这个问题

参考

《JavaScript 高级程序设计》
《代码整洁之道》

最后

以上就是自然砖头最近收集整理的关于JavaScript 的最佳实践可维护性性能参考的全部内容，更多相关JavaScript内容请搜索靠谱客的其他文章。