必威体育下载基督教Heilmann

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

存档为“清洁”类别

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

周四,2月7日,2008

让我们面对事实:没有太多的开发人员计划他们的java脚本。相反,我们快速写出一些有用的东西,并提交它。随着时间的推移,我们得到了变量和函数的名称,最后我们知道我们再也不用看到这一小段脚本了。

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

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

崩溃= 函数(){
  var=文档。getElementsByTagName(“div”);
  (var=0;<秒。长度;+ +){
    如果((].类名称.indexOf(可折叠的)! = = -1){
      varp=文档。createElement(“p”);
      var一个=文档。createElement(“一个”);一个。setAttribute(“href”,“#”);一个。onclick = 函数(){
        var证券交易委员会= .parentNode.nextSibling;
        如果(秒。风格.显示 = = = “没有”){秒。风格.显示 = “块”;
          .写上。.nodeValue = “崩溃”
        } 其他的 {秒。风格.显示 = “没有”;
          .写上。.nodeValue = “扩大”
        }
        返回 ;
      };一个。列表末尾(文档。createTextNode(“扩大”));p。列表末尾(一个);(].风格.显示 = “没有”;(].parentNode.方法(p,(]);
    }
  }
}();

这已经相当干净(我相信您已经看到了使用javascript: links的innerHTML解决方案),但是有些事情是不应该出现的。

步骤1:去掉外观和感觉

要做的第一件事不是在JavaScript中操作样式集合,而是将外观留给它所属的位置CSS.这允许轻松地剥皮和更改隐藏部分的方式,而无需在JavaScript中进行修改。我们可以通过赋值a来实现CSS类并删除它:

崩溃= 函数(){
  var=文档。getElementsByTagName(“div”);
  (var=0;<秒。长度;+ +){
    如果((].类名称.indexOf(可折叠的)! = = -1){(].类名称 + = ' ' + “崩溃”;
      varp=文档。createElement(“p”);
      var一个=文档。createElement(“一个”);一个。setAttribute(“href”,“#”);一个。onclick = 函数(){
        var证券交易委员会= .parentNode.nextSibling;
        如果(秒。类名称.indexOf(“崩溃”)! = = -1){秒。类名称 =秒。类名称.取代(“崩溃”,'');
          .写上。.nodeValue = “崩溃”
        } 其他的 {秒。类名称 + = ' ' + “崩溃”;
          .写上。.nodeValue = “扩大”
        }
        返回 ;
      }一个。列表末尾(文档。createTextNode(“扩大”));p。列表末尾(一个);(].parentNode.方法(p,(]);
    }
  }
}();

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

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

崩溃= 函数(){
  var=文档。getElementsByTagName(“div”);
  (var=0,j=秒。长度;<j;+ +){
    如果((].类名称.indexOf(可折叠的)! = = -1){(].类名称 + = ' ' + “崩溃”;
      varp=文档。createElement(“p”);
      var一个=文档。createElement(“一个”);一个。setAttribute(“href”,“#”);一个。onclick =切换;一个。列表末尾(文档。createTextNode(“扩大”));p。列表末尾(一个);(].parentNode.方法(p,(]);
    }
  }
  函数切换(){
    var证券交易委员会= .parentNode.nextSibling;
    如果(秒。类名称.indexOf(“崩溃”)! = = -1){秒。类名称 =秒。类名称.取代(“崩溃”,'');
      .写上。.nodeValue = “崩溃”
    } 其他的 {秒。类名称 + = ' ' + “崩溃”;
      .写上。.nodeValue = “扩大”
    }
    返回 ;
  }
}();

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

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

崩溃= 函数(){
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }
  var=文档。getElementsByTagName(“div”);
  (var=0,j=秒。长度;<j;+ +){
    如果((].类名称.indexOf(配置。indicatorClass)! = = -1){(].类名称 + = ' ' +配置。collapsedClass;
      varp=文档。createElement(“p”);
      var一个=文档。createElement(“一个”);一个。setAttribute(“href”,“#”);一个。onclick =切换;一个。列表末尾(文档。createTextNode(配置。expandLabel));p。列表末尾(一个);(].parentNode.方法(p,(]);
    }
  }
  函数切换(){
    var证券交易委员会= .parentNode.nextSibling;
    如果(秒。类名称.indexOf(配置。collapsedClass)! = = -1){秒。类名称 =秒。类名称.取代(' ' +配置。collapsedClass,'');
      .写上。.nodeValue =配置。collapseLabel
    } 其他的 {秒。类名称 + = ' ' +配置。collapsedClass;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
}();

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

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

崩溃= 函数(){
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }
  var部分=文档。getElementsByTagName(“div”);
  (var=0,j=部分。长度;<j;+ +){
    如果(部分(].类名称.indexOf(配置。indicatorClass) = = ! - - - - - -1){部分(].类名称 + = ' ' +配置。collapsedClass;
      var=文档。createElement(“p”);
      var触发=文档。createElement(“一个”);触发器。setAttribute(“href”,“#”);触发器。onclick =toggleSection;触发器。列表末尾(文档。createTextNode(配置。expandLabel));段落。列表末尾(触发);部分(].parentNode.方法(,部分(]);
    }
  }
  函数toggleSection(){
    var部分= .parentNode.nextSibling;
    如果(部分。类名称.indexOf(配置。collapsedClass) = = ! - - - - - -1){部分。类名称 =部分。类名称.取代(' ' +配置。collapsedClass,'');
      .写上。.nodeValue =配置。collapseLabel
    } 其他的 {部分。类名称 + = ' ' +配置。collapsedClass;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
}();

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

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

//使用某个类折叠和展开页面的部分
//作者克里斯蒂安·海勒曼,必威体育下载07/01/08
(函数(){/ /配置,在这里更改CSS类名和标签
  var配置= {indicatorClass: 可折叠的,collapsedClass: “崩溃”,collapseLabel: “崩溃”,expandLabel: “扩大”
  }var部分=文档。getElementsByTagName(“div”);
  (var=0,j=部分。长度;<j;+ +){
    如果(部分(].类名称.indexOf(配置。indicatorClass)! = = -1){部分(].类名称 + = ' ' +配置。collapsedClass;
      var=文档。createElement(“p”);
      vartriggerLink=文档。createElement(“一个”);triggerLink。setAttribute(“href”,“#”);triggerLink。onclick =toggleSection;triggerLink。列表末尾(文档。createTextNode(配置。expandLabel));段落。列表末尾(triggerLink);部分(].parentNode.方法(,部分(]);
    }
  }
  函数toggleSection(){
    var部分= .parentNode.nextSibling;
    如果(部分。类名称.indexOf(配置。collapsedClass)! = = -1){部分。类名称 =部分。类名称.取代(' ' +配置。collapsedClass,'');
      .写上。.nodeValue =配置。collapseLabel
    } 其他的 {部分。类名称 + = ' ' +配置。collapsedClass;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
})();

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