几点建议帮你写出简洁的JS代码

- 日理万妓 2022-06-12 02:28 243阅读 0赞

我决定为初学者写一篇博客来介绍一些常见编程技巧，这些技巧可以帮助你写出更加规范，容易维护的代码。

### 1. 常量 ###

这个问题哦不仅仅是写JavaScript的开发者们会遇到，在所有的开发语言中都要避免。我们来看一个例子：

`27`到底代表什么？如果你经常编程，很容易知道这个数字代表ESC键。但是对大多数开发者，特别是初学者，他们要么记不住这些数字代号，要么根本就不知道。当在阅读源代码的时候，遇到这样的代码段，那么就需要花费时间去查找`27`和按键的对应关系。当然，你也可以在后边加上注释。不过，在这里我建议你使用一个常量名来代替，比如：`KEY_ESC = 27`。这样更加直观易懂！

### 2. 标识符(identifiers) ###

我们经常需要获取某个元素(评论、博客、用户、等等)的标识符，然后做一些计算。比如：

正如我们已经提过，阅读这段代码的开发者需要去推测为什么用`8`。

我们再举一个例子(来自一个实际的项目)：

html的布局稍有变动，都将导致这部分代码出错。

我们再看一个：

这段代码好一点，至少没有使用看不懂的数字，但JavaScript代码还是和html有太多的绑定。

我们可以使用`data-*`语法：

然后，用更加简洁的语法来获取属性值：

或则：

### 3. $.post ###

我们都知道`jQuery`有一个`ajax`函数`$.ajax`。对于具体的操作，还有`$.get`, `$..load`, `$.post`, 等等。这些函数被我们频繁的使用(上传一段脚本，json文件，执行一个post请求)，它们底层都是用`$.ajax`实现。

对于个人而言，我从不使用这些简化版的函数，接下来我会告诉你为什么。

对于初学者或则经验不足的开发者，你会发现写代码也会分为不同的层次：

*  a. 初级

*  b. 考虑异常情况
    
    <table style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle; border-collapse:collapse; border-spacing:0px; width:auto; line-height:1.6em"> 
     <tbody style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
      <tr style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
       <td style="margin:0px; padding:0px; border:none; outline:0px; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; border:none; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline; overflow:auto; line-height:22.4px; font-family:'Helvetica Neue'!important; background:rgb(255,255,255)">
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
          
             
            $.post(url, data, 
            
             
          <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)">data</span>) </span>{
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
            
             
          <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">try</span> {
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
          
             
                  data = $.parseJSON(data);
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
          
             
              } 
            
             
          <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">catch</span> (e) {
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">      
            
             
          <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">return</span>;
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
          
             
              }
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
            
             
          <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">//... </span>
           
            
         </div>
           
            
         <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
          
             
            });
           
            
         </div></pre> </td> 
      </tr> 
     </tbody> 
    </table>
 *  c. 如果认真阅读`$.post`的文档，我们就会发现最后一个参数应该是数据的类型`dataType`， 但是我发现在大多数开发者写的代码中都忘记了！

我发现初学者很少在项目开发中考虑错误处理，他们通常不愿意多花5分钟额外的时间去完善这部分工作，或则自信的认为代码不会有问题。

如果他们决定添加错误处理到`$.post`，通常会像下面这样写：

这样写是很难理解的！每次都去写出错处理非常的繁琐和耗时，你可以定义一个默认的错误处理句柄(default error handler)来应对所有的ajax请求。对于全局的异常，产品上线以后可以使用fundebug的[JavaScript插件][JavaScript]来抓取。

我们回到`$.post`函数，上面的写法很难读懂，而且`dataType`作为最后一个参数很容易遗漏。我个人认为，如下的写法更加容易阅读和维护：

<table style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle; border-collapse:collapse; border-spacing:0px; width:auto; line-height:1.6em"> 
 <tbody style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:0px; border:none; outline:0px; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; border:none; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline; overflow:auto; line-height:22.4px; font-family:'Helvetica Neue'!important; background:rgb(255,255,255)">
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      $.ajax({
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">type</span>: 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">"POST"</span>,
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">url</span>: url,
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">data</span>: data,
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">dataType</span>: 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">"json"</span>,
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">success</span>: 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)">data</span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">    
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">//...</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
        },
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline">error</span>: 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)"></span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">    
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">//...</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
        }
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      });
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

### 4. 多元素事件 ###

有时候，我们需要给页面元素绑定对应的事件(删除消息的按钮)。经常，我们会这样实现：

问题在于，如果我们要把同一个事件绑定到一个新的元素(比如一个新载入的评论)。我浏览过很多解法，其中一个典型的解法是重新定义所有元素上的事件：

在jQuery 1.7中有`on`事件，可以把事件绑定到某个行为，并且可以通过选择器(selector)过滤元素：

值得一提的是，上面的代码对于动态生成的对象也有效。应当大力提倡，不过也要小心！如下代码会导致效率的降低，拖慢浏览器的速度：

### 5. 带命名空间的事件(namespaced events) ###

带命名空间的事件(namespaced events)在jQuery 1.2就被加入了，但是没有几个人用。我敢打赌你也不知道！

举个例子：

<table style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle; border-collapse:collapse; border-spacing:0px; width:auto; line-height:1.6em"> 
 <tbody style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:0px; border:none; outline:0px; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; border:none; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline; overflow:auto; line-height:22.4px; font-family:'Helvetica Neue'!important; background:rgb(255,255,255)">
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      $(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'a'</span>).on(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'click'</span>, 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)"></span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">// Handler 1</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      }); 
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      $(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'a'</span>).on(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'click'</span>, 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)"></span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">// Handler 2</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      });
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

如果我们想要移除第二个handler, 使用`$(‘a’).off(‘click’)`确会把两个handler都移除掉！

但是如果使用带命名空间的事件，就可以搞定：

<table style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle; border-collapse:collapse; border-spacing:0px; width:auto; line-height:1.6em"> 
 <tbody style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:0px; border:none; outline:0px; font-style:inherit; font-family:inherit; font-size:14px; vertical-align:middle"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; border:none; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline; overflow:auto; line-height:22.4px; font-family:'Helvetica Neue'!important; background:rgb(255,255,255)">
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      $(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'a'</span>).on(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'click.namespace1'</span>, 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)"></span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">//Handler 1</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      }); 
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      $(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'a'</span>).on(
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,204,153)">'click.namespace2'</span>, 
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(102,153,204)"><span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(204,153,204)">function</span>(<span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(249,145,87)"></span>) </span>{
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">  
      
       
      <span style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:rgb(153,153,153)">//Handler 2</span>
     
      
     </div>
     
      
     <div style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; height:22.4px">
      
       
      });
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

使用如下代码移除：

这还只是我在阅读别人代码的时候，经常遇到的问题中的一小部分。我希望这篇文章可以帮助大家提高写代码的质量！

[JavaScript]: https://docs.fundebug.com/notifier/javascript/