如何写出优雅的Javascript代码

vw3683 3年前
   <p>笔者以前写Javascript的时候,经常会把代码写的又臭又长又啰嗦。</p>    <p>在经过一段实践的实践和反思后,代码的优雅性应该提高很多。</p>    <h3><strong>不写分号</strong></h3>    <p>不写分号能显著让代码更加优雅,并少轻松你的双手。</p>    <p>可能很多人会有疑问,没有分号的Javascript也能正常运行?</p>    <p>几乎是的。不过在一些特殊的时候Javascript引擎并不会帮助你正确插入分号。</p>    <p>具体的情况只有这五个符号: + , - , ( , [ , /</p>    <p>没了。</p>    <p>也就是说,凡是新的一行代码以上述五个符号开头,那么之前一句的末尾是需要分号的。</p>    <p>而在实际情况中,以+,- 开头的新一行代码几乎不可能出现。</p>    <p>所以可能情况:</p>    <pre>  <code class="language-javascript">(function(){    // do something  })()</code></pre>    <p>如果之前没加分号,那么这个匿名函数外的括号会调用上一行定义的函数,匿名函数就变成了参数。记住下面的这个分号</p>    <pre>  <code class="language-javascript">;(function(){    // do something  })()</code></pre>    <p>还有比如这样</p>    <pre>  <code class="language-javascript">;(a == 1 || b == 1) && fn()    ;[].slice.call()    ;/abc/.test('abcd')</code></pre>    <p>除了上面例子,几乎没有其他情景需要加分号了。</p>    <p>所以经常遇到这种情况,一个javascript文件里几百个分号全是没必要的。</p>    <p>而且,通常在生产环境中会提前用uglify.js去压缩代码,或是用ES6时babel转码,这都会帮你补全分号。</p>    <p>所以还有什么理由去写分号呢?</p>    <p>当然写不写分号也属于个人习惯,知道什么时候分号是不可省的才是重点。</p>    <p>PS:Vue.js的源码就是不写分号的。</p>    <h3><strong>使用ES6</strong></h3>    <p>相比较ES5,ES6的语法中的结构赋值,箭头函数,模板字符串,对象的简写法等都能让代码变得干净利落。</p>    <p>比如一个判断奇偶的函数</p>    <pre>  <code class="language-javascript">function isEven(x){      return x % 2 == 0  }</code></pre>    <p>ES6:</p>    <pre>  <code class="language-javascript">const isEven = x => x % 2 == 0</code></pre>    <p>比如字符串拼接</p>    <pre>  <code class="language-javascript">dom.innerHTML='Hello '      + name      + ',How you today?'</code></pre>    <p>ES6:</p>    <pre>  <code class="language-javascript">dom.innerHTML=`Hello       ${name}      How you today?`</code></pre>    <h3><strong>一些优雅的写法</strong></h3>    <p>逻辑运算符</p>    <pre>  <code class="language-javascript">if (a == 1) {      b()  }  //可以写成  a == 1 && b()</code></pre>    <p>初始化变量</p>    <pre>  <code class="language-javascript">var a = obj || {}</code></pre>    <p><strong>三元运算符</strong></p>    <pre>  <code class="language-javascript">var a = b % 2 == 0 ? 'even' : 'odd'</code></pre>    <h3><strong>合理的命名</strong></h3>    <p>具体来说有这样几点:</p>    <ul>     <li>方法名以动词开头,比如 var getName = function(){}</li>     <li>布尔值以is开头, var isEven = function(x){return x % 2 == 0}</li>     <li>驼峰大小写和下划线不要混用,比如 whatTheHell 和 what_the_hell</li>     <li>下划线只有在私有对象属性时使用</li>     <li>方法内部变量尽可能短</li>    </ul>    <h3><strong>变量声明</strong></h3>    <p>变量声明尽可能的放在开头,这样有助于:</p>    <ul>     <li>提供一个单一地址查找到函数所有需要的局部变量</li>     <li>防止因声明提升所引发的逻辑错误</li>     <li>帮助牢记要声明的变量,尽可能地少适用全局变量</li>    </ul>    <p>使用逗号隔开换行,而非每一行重新 var</p>    <pre>  <code class="language-javascript">var a = 1  var b = 2  //换成  var a = 1,      b = 2</code></pre>    <p>有的时候也可以把逗号写在开头,这样比较方便加入新的变量</p>    <pre>  <code class="language-javascript">var a = 1     ,b = 2     ,c = 3</code></pre>    <h3><strong>对齐方式</strong></h3>    <pre>  <code class="language-javascript">var express =   require('express')  var path =      require('path')  var favicon =   require('serve-favicon')  var logger =    require('morgan')</code></pre>    <p>实际上用var的时候是可以用逗号的。所以在ES6中更经常出现的情况:</p>    <pre>  <code class="language-javascript">import Vue          from 'vue'  import VueResource  from 'vue-resource'  import VueValidator from 'vue-validator'  import VueRouter    from 'vue-router'  import Vuex         from 'vuex'</code></pre>    <h3><strong>缩短常用方法名</strong></h3>    <pre>  <code class="language-javascript">var $ = function(x){      return document.getElementById(x)  }</code></pre>    <h3><strong>避免超长代码</strong></h3>    <p>如果代码长到底部的滚动条都出现了,如何算得上优雅呢。</p>    <p>所以要保持每一行的代码不要太长,具体有这样需要注意的地方:</p>    <ul>     <li> <p>内部不重要的过程性代码尽可能短,但至少保留语义</p> </li>     <li> <p>如果用到链式语法,可在 ' . '的开头换行</p> <pre>  <code class="language-javascript">[].concat(arr).sort().forEach(fn)...</code></pre> 可以改成 <pre>  <code class="language-javascript">[].concat(arr)    .sort()    .forEach(fn)...</code></pre> </li>     <li> <p>字符串拼接时,用加号换行,或用ES6的模板字符串</p> </li>     <li> <p>如果因为逻辑运算符儿导致过长,可以将逻辑运算符换行</p> </li>     <li> <p>如果函数参数过长,可以将参数换行,也是没问题的</p> </li>     <li> <p>尽可能避免嵌套过多的 if 语句</p> </li>     <li> <p>如果还是很长,可以尝试2个空格缩进</p> </li>    </ul>    <h3><strong>其他细节</strong></h3>    <ul>     <li> <p>代码不同功能区之间加空行,比如每个funtion之间</p> </li>     <li> <p>对于数组或类数组,可以用map等函数替代for循环</p> </li>     <li> <p>如 + 号的运算符之间加空格</p> </li>     <li> <p>若多次引用同一外部对象的属性,则定义到方法内部</p> </li>    </ul>    <h3><strong>最后</strong></h3>    <p>在实践中还有很多可以注意的地方,以后也会慢慢完善。</p>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/4e4289c5bcdc</p>    <p> </p>