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

贴上“样式”标签的帖子

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

星期二,11月27日,二千零七

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

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

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

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

var链接= 新的 数组(;链接(] = “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” // <——最后一个,禁止逗号!
];

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

链接。(“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部分=文件。GETeleMyByID(“特殊”;
  如果(!部分{部分=文件。GETeleMyByID(“主要”;
  }

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

  var部分=文件。GETeleMyByID(“特殊” | |文件。GETeleMyByID(“主要”;

如果第一个没有定义,第二个被指定为节的值。

谢谢你的时间!

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