编写具有可维护性的JavaScript代码

首先可定是缩进的问题了，有的人喜欢使用空格键，有的人喜欢使用tab键，不管是使用空格键还是使用tab键，在项目开始前，只要统一规范就可以了。

其次，确保只要通过变量或者函数的名字就能知道这段代码是干什么用的，而不是要读整段代码才知道它是干什么的。例如：

//命名不一致，很难能够理解代码在做什么
const $element = $('.element');

function _privateMethod () {
const self = $(this);
const _internalElement = $('.internal-element');
let $data = element.data('foo');
//... more logic.
}

//命名一致、规范的，可以很容易理解
const $element = $('.element');

function _privateMethod () {
const $this = $(this);
const $internalElement = $('.internal-element');
let elementData = $element.data('foo');
//... more logic.
}

最后是代码模块快的问题。先来看个例子：

//这个例子使用了FetchAPI，假定返回一个json文件并携带了一些内容，创建一个新元素，读取json内容的字符长度，并把它放到一个新标签中
fetch('https://api.somewebsite.io/post/61454e0126ebb8a2e85d', { method: 'GET' })
.then(response => {
if (response.status === 200) {
return response.json();
}
})
.then(json => {
if (json) {
Object.keys(json).forEach(key => {
const item = json[key];
const count = item.content.trim().replace(/\s+/gi, '').length;
const el = `
<div class="foo-${item.className}">
<p>Total characters: ${count}</p>
</div>
`;
const wrapper = document.querySelector('.info-element');

wrapper.innerHTML = el;
});
}
})
.catch(error => console.error(error));

这段代码没有进行模块化，藕合性强每段代码都和其它代码关联在一起，如果有更大更复杂的函数，你可能要debug这个，因为有些地方容易出错，可能是API没有响应，json里的数据发生了变化等等。维护性很差。

让我们看看模块化的代码：

// 这个模块是用来获取响应文本的字符长度
function countCharacters (text) {
const removeWhitespace = /\s+/gi;
return text.trim().replace(removeWhitespace, '').length;
}

// 用DOM创建了一个标签，而不是使用上个例子的字符串，然后把字符长度放到文本节点中
function createWrapperElement (cssClass, content) {
const className = cssClass || 'default';
const wrapperElement = document.createElement('div');
const textElement = document.createElement('p');
const textNode = document.createTextNode(`Total characters: ${content}`);

wrapperElement.classList.add(className);
textElement.appendChild(textNode);
wrapperElement.appendChild(textElement);

return wrapperElement;
}

// foreach内的匿名函数
function appendCharacterCount (config) {
const wordCount = countCharacters(config.content);
const wrapperElement = createWrapperElement(config.className, wordCount);
const infoElement = document.querySelector('.info-element');

infoElement.appendChild(wrapperElement);
}

//最后调用fetch
fetch('https://api.somewebsite.io/post/61454e0126ebb8a2e85d', { method: 'GET' })
.then(response => {
if (response.status === 200) {
return response.json();
}
})
.then(json => {
if (json) {
Object.keys(json).forEach(key => appendCharacterCount(json[key]))
}
})
.catch(error => console.error(error));

这样代码之间就是弱耦合，可维护，结构也清晰。