必威体育下载基督教Heilmann

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

“代码”类别的存档

使用Tutorialbuilder从源注释生成教程

周二,5月13日,2008

我花了太多的时间让脚本的解释教程与代码的更改保持同步。这就是我写a的原因PHP解决方案为我做这项工作。多年来,我发现解释剧本的最好方法是:

  • 展示一个例子
  • 显示完整的源代码
  • 逐位显示源代码,然后解释每个部分的功能

如果你去看看Tutorialbuilder你会看到我用a实现了大部分的自动化PHP脚本。它为您做了以下工作:

  • 它从脚本源代码中的注释生成教程部分。
  • 它将源代码转换为可显示的代码(编码它,添加行号,允许行被高亮显示)
  • 它使用正确的文件名创建脚本的可下载版本
  • 它创建脚本的可执行版本,而不需要使用脚本元素链接注释。
  • 它可以缩小脚本(删除所有空格以减少文件大小)

换句话说,结果这个源脚本像这样的教程使用一个模板和一些CSS(大部分取自YUI)。

它是一个替代JSDoc而是更容易使用和解释代码的功能,而不是JS代码本身的语法。

Tutorialbuilder许可和BSD,所以为了你自己疯狂的使用它。

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

周四,2月7日,2008

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

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

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

崩溃= 函数(){
  var=文档。getElementsByTagName(“div”);
  (var=0;<秒。长度;++){
    如果((]类名称indexOf(可折叠的)! = = -1){
      varp=文档。createElement(“p”);
      var一个=文档。createElement(“一个”);一个。setAttribute(“href”,“#”);一个。onclick = 函数(){
        var证券交易委员会= parentNodenextSibling;
        如果(秒。风格显示 = = = “没有”){秒。风格显示 = “块”;
          写上。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证券交易委员会= parentNodenextSibling;
        如果(秒。类名称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证券交易委员会= parentNodenextSibling;
    如果(秒。类名称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证券交易委员会= parentNodenextSibling;
    如果(秒。类名称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部分= parentNodenextSibling;
    如果(部分。类名称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部分= parentNodenextSibling;
    如果(部分。类名称indexOf(配置。collapsedClass)! = = -1){部分。类名称 =部分。类名称取代(' ' +配置。collapsedClass,'');
      写上。nodeValue =配置。collapseLabel
    } 其他的 {部分。类名称 + = ' ' +配置。collapsedClass;
      写上。nodeValue =配置。expandLabel
    }
    返回 ;
  }
})();

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

JavaScript的快捷符号对“一般开发人员”来说不应该是什么魔法

周二,11月27日,2007

在发布关于JavaScript开发的文章时,您会遇到发布者和编辑器设置的许多规则。这是一件伟大的事情,因为它让我们作家保持警觉,让我们更了解出版到底有多成功。然而,它也可能非常烦人,尤其是当旧的习语还在使用的时候。其中之一是“一般开发人员”不太理解JavaScript的快捷符号。

现在,如果你是“一般的开发者”,请给我5分钟时间来完成以下内容,您将会理解更多的代码,并且花费更少的时间编写自己的脚本。

数组快捷符号-它是髋关节是正方形

我遇到的第一个问题是数组。这些在JavaScript中非常有用,而且无处不在,但我发现有些人写的东西很复杂,比如:

var链接=  数组();链接(0] = “http://cuteoverload.com”;链接(1] = “http://icanhascheezburger.com”;链接(2] = “http://pencilsatdawn.wordpress.com”;链接(3.] = “http://apelad.blogspot.com”;
/ /……令人作呕……

这很复杂(必须为每个项重复数组名),而且维护起来也很棘手。当您更改订单(假定订单很重要)时,您需要更改编号,了。这是不必要的,因为编号是自动为您完成的。你所需要做的就是使用方括号:

var链接= (
  “http://cuteoverload.com”,
  “http://icanhascheezburger.com”,
  “http://pencilsatdawn.wordpress.com”,
  “http://apelad.blogspot.com” // <——最后一个,没有逗号!
];

从视觉上看,这更明显,了。缩进可以很容易地查看数组的开始和结束位置。更少的线路噪音。

注意你需要用逗号分隔每一项,但是要确保最后一项后面没有逗号。你甚至可以这样嵌套数组:

var链接= (
  “http://cuteoverload.com”,
  “http://icanhascheezburger.com”,
  (One hundred.,200,20.,“foo”],
  “http://pencilsatdawn.wordpress.com”,
  “http://apelad.blogspot.com” // <——最后一个,没有逗号!
];

请注意,这里有另一个技巧:要向数组添加新项,您可以使用push ()方法或使用长度属性:

链接。(“http://dailypuppy.com”);链接(链接。长度] = “http://bigeyedeer.wordpress.com”;

关联数组,我的天啊!矮种马!

一个一直存在的误区是JavaScript有一个神奇的东西,叫做关联数组。这些不仅可以给物品编号,还可以给它们命名!你可以找到这样的例子:

var链接=  数组();链接(“可爱的超载”] = “http://cuteoverload.com”;链接("我可以吃芝士汉堡"] = “http://icanhascheezburger.com”;链接(铅笔在黎明的] = “http://pencilsatdawn.wordpress.com”;链接(“Hobotopia”] = “http://apelad.blogspot.com”;

这是最高程度的背叛。这是一个令人困惑的JavaScript特性,因为你在这里创建的不是一个数组,但一个对象。想要证据?——做一个警报(typeof链接)或者尝试警报(链接[1])

对象快捷(文字)表示法-获得花括号。

所谓关联数组实际上是对象,这意味着您还会发现其他脚本,采取了前面的例子严重,并使用以下替代:

var链接=  对象();链接(“可爱的超载”] = “http://cuteoverload.com”;链接("我可以吃芝士汉堡"] = “http://icanhascheezburger.com”;链接(铅笔在黎明的] = “http://pencilsatdawn.wordpress.com”;链接(“Hobotopia”] = “http://apelad.blogspot.com”;

我们有太多的重复。为对象,你有对象文字符号作为快捷方式,基本上是使用大括号:

var链接= {
  “可爱的超载” : “http://cuteoverload.com”,
  "我可以吃芝士汉堡" : “http://icanhascheezburger.com”,
  铅笔在黎明的 : “http://pencilsatdawn.wordpress.com”,
  “Hobotopia” : “http://apelad.blogspot.com” / / <——再一次,没有逗号!
}

分号被替换成commata逗号(快乐,斯图尔特?)(除了最后一个你需要忽略的)等号变成冒号。如果属性(冒号左边的东西)里面没有空格,你甚至可以去掉引号:

var克里斯= {头发: “红色”,年龄: 32,城市: “伦敦”
}

您可以通过以下方式访问属性object.property当他们没有任何空间的时候对象(财产)当它们有空间的时候。例如:

var链接= {
  “可爱的超载” : “http://cuteoverload.com”,
  "我可以吃芝士汉堡" : “http://icanhascheezburger.com”,
  铅笔在黎明的 : “http://pencilsatdawn.wordpress.com”,
  “Hobotopia” : “http://apelad.blogspot.com” / / <——再一次,没有逗号!
};警报(链接("我可以吃芝士汉堡"]);警报(链接。Hobotopia);

简单的if-else语句——使用三元符号询问和定义

可以显著缩短简单if语句。简单来说,我的意思是一个if语句,它赋值如下两个值中的一个:

  varYUIguy;
  如果(城市= = = “伦敦”){YUIguy= “克里斯”;
  } 其他的 {YUIguy= “埃里克。”;
  };

再一次,有很多重复。三元表示法解决了这个问题:

varYUIguy=城市= = = “伦敦” 吗? “克里斯” : “埃里克。”;

这里有很多等号。也许加上括号会更清楚:

varYUIguy= (城市= = = “伦敦”) 吗? “克里斯” : “埃里克。”;

这是怎么回事?定义变量YUIguy给它赋值。然后你有一个声明,在这种情况下,变量的比较城市如果它等于这个字符串伦敦(===测试值和类型,比==)安全多了。

然后你可以用问号来问这个问题。冒号左边的选项是条件满足时的答案冒号右边的选项是条件不满足时的答案。任何可能为真或为假的条件都可以放在括号内。

var方向= (x<马克斯) 吗? “左” : “对”;

使用默认操作符提供回退选项

我想快速讨论的最后一件事是双管道(||)默认操作符。当您想要确保某些东西被设置为默认值时,这个非常有用。下面的结构不应该再出现了:

  var部分=文档。getElementById(“特殊”);
  如果(!部分){部分=文档。getElementById(“主要”);
  }

再一次,无用的重复,同样可以写成:

  var部分=文档。getElementById(“特殊”) | |文档。getElementById(“主要”);

如果第一个没有定义,第二个值作为值分配给section。

谢谢你的时间!

我希望这能帮助“一般的开发人员”理解如何在不降低可读性的情况下使JS变得更短。如果你想知道更多关于这些好东西的详细信息,看看道格拉斯·克罗克福德关于这个问题的文章: