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

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

“维护”类别的存档

可维护的JavaScript -视频我的前锋谈话现在是可用的

星期六,10月11日,2008

可爱的人(看看我是什么意思)本科信息通信技术刚刚发布了“我关于可维护JavaScript的演讲视频”http://www.bachel-ict.nl/christianheilmann必威体育下载先锋会议在阿姆斯特丹举行:

这是演讲的第一部分:


Chris Heilmann:可维护JavaScript,第1部分单身汉Vimeo

和第2部分:


必威体育下载Christian Heilmann:可维护JavaScript,第2部分单身汉Vimeo

在谈话结束后,他们还采访了我,重新讨论了以下几点:


必威体育下载Christian Heilmann:可维护的JavaScript单身汉Vimeo

伟大的工作,谢谢你!

你可以找到幻灯片分享处的演讲幻灯片

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

周四,2月7日,2008

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

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

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

崩溃= 函数({
  var=文件。GetElementsByTagname(“div”;
  (var=;&书信电报;秒。长度;+ +{
    如果((]类名称indexOf(可折叠的! = = -1{
      var=文件。createElement(“p”;
      var一个=文件。createElement(“一个”;一个。setAttribute(“href”,''';一个。点击 = 函数({
        var证券交易委员会= parentNodenextSibling;
        如果(秒。风格显示 = = = “没有”{秒。风格显示 = “块”;
          写上。节点值 = “崩溃”
        } 其他的 {秒。风格显示 = “没有”;
          写上。节点值 = “扩大”
        }
        返回 ;
      };一个。列表末尾(文件。createTextNode(“扩大”;p。列表末尾(一个;(]风格显示 = “没有”;(]parentNode插入之前(,(];
    }
  }
}(;

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

步骤1:去掉外观和感觉

要做的第一件事不是在JavaScript中操作样式集合,而是将外观留给它所属的位置CSS。这使得剥皮和改变隐藏部分的方式变得容易,而不必在JavaScript中乱弄。我们可以通过赋值a来实现CSS类并删除它:

崩溃= 函数({
  var=文件。GetElementsByTagname(“div”;
  (var=;<秒。长度;+ +{
    如果((]类名称indexOf(可折叠的! = = -1{(]类名称 += ' ' + “崩溃”;
      var=文件。createElement(“p”;
      var一个=文件。createElement(“一个”;一个。setAttribute(“href”,''';一个。点击 = 函数({
        var证券交易委员会= parentNodenextSibling;
        如果(秒。类名称indexOf(“崩溃”! = = -1{秒。类名称 =秒。类名称取代(“崩溃”,;
          写上。节点值 = “崩溃”
        } 其他的 {秒。类名称 += ' ' + “崩溃”;
          写上。节点值 = “扩大”
        }
        返回 ;
      }一个。列表末尾(文件。createTextNode(“扩大”;p。列表末尾(一个;(]parentNode插入之前(,(];
    }
  }
}(;

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

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

崩溃= 函数({
  var=文件。GetElementsByTagname(“div”;
  (var=,j=秒。长度;<j;+ +{
    如果((]类名称indexOf(可折叠的! = = -1{(]类名称 += ' ' + “崩溃”;
      var=文件。createElement(“p”;
      var一个=文件。createElement(“一个”;一个。setAttribute(“href”,''';一个。点击 =切换;一个。列表末尾(文件。createTextNode(“扩大”;p。列表末尾(一个;(]parentNode插入之前(,(];
    }
  }
  函数切换({
    var证券交易委员会= parentNodenextSibling;
    如果(秒。类名称indexOf(“崩溃”! = = -1{秒。类名称 =秒。类名称取代(“崩溃”,;
      写上。节点值 = “崩溃”
    } 其他的 {秒。类名称 += ' ' + “崩溃”;
      写上。节点值 = “扩大”
    }
    返回 ;
  }
}(;

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

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

崩溃= 函数({
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }
  var=文件。GetElementsByTagname(“div”;
  (var=,j=秒。长度;<j;+ +{
    如果((]类名称indexOf(配置。indicatorClass! = = -1{(]类名称 += ' ' +配置。collapsedClass;
      var=文件。createElement(“p”;
      var一个=文件。createElement(“一个”;一个。setAttribute(“href”,''';一个。点击 =切换;一个。列表末尾(文件。createTextNode(配置。expandLabel;p。列表末尾(一个;(]parentNode插入之前(,(];
    }
  }
  函数切换({
    var证券交易委员会= parentNodenextSibling;
    如果(秒。类名称indexOf(配置。collapsedClass! = = -1{秒。类名称 =秒。类名称取代(' ' +配置。collapsedClass,;
      写上。节点值 =配置。collapseLabel
    } 其他的 {秒。类名称 += ' ' +配置。collapsedClass;
      写上。节点值 =配置。expandLabel
    }
    返回 ;
  }
}(;

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

在提高代码的可维护性方面,这可能是最有用的步骤。肯定的是,在开发过程中证券交易委员会很有道理,但不部分让你更容易理解发生了什么?怎么样一个,尤其是当以后需要将它更改为按钮时?维护者会将其重命名为按钮吗?

崩溃= 函数({
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }
  var部分=文件。GetElementsByTagname(“div”;
  (var=,j=部分。长度;<j;+ +{
    如果(部分(]类名称indexOf(配置。indicatorClass = = ! - - - - - -1{部分(]类名称 += ' ' +配置。collapsedClass;
      var=文件。createElement(“p”;
      var触发=文件。createElement(“一个”;触发器。setAttribute(“href”,''';触发器。点击 =toggleSection;触发器。列表末尾(文件。createTextNode(配置。expandLabel;段落。列表末尾(触发;部分(]parentNode插入之前(,部分(];
    }
  }
  函数toggleSection({
    var部分= parentNodenextSibling;
    如果(部分。类名称indexOf(配置。collapsedClass = = ! - - - - - -1{部分。类名称 =部分。类名称取代(' ' +配置。collapsedClass,;
      写上。节点值 =配置。collapseLabel
    } 其他的 {部分。类名称 += ' ' +配置。collapsedClass;
      写上。节点值 =配置。expandLabel
    }
    返回 ;
  }
}(;

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

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

//折叠并展开具有特定类的页的节
//作者克里斯蒂安·海勒曼,必威体育下载07/01/08
(函数({/ /配置,在这里更改CSS类名和标签
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }var部分=文件。GetElementsByTagname(“div”;
  (var=,j=部分。长度;<j;+ +{
    如果(部分(]类名称indexOf(配置。indicatorClass! = = -1{部分(]类名称 += ' ' +配置。collapsedClass;
      var=文件。createElement(“p”;
      vartriggerLink=文件。createElement(“一个”;triggerLink。setAttribute(“href”,''';triggerLink。点击 =toggleSection;triggerLink。列表末尾(文件。createTextNode(配置。expandLabel;段落。列表末尾(triggerLink;部分(]parentNode插入之前(,部分(];
    }
  }
  函数toggleSection({
    var部分= parentNodenextSibling;
    如果(部分。类名称indexOf(配置。collapsedClass! = = -1{部分。类名称 =部分。类名称取代(' ' +配置。collapsedClass,;
      写上。节点值 =配置。collapseLabel
    } 其他的 {部分。类名称 += ' ' +配置。collapsedClass;
      写上。节点值 =配置。expandLabel
    }
    返回 ;
  }
}(;

所有显而易见的事情,我相信我们以前都做过,但是让我们诚实地说:我们忘记它们的频率有多高?如果有人采取了这些步骤,那么您需要修改代码的频率有多高?