必威体育下载克里斯蒂安·海尔曼

您当前正在浏览重构类别的存档。必威体育简介

“重构”类别的存档

在将脚本移交给下一个开发人员之前,要对它做五件事

星期四,2月7日,二千零八

让我们面对现实:没有太多开发人员计划他们的javascript。相反,我们快速地写一些有用的东西,然后提交。随着我们的发展,我们提出了变量和函数名,并且最终知道我们将永远不必再看到这一小段脚本。

当我们再次看到我们的脚本时,问题就开始了,或者我们从其他开发人员那里得到脚本,都是以同样的方式建造的。这就是为什么当提到“这已经完成了,我可以继续下去。

假设我们的工作是在div在包含类的文档中可折叠的会显示和隐藏div.首先要做的是使用一个库来解决跨浏览器事件处理的问题。我们暂时不要把注意力集中在这个问题上,而是在这里讨论不同的事情时,去找老派的OnEvent处理程序。使用模块模式,我们可以用几行代码创建类似这样的功能:

折叠器= 功能{
  变量=文件。GetElementsByTagname“div”
  对于变量=0&书信电报秒。长度++{
    如果[].类名.索引“可折叠”!={
      变量P=文件。创建元素“P”
      变量=文件。创建元素“A”a.设置属性“HREF”''a.一次点击 = 功能{
        变量= .返回节点.下一步
        如果秒。风格.显示 = = “没有”{秒。风格.显示 = “阻塞”
          .初生子女.节点值 = “崩溃”
        } 其他的 {秒。风格.显示 = “没有”
          .初生子女.节点值 = “展开”
        }
        返回 
      }a.附属儿童文件。创建节点“展开”P.附属儿童[].风格.显示 = “没有”[].返回节点.插入之前P[]
    }
  }
}

这已经相当干净了(我确信您已经看到了innerhtml的javascript:links解决方案),而且不引人注目,但有些事情不应该存在。

步骤1:去除外观和感觉

首先要做的不是在javascript中操作样式集合,而是将外观和感觉保留到它所属的位置:CSS.这使得剥皮和改变隐藏部分的方式变得容易,而不必在JavaScript中乱弄。我们可以通过分配CSS类并将其移除:

折叠器= 功能{
  变量=文件。GetElementsByTagname“div”
  对于变量=0<秒。长度++{
    如果[].类名.索引“可折叠”!={[].类名 +=  + “崩溃”
      变量P=文件。创建元素“P”
      变量=文件。创建元素“A”a.设置属性“HREF”''a.一次点击 = 功能{
        变量= .返回节点.下一步
        如果秒。类名.索引“崩溃”!={秒。类名 =秒。类名.代替“崩溃”''
          .初生子女.节点值 = “崩溃”
        } 其他的 {秒。类名 +=  + “崩溃”
          .初生子女.节点值 = “展开”
        }
        返回 
      }a.附属儿童文件。创建节点“展开”P.附属儿童[].返回节点.插入之前P[]
    }
  }
}

步骤2:消除明显的速度问题

这个脚本中没有很多问题,但是有两件事是显而易见的:for循环在每次迭代中读取secs集合的length属性,我们为每个链接创建相同的匿名函数来显示和隐藏该部分。在另一个变量中缓存长度并创建一个重新使用的命名函数更有意义:

折叠器= 功能{
  变量=文件。GetElementsByTagname“div”
  对于变量=0J=秒。长度<J++{
    如果[].类名.索引“可折叠”!={[].类名 +=  + “崩溃”
      变量P=文件。创建元素“P”
      变量=文件。创建元素“A”a.设置属性“HREF”''a.一次点击 =切换a.附属儿童文件。创建节点“展开”P.附属儿童[].返回节点.插入之前P[]
    }
  }
  功能切换{
    变量= .返回节点.下一步
    如果秒。类名.索引“崩溃”!={秒。类名 =秒。类名.代替“崩溃”''
      .初生子女.节点值 = “崩溃”
    } 其他的 {秒。类名 +=  + “崩溃”
      .初生子女.节点值 = “展开”
    }
    返回 
  }
}

步骤3:从功能代码中删除每个标签和名称

这在维护方面很有意义。当然,当标签名或类名必须更改时,很容易进行快速搜索+替换,但这并非真正必要。通过将所有人类可读的东西移动到一个自己的配置对象中,您不必搜索代码,也不必遭受搜索+替换错误的影响,但是相反,把所有变化的比特和波波放在一个地方:

折叠器= 功能{
  变量配置= {指示器类 “可折叠”塌陷阶级 “崩溃”塌陷 “崩溃”扩展标签 “展开”
  }
  变量=文件。GetElementsByTagname“div”
  对于变量=0J=秒。长度<J++{
    如果[].类名.索引配置。指示器类!={[].类名 +=  +配置。塌陷阶级
      变量P=文件。创建元素“P”
      变量=文件。创建元素“A”a.设置属性“HREF”''a.一次点击 =切换a.附属儿童文件。创建节点配置。扩展标签P.附属儿童[].返回节点.插入之前P[]
    }
  }
  功能切换{
    变量= .返回节点.下一步
    如果秒。类名.索引配置。塌陷阶级!={秒。类名 =秒。类名.代替 +配置。塌陷阶级''
      .初生子女.节点值 =配置。塌陷
    } 其他的 {秒。类名 +=  +配置。塌陷阶级
      .初生子女.节点值 =配置。扩展标签
    }
    返回 
  }
}

步骤4:使用人类可读的变量和方法名

在提高代码的可维护性方面,这可能是最有用的步骤。当然,开发过程中很有道理,但不部分让它更容易掌握正在发生的事情?怎么样,尤其是以后需要换成按钮的时候?维护者会将其重命名为按钮

折叠器= 功能{
  变量配置= {指示器类 “可折叠”塌陷阶级 “崩溃”塌陷 “崩溃”扩展标签 “展开”
  }
  变量部分=文件。GetElementsByTagname“div”
  对于变量=0J=部分。长度<J++{
    如果部分[].类名.索引配置。指示器类 != -{部分[].类名 +=  +配置。塌陷阶级
      变量段落=文件。创建元素“P”
      变量触发=文件。创建元素“A”触发。设置属性“HREF”''触发。一次点击 =关节切除术触发。附属儿童文件。创建节点配置。扩展标签段落。附属儿童触发部分[].返回节点.插入之前段落部分[]
    }
  }
  功能关节切除术{
    变量部分= .返回节点.下一步
    如果部分。类名.索引配置。塌陷阶级 != -{部分。类名 =部分。类名.代替 +配置。塌陷阶级''
      .初生子女.节点值 =配置。塌陷
    } 其他的 {部分。类名 +=  +配置。塌陷阶级
      .初生子女.节点值 =配置。扩展标签
    }
    返回 
  }
}

第5步:评论,签名并可能消除最后一个与其他脚本的冲突

最后一步是在真正需要的地方添加注释,说出你的名字和日期(这样人们就可以问问题,知道什么时候做了)。为了真正的安全,我们甚至可以去掉脚本的名称并保持匿名模式。

//折叠并展开具有特定类的页的节
//作者:Christian 必威体育下载Heilmann,07/01/08
功能{//配置,在此处更改CSS类名和标签
  变量配置= {指示器类 “可折叠”塌陷阶级 “崩溃”塌陷 “崩溃”扩展标签 “展开”
  }变量部分=文件。GetElementsByTagname“div”
  对于变量=0J=部分。长度<J++{
    如果部分[].类名.索引配置。指示器类!={部分[].类名 +=  +配置。塌陷阶级
      变量段落=文件。创建元素“P”
      变量触发链路=文件。创建元素“A”触发链路设置属性“HREF”''触发链路一次点击 =关节切除术触发链路附属儿童文件。创建节点配置。扩展标签段落。附属儿童触发链路部分[].返回节点.插入之前段落部分[]
    }
  }
  功能关节切除术{
    变量部分= .返回节点.下一步
    如果部分。类名.索引配置。塌陷阶级!={部分。类名 =部分。类名.代替 +配置。塌陷阶级''
      .初生子女.节点值 =配置。塌陷
    } 其他的 {部分。类名 +=  +配置。塌陷阶级
      .初生子女.节点值 =配置。扩展标签
    }
    返回 
  }
}

所有非常明显的事情,我相信我们以前都做过,但是,让我们诚实地说:我们多久忘记一次代码,多久修改一次代码,如果有人采取了这些步骤,代码会变得更好?