zoukankan      html  css  js  c++  java
  • 前端良好的代码习惯

    一. 可读性强的命名

    命名是提高代码可读性的第一步,也是极其重要的一步,不仅在js里要命名变量名、函数名,还要在CSS里给命名class、id,给图片命名。好的变量名要完全、准确地描述出该变量所代表的事物。下面是一些命名的规则:

    1. 以问题为导向
      一个好记的变量名反映的通常都是问题,而不是解决方案。一个好名字通常表达的是“什么(what)”,而不是“如何(how)”。

    2.最适当的名字长度
    研究发现,当变量名的平均长度在10到16个字符的时候,调试程序所需花费的力气是最小的(1990)。平均名字长度在8到20个字符的程序也几乎同样容易调试。这项原则并不意味着你应该尽量把变量名控制在9到15或者10到16个字符长。它强调的是,如果你查看自己写的代码时发现了很多更短名字,那么你需要认真检查,确保这些名字含义足够清晰。

    表1:变量名太长、太短或更好合适的示例
    
    太长太短正好
    numberOfPeopleOnTheUsOlympicTeam,
    numberOfSeatsInTheStadium,
    maximumNumberOfPointsInModernOlympics
    n, np, ntm
    n, ms, nsisd
    m,mp,max,points
    numTeamMembers, teamMemberCount
    numSeatsInStadium, seatCount
    teamPontMax,pointsRecodrd

    note: 并不是所有短的变量名都不好,当你把一个变量名取得很短的时候,如 i ,这一长度本身就对变量做了一些说明——也就是说,改变量代表的是一个临时的数据,它的作用域非常有限,适用于局部变量或者循环变量;
    也并不是所有的较长的名字不好,较长的名字适用于很少用到的变量或者全局变量。

    1. 变量名中的计算值限定词
      很多程序都有表示计算结果的变量:总额、平均值、最大值,等等。如果你要用类似于Total、Sum、Average、Max、Min、Record、String、Pointer这样的限定词来修改某个名字,那么请记住把限定词加到名字的最后。

    2. 变量名中的常用对仗词

    • begin / end
    • first / last
    • locked / unlocked
    • min / max
    • next / previous
    • old / new
    • up / down
    1. 为状态变量命名
      像这种 statusFlag = 0x80这样的语句是反映不出这段代码是做什么的,除非你亲自写了这段代码,或者有文档能告诉你 statusFlag和0x80的含义。为了清楚起见,标记应该用枚举类型、具名常量,我们可以这样优化
    const CONTROL_CHARACTER = '0x80';
    characterType = CONTROL_CHARACTER;
    
    1. 为布尔变量命名
      下面是一些格外有用的布尔变量名:
    • done
    • error
    • found
    • success 或 ok
    1. 为枚举类型命名
      在使用枚举类型的时候,可以通过使用组前缀,如color_ , planet_ 或者 month_

    二. 写好注释

    代码注释一定是注明代码的目的,而不是代码的行为。

    三. 降低 if else 面条代码复杂度

    重构复杂的 if else代码,简单的方法是使用所谓的查找表。它通过键值对的形式来封装每个if else 的逻辑,如下代码:

    function test1 (a, b, c) {}
    function test2 (a, b, c) {}
    function test3 (a, b, c) {}
    
    function main (a, b, c) {
      let  product = getProduct();
      let result;
      if (product === 'aa') {
          result = test1(a, b, c);
      } else if (product === 'bb') {
          result = test2(a, b, c);
      } else if (product === 'cc') {
          result = test3(a, b, c);
      }
      return result
    }
    
    //我们可以优化成
    function main (a, b, c) {
      let product = getProduct();
       let  productMap = {
             'aa' : function (a, b, c) {/* ... */},
             'bb' : function (a, b, c) {/* ... */},
             'cc' : function (a, b, c) {/* ... */},
        }
        return productMap[product](a, b, c)
    }
                
    

    优化后的代码要比用if else 简洁多了,使用这种查找表的方式可以完成更复杂的if else语句,大家可以慢慢实践。



    作者:瓦斯程序媛
    链接:https://www.jianshu.com/p/4003b2cb6155
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    若silverlight程序在访问时不加载或白屏怎么办?直接访问xap文件报错:404怎么办?
    iis7 发布mvc3 遇到的HTTP错误 403.14Forbidden Web 服务器被配置为不列出此目录的内容
    Windows server 2008 64bit计划任务运行使用了excel 2003 32bit .net开发组件的程序遇到的问题
    运行WeCompanySite时遇到Error creating context 'spring.root': Error thrown by a dependency of object 'System.Data.SQLite' defined in 'assembly [Spring.Data,
    javascript中创建对象,并序列化为json,通过$.ajax的提交json数据到后台方法,取值为null的问题
    c# web.config 中SessionState的配置(转载)
    第一次使用Excel2007的Microsoft Query遇到的问题及解决:别名的使用
    开博
    谁更了解用户需求
    开发人员为何应该使用 Mac OS X 兼 OS X 小史
  • 原文地址:https://www.cnblogs.com/zytrue/p/8567877.html
Copyright © 2011-2022 走看看