必威体育下载基督教Heilmann

“语法”标签的文章

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变得更短。如果你想知道更多关于这些好东西的详细信息,看看道格拉斯·克罗克福德关于这个问题的文章:

将对象作为参数发送——好还是坏?

周三,11月7日,2007

我最近在函数和方法中不断看到的不同之处在于,人们似乎不再严格地期望某种形式的参数。如果你回顾几年,你可能会记得以下函数:


函数doLayerFloat (id、开始、结束、方向、速度、褪色,whatelse, Iforgot) {

}

这一点,至少对我来说是相当恼人的,因为我不善于记住需要发送参数的顺序PHP混乱可能)。我经常看到的另一个问题是如果你不想提供一些参数但最后一个参数你必须发送空字符串,甚至空值:


doLayerFloat (“myDIV”, 0, 30日空,空,真的,null, null) {

}

/ /或
doLayerFloat (“myDIV”, 0, 30日”、“,”、“,”){

}

这既令人困惑又令人费解。我见过的其他脚本通过使用arguments数组来解决这个问题,这至少允许发送灵活数量的参数。


函数doLayerFloat(id){
var args =参数;
for(var i = 1;我< args.length;我+ +){

}

}

然而,现在我最喜欢的是函数,它实际上需要一些定义的参数(或者一个)允许它是几个东西,并允许你发送一个对象作为属性:


函数doLayerFloat(id、道具){
var elm = id的类型!== ' string'?id: . getelementbyid (id);
for (var i in props){

}

}

这允许id为元素引用或字符串,并将对象作为第二个参数,在这个参数中,我可以以任何我喜欢的方式定义顺序和数量(提供方法,然后测试它们和它们的正确值):


doLayerFloat(“x”,{开始:20日结束:30,褪色:真正});
/ /或
doLayerFloat (myElm{褪色:真的,方向:“对”});

这还允许您在属性未设置时定义默认值,你能做的事PHP但不是JavaScript。在PHP,如此:


函数foo(酒吧= 2,巴兹美元=“foo”){
}

在JavaScript中,这是做不到的,但如果你使用一个对象,你可以预先定义如果属性没有设置:


函数doLayerFloat(id、道具){
var elm = id的类型!== ' string'?id: . getelementbyid (id);
道具=道具|| {};
props.start=props.start 100;
props.fade=props.fade假;
}

你同意吗?还是对象文字语法仍然太复杂?