这是正确的 JavaScript 语法吗?

Is this proper JavaScript syntax?

提问人:Jeff 提问时间:8/22/2009 最后编辑:Jeff 更新时间:8/22/2009 访问量:297

问:

星期六早上好,网络上最有帮助的在线社区!=)

我有几百行 JavaScript,我想重新格式化,以便我更容易阅读。我想在我浪费半天时间之前,我应该先在这里问我的问题。

我是 JavaScript 新手,想知道下面的语法是否正确?

我的原始代码是这样的:

function formfocus() {
    if(document.getElementById('inputida')) {
        document.getElementById('inputida').focus();
        document.getElementById('inputida').value = '';
    }
    else if(document.getElementById('inputidb')) {
        document.getElementById('inputidb').focus();
        document.getElementById('inputidb').value = '';
    }
}

function popitup(url, name, width, height) {
    newwindow = window.open(url, name, 'width=' + width + ',height=' + height + ',scrollbars=yes');

    if(window.focus) {
        newwindow.focus();
    }
    return false;
}

...我想将代码更改为此(注意间距):

function formfocus()
{
    if ( document.getElementById( 'inputida' ) )
    {
        document.getElementById( 'inputida' ).focus();
        document.getElementById( 'inputida' ).value = '';
    }
    else if ( document.getElementById( 'inputidb' ) )
    {
        document.getElementById( 'inputidb' ).focus();
        document.getElementById( 'inputidb' ).value = '';
    }
}

function popitup( url, name, width, height )
{
    newwindow = window.open( url, name, 'width=' + width + ', height=' + height + ', scrollbars=yes' );

    if ( window.focus )
    {
        newwindow.focus();
    }
    return false;
}

区别在于:

  1. AND 语句后面的间距'if''else if'
  2. 周围的间距parentheses
  3. 开场前的换行curly braces
JavaScript的

评论

0赞 Javier 8/22/2009
你知道“else”部分不仅永远不会被执行,而且它也会做同样的事情,对吧?
0赞 Jeff 8/22/2009
我刚刚修复了我的代码。“inputid”已更正。
1赞 Xiaofu 8/22/2009
我对答案的平静感到惊讶,但也许是因为它是 JavaScript,而不是像 C++ 这样的东西。对于程序员来说,格式/代码风格问题可能有点宗教问题,他们中的一些人宁愿挖出眼睛也不愿在新行上加上 {。虽然不是我。;)

答:

2赞 RichieHindle 8/22/2009 #1

是的,您的新语法是有效的,并且等同于旧语法。

除了非常晦涩难懂的情况外,JavaScript 代码中的换行符和空格会被忽略,因此您可以随心所欲地布局它。

但是旧语法是惯用的 JavaScript 的编写方式——一个有经验的 JavaScript 程序员看到你的新语法会觉得它看起来很奇怪。

评论

0赞 RichieHindle 8/22/2009
@Jeff: 8-)将其理解为“由经验丰富的 JavaScript 编码人员编写的 JavaScript”。这就像英语一样——以英语为母语的人有时会以听起来很奇怪的方式表达事物,让学习英语作为第二语言的人感到奇怪。
0赞 Jeff 8/22/2009
Gotchya,很有道理。=)
1赞 rahul 8/22/2009 #2

是的,它是有效的。

这增加了可读性。

但是在您的发布版本中,最好缩小您的 js 文件以减少带宽使用。

Jsmin 是一个 javascript minifer。

JSMin 是一个过滤器,它删除了 注释和不必要的空格 从 JavaScript 文件。它通常 将文件大小减半,从而 下载速度更快。它还鼓励 更具表现力的编程风格 因为它消除了下载 清洁、识字的成本 自我记录。

2赞 James Wiseman 8/22/2009 #3

尽量避免多次调用 document.getElementByID:

var objInputId = document.getElementById( 'inputid' );
objInputId.focus();
objInputId.value = "val";

评论

0赞 Jeff 8/22/2009
你能告诉我你的意思吗?您上面显示的示例是否替换了我的原始代码中的某些内容?如果是这样,是哪一行?非常感谢!
0赞 T.J. Crowder 8/22/2009
@Jeff:是的,该代码可以有效地替换整个函数主体。请参阅我的回答(目前在下面)了解完整的上下文。formfocus
0赞 Guffa 8/22/2009 #4

是的,Javascript 不是基于行的,并且不需要大多数间距。

你甚至可以像这样以荒谬的不可读的方式编写代码:

function formfocus(){if(document.getElementById(
'inputid')){document.getElementById('inputid').focus
();document.getElementById('inputid').value='';}else
if(document.getElementById('inputid')){document.
getElementById('inputid').focus();document.getElementById
('inputid').value='';}}function popitup(url,name,width,
height){newwindow=window.open(url,name,'width='+width+',
height='+height+',scrollbars=yes');if(window.focus
){newwindow.focus();}return false;}

或者这个:

function
formfocus
(
)
{
if
(
document
.
getElementById
(
'inputid'
)
)
{
document
.
getElementById
(
'inputid'
)
.
focus
(
)
;
document
.
getElementById
(
'inputid'
)
.
value
=
''
;
}
else
if
(
document
.
getElementById
(
'inputid'
)
)
{
document
.
getElementById
(
'inputid'
)
.focus
(
)
;
document
.
getElementById
(
'inputid'
)
.
value
=
''
;
}
}
function
popitup
(
url
,
name
,
width
,
height
)
{
newwindow
=
window
.
open
(
url
,
name
,
'width='
+
width
+
',height='
+
height
+
',scrollbars=yes'
)
;
if
(
window
.
focus
)
{
newwindow
.
focus
(
)
;
}
return
false
;
}

评论

0赞 bobince 8/22/2009
换行符在 JavaScript 中可能很重要,当您忘记分号时。显然,这不是可以依赖的东西......
0赞 Jeff 8/22/2009
是的,我读到了关于换行符的同样内容:en.wikipedia.org/wiki/......
0赞 T.J. Crowder 8/22/2009 #5

您的更改看起来有效,但在该代码中需要进行大量清理。

  • 正如 James Wiseman 所说,你要避免重复调用 document.getElementById,因为它效率低下且难以阅读。
  • 在 中,前两个语句是相同的;第二个是毫无意义的。formfocusif
  • 在 中,代码正在创建一个隐式全局变量,这是一件坏事。它需要一个 .popitupvar

因此:

function formfocus()
{
    var elm;

    elm = document.getElementById( 'inputid' );
    if ( elm )
    {
        elm.focus();
        elm.value = '';
    }
}

function popitup( url, name, width, height )
{
    var newwindow = window.open(
        url,
        name,
        'width=' + width + ', height=' + height + ', scrollbars=yes'
    );

    if ( window.focus )
    {
        newwindow.focus();
    }
    return false;
}

(有关隐式全局变量的详细信息,请参阅 blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html;我把它做成一个链接,因为它是我自己的博客 - 不是说那里有很多 - 我不想链接垃圾邮件。

评论

0赞 Jeff 8/22/2009
谢谢!=) 关于 formfocus 和冗余的 getElementById ...第二个 ELSE IF 的用途是使该函数可用于多个输入 ID。换句话说,我的网站上将有几个需要关注的表单,每个表单都使用不同的 ID。