编写具有可维护性的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);}//最后调用fetchfetch('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));

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