JavaScript 的最佳实践

可维护性

基本的编码规范

  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') {
    
    }
  1. 必要的时候可以利用注释,但谨记,注释是函数表意没有达到满意要求的不得已而为之,不要把注释当做一件好事,它是最坏的解决方式。注释
  2. 避免不必要的上下文
// 错误示例
const user = {
    
    
	userId: "1",
	userEmail: "[email protected]",
	userAge: 12
}

// 正确示例
const user = {
    
    
	id: "1",
	email: "[email protected]",
	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);
	}
}
  1. 不要比较 null,很多情况下,开发者喜欢在判断中比较 null,以便验证合法性,但这种仅仅是验证了存在性,比如传递的参数为 Array,仅仅比较 null,那传递费控字符串的时依旧可以通过验证,但不合法
// 使用 instanceof 或者 typeof 来验证类型
values instanceof Array
  1. 使用常量,随着开发内容的增多,一旦对非常量数据的错误操作,就会导致整个变量的出错,所以应该对某些特定数据做到数据与逻辑分离。如,重复出现的值用户界面字符串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();
  1. 一句话迭代值
// no
let name = values[i];
i++;

// yes
let name = values[i++];
  1. 尽量使用对象字面量

优化 dom 交互

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

参考

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

猜你喜欢

转载自blog.csdn.net/qq_34902437/article/details/119806311