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

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

“代码”类别的存档

使用Tutorialbuilder从源注释生成教程

星期二,5月13日,2008

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

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

如果你去查一下教程建造者你会看到我用PHP脚本。它为您执行以下操作:

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

换言之,它转弯此源脚本像这样的教程使用模板和一些CSS(大部分取自悠悠

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

教程建造者授权给BSD,所以你自己动手吧。

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

星期四,2月7日,2008

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

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

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

折叠器= 函数){
  var=文件。getElementsByTagName“div”);
  对于var=0;&书信电报;秒。长度;++){
    如果[].类名.索引“可折叠”)! = = -){
      varp=文件。创建元素“P”);
      var=文件。创建元素“一个”);一个。设置属性“href”,“#”);一个。点击 = 函数){
        var证券交易委员会= .返回节点.下一步;
        如果秒。风格.显示 = = “没有”){秒。风格.显示 = “块”;
          .写上。.nodeValue = “崩溃”
        } 其他的 {秒。风格.显示 = “没有”;
          .写上。.nodeValue = “展开”
        }
        返回 ;
      };一个。附属儿童文件。创建节点“展开”));P.附属儿童);[].风格.显示 = “没有”;[].返回节点.方法p,[]);
    }
  }
});

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

步骤1:去掉外观和感觉

首先要做的不是在javascript中操作样式集合,而是将外观和感觉保留到它所属的位置:CSS.这允许轻松地剥皮和更改隐藏部分的方式,而无需在JavaScript中进行修改。我们可以通过分配CSS类并将其移除:

折叠器= 函数){
  var=文件。getElementsByTagName“div”);
  对于var=0;<秒。长度;++){
    如果[].类名.索引“可折叠”)! = = -){[].类名 += ' ' + “崩溃”;
      varp=文件。创建元素“P”);
      var=文件。创建元素“一个”);一个。设置属性“href”,“#”);一个。点击 = 函数){
        var证券交易委员会= .返回节点.下一步;
        如果秒。类名.索引“崩溃”)! = = -){秒。类名 =秒。类名.代替“崩溃”,);
          .写上。.nodeValue = “崩溃”
        } 其他的 {秒。类名 += ' ' + “崩溃”;
          .写上。.nodeValue = “展开”
        }
        返回 ;
      }一个。附属儿童文件。创建节点“展开”));P.附属儿童);[].返回节点.方法p,[]);
    }
  }
});

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

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

折叠器= 函数){
  var=文件。getElementsByTagName“div”);
  对于var=0,j=秒。长度;<j;++){
    如果[].类名.索引“可折叠”)! = = -){[].类名 += ' ' + “崩溃”;
      varp=文件。创建元素“P”);
      var=文件。创建元素“一个”);一个。设置属性“href”,“#”);一个。点击 =切换;一个。附属儿童文件。创建节点“展开”));P.附属儿童);[].返回节点.方法p,[]);
    }
  }
  函数切换){
    var证券交易委员会= .返回节点.下一步;
    如果秒。类名.索引“崩溃”)! = = -){秒。类名 =秒。类名.代替“崩溃”,);
      .写上。.nodeValue = “崩溃”
    } 其他的 {秒。类名 += ' ' + “崩溃”;
      .写上。.nodeValue = “展开”
    }
    返回 ;
  }
});

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

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

折叠器= 函数){
  var配置= {indicatorClass: “可折叠”,塌陷阶级: “崩溃”,塌陷: “崩溃”,expandLabel: “展开”
  }
  var=文件。getElementsByTagName“div”);
  对于var=0,j=秒。长度;<j;++){
    如果[].类名.索引配置。indicatorClass)! = = -){[].类名 += ' ' +配置。塌陷阶级;
      varp=文件。创建元素“P”);
      var=文件。创建元素“一个”);一个。设置属性“href”,“#”);一个。点击 =切换;一个。附属儿童文件。创建节点配置。expandLabel));P.附属儿童);[].返回节点.方法p,[]);
    }
  }
  函数切换){
    var证券交易委员会= .返回节点.下一步;
    如果秒。类名.索引配置。塌陷阶级)! = = -){秒。类名 =秒。类名.代替' ' +配置。塌陷阶级,);
      .写上。.nodeValue =配置。塌陷
    } 其他的 {秒。类名 += ' ' +配置。塌陷阶级;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
});

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

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

折叠器= 函数){
  var配置= {indicatorClass: “可折叠”,塌陷阶级: “崩溃”,塌陷: “崩溃”,expandLabel: “展开”
  }
  var部分=文件。getElementsByTagName“div”);
  对于var=0,j=部分。长度;<j;++){
    如果部分[].类名.索引配置。indicatorClass) != -){部分[].类名 += ' ' +配置。塌陷阶级;
      var=文件。创建元素“P”);
      var触发=文件。创建元素“一个”);触发。设置属性“href”,“#”);触发。点击 =关节切除术;触发。附属儿童文件。创建节点配置。expandLabel));段落。附属儿童触发);部分[].返回节点.方法,部分[]);
    }
  }
  函数关节切除术){
    var部分= .返回节点.下一步;
    如果部分。类名.索引配置。塌陷阶级) != -){部分。类名 =部分。类名.代替' ' +配置。塌陷阶级,);
      .写上。.nodeValue =配置。塌陷
    } 其他的 {部分。类名 += ' ' +配置。塌陷阶级;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
});

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

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

//折叠并展开具有特定类的页的节
//作者:Christian 必威体育下载Heilmann,07/01/08
函数){//配置,在此处更改CSS类名和标签
  var配置= {indicatorClass: “可折叠”,塌陷阶级: “崩溃”,塌陷: “崩溃”,expandLabel: “展开”
  }var部分=文件。getElementsByTagName“div”);
  对于var=0,j=部分。长度;<j;++){
    如果部分[].类名.索引配置。indicatorClass)! = = -){部分[].类名 += ' ' +配置。塌陷阶级;
      var=文件。创建元素“P”);
      var触发链路=文件。创建元素“一个”);triggerLink。设置属性“href”,“#”);triggerLink。点击 =关节切除术;triggerLink。附属儿童文件。创建节点配置。expandLabel));段落。附属儿童触发链路);部分[].返回节点.方法,部分[]);
    }
  }
  函数关节切除术){
    var部分= .返回节点.下一步;
    如果部分。类名.索引配置。塌陷阶级)! = = -){部分。类名 =部分。类名.代替' ' +配置。塌陷阶级,);
      .写上。.nodeValue =配置。塌陷
    } 其他的 {部分。类名 += ' ' +配置。塌陷阶级;
      .写上。.nodeValue =配置。expandLabel
    }
    返回 ;
  }
}));

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

对于“普通开发者”来说,javascript快捷方式符号不应该是黑色魔法。

星期二,11月27日,2007

当发布有关JavaScript开发的文章时,您会遇到许多由发布者和编辑器设置的规则。这是一件很好的事情,因为它让我们的作者保持警觉,让我们更加了解成功出版的真正意义。然而,它也可能非常烦人,尤其是当老一套的成语死板的时候。其中之一是“普通的开发人员”不太了解JavaScript快捷符号。

现在,如果你是“普通开发者”,请给我5分钟的时间来完成以下任务:您将了解更多的代码,并且花费更少的时间编写自己的脚本。

数组快捷符号-它是一个时髦的方

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

var链接= 新的 数组);链接[0] = “http://cuteoverload.com”;链接[] = 'http://icanhascheezburger.com';链接[] = 'http://pencilsatdawn.wordpress.com';链接[] = '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',
  [一百,二百,二十,“福”],
  'http://pencilsatdawn.wordpress.com',
  'http://apelad.blogspot.com' //<--最后一个,禁止逗号!
];

在那张纸条上,还有一个技巧:向数组中添加一个新项,您可以使用push()方法或使用长度财产:

链接。'http://dailyppy.com');链接[链接。长度] = 'http://bigeydeer.wordpress.com';

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

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

var链接= 新的 数组);链接[“可爱超载”] = “http://cuteoverload.com”;链接[“我可以吃奶酪汉堡包”] = 'http://icanhascheezburger.com';链接[铅笔在黎明的] = 'http://pencilsatdawn.wordpress.com';链接[“Hobotopia”] = 'http://apelad.blogspot.com';

这是最高程度的背叛。这是一个令人困惑的JavaScript特性,因为您在这里创建的不是真正的数组,但一个对象。想要证据?做一个警报(链接类型)或者尝试警报(链接〔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' / / <——再一次,没有逗号!
}

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

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

您可以使用对象属性当他们没有任何空间的时候对象[属性]当他们有空间的时候。例如:

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

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

可以显著缩短简单if语句。简单来说,我指的是一个if语句,它指定如下两个值之一:

  var裕桂;
  如果城市= = “伦敦”){裕桂= “克里斯”;
  } 其他的 {裕桂= “埃里克”;
  };

再一次,那里有很多重复。三元符号解决了这个问题:

var裕桂=城市= = “伦敦” 吗? “克里斯” : “埃里克”;

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

var裕桂= 城市= = “伦敦”) 吗? “克里斯” : “埃里克”;

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

然后你用问号问这个问题是否正确。冒号左边的选项是满足条件时问题的答案,而冒号右边的选项是不满足条件时问题的答案。任何可能是对或错的条件都可以放在括号内。

var方向= X<最大值) 吗? “左” : “对”;

使用默认运算符提供回退选项

我最不想谈的是双管()默认运算符。当您想要确保某些东西被设置为默认值时,这个非常有用。下面的结构不应该再出现了:

  var部分=文件。GETeleMyByID“特殊”);
  如果!部分){部分=文件。GETeleMyByID“主要”);
  }

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

  var部分=文件。GETeleMyByID“特殊”) γ文件。GETeleMyByID“主要”);

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

谢谢你的时间!

我希望这有助于“普通的开发人员”理解如何在不降低可读性的情况下缩短JS。如果你想要更多关于这些商品的详细信息,看看道格拉斯·克罗克福德关于这个问题的文章: