如何编写高质量js代码

本文纯属个人观点，想到什么写什么，自然也有不全面的地方，先流水账似的列一下，后续不定期更新，察觉漏了什么就补上。

1、命名要具有语义化

• 函数名用动词，比如 function getUserInfo(){ } ，能从名字上大体看出这个函数实现了什么逻辑；
• 变量用名词，比如 let sex = ‘男’，能从名字上看出这个变量代表什么；
• 布尔值用 is 开头，比如 let isLoaded = false ，能从名字上看出这个布尔值判断的是什么；

附：变量、对象、数组等在被声明的同时，最好赋一个初始值，字符串可附’’，数字可附0，布尔值附false，对象附{}等。

2、注释要详细

语义化的命名和详细的注释都是高可读性代码不可或缺的条件，个别难以理解的变量注释可直接用单行注释写在变量后边，复杂的方法和大段逻辑代码用多行注释写在开头的地方，方法主要说明形参的含义和实现的需求。

3、勿使用内联样式

切勿使用大量或重复的内联style样式，大量内联样式会导致代码臃肿不堪，重复的内联样式一旦要改动就要改多个地方，毫无复用性，可读性差，维护困难。如果可以，一个内联样式都不要使用。

4、勿用js设置样式

例如document.getElementById('des').style.color = 'red' 之类的由js设置的样式，最终会以style内联的方式加在对应的元素上，如果需要改动这个样式，用F12一看，发现是内联样式，于是去找到对应的元素，再一看，这个元素并没有这个内联样式，于是知道这个样式是由 js 加上去的，然后苦逼的去找是哪个 js 的哪段代码加上去的，很难找。如果是写在css里的，一键定位，直接修改，可维护性强了N倍。

实际开发中避免不了使用 js 更改元素样式的情形，这时候可以将样式写在css里的某个class下，然后用 js 添加或删除对应的 class 即可，这样维护的时候，也可以一键定位去 css 里改。

5、避免重复定义css或方法

假设A需要一个通用的中等距离的下边距，于是定义.margin-bottom-md{ margin-bottom: 15px }，B也需要，但他不知道A已经定义，于是再定义.margin-b-md{ margin-bottom: 15px }，以此类推… …，于是诞生许多的同属性不同名的class样式，方法同理。

6、用好事件委托

当一个页面中的许多元素都需要注册绑定事件的时候

ele1.addEventListener('click', function () {
	 // xxx
})
ele2.addEventListener('click', function () {
	 // xxx
})
ele3.addEventListener('click', function () {
	 // xxx
})
// ....

将会有着茫茫多的事件绑定，维护性不好，代码重复率太高，jquery的粗暴注册法也有着诸多问题，比如：

$('li').on('click', function () {
	// if(xxxx){
	   //  xxxx
    // }
})

以上的代码通过jquery，用极简单的方法完成了页面里所有 li 的绑定事件注册，看似方便，实际主要存在以下问题：

• 过于粗暴，如果有1000个 li ，就得注册1000个事件，浪费；
• 页面加载完之后，如果有新的 li 被插入，新插入的 li 无绑定事件；
• 某个 li 被删除之后，绑定在这个 li 上的事件不会随之被删除，造成内存泄漏。

事件委托只需要注册1次绑定事件，利用冒泡机制，可以解决以上所有的问题，假设最外层div的class是container：

var container = document.querySelector('.container');
container.addEventListener('click', function (ele) {
	switch (ele.target.id) {
		case 'xxx':
			// xxxxx
     		break;
     	case 'yyy':
			// xxxxx
     		break;
	}
})

6、js逻辑代码解耦

避免一大段逻辑代码写在同一个方法里，甚至直接写在全局下。一般来说，一大段逻辑代码可以按照以下拆分3段：

• 数据获取；
• 逻辑处理；
• 事件处理。

这三段可以分别封装3个方法或N个方法，封装的方法通过传参可以复用。

7、DOM操作切勿写在循环里

// html
<ul id="general"></ul>

// js
let nameList = ['baiqi', 'limu', 'lianpo', 'wangjian', 'zhaoshe'],
	ul = document.getElementById('general');

nameList.forEach(function(name){
	 let li = document.createElement('li');
	 li.innerHTML = name;
	 ul.appendChild(li);
})

如上代码，将数组里武将名字写在页面的 ul 里，需求是实现了，但是操作了5次 dom，触发了5次重排重绘。

js 部分改写如下：

let nameList = ['baiqi', 'limu', 'lianpo', 'wangjian', 'zhaoshe'],
	ul = document.getElementById('general'),
	ulHtml = '';
	
nameList.forEach(function(name){
	ulHtml += `<li>${name}</li>`
})

ul.innerHTML = ulHtml;

同样实现需求，只操作了1次dom，只触发了1次重排重绘。

8、多次用到的局部变量存储为全局变量

function updateUI(){
	let imgs = document.getElementsByTagName("img");
	for (let i=0, len=imgs.length; i < len; i++){
		imgs[i].title = document.title + " image " + i;
	}
	var msg = document.getElementById("msg");
	msg.innerHTML = "Update complete.";
}

以上代码用到了3次document，如果页面中有上百个document，就要查找上百次document的作用域链，对性能不利，改写如下：

function updateUI(){
	let doc = document,
		imgs = doc.getElementsByTagName("img");
	for (let i=0, len=imgs.length; i < len; i++){
		imgs[i].title = doc.title + " image " + i;
	}
	let msg = doc.getElementById("msg");
	msg.innerHTML = "Update complete.";
}

改写后，只需引用一次document。

（后续不定期更新…）

---

一句话日记：今天似乎花了80%的空余时间学习，但收效甚微，提效很重要