JavaScript 中的 HTML5 拖放事件

Question

4

我在这里找到了一个有关使用Javascript的HTML拖放功能的小教程：

问题是，我现在需要遵循公司内部的文档编写标准。

对于Javascript来说，其中之一就是始终使用对象表示法来编写函数。

例如：

var myFunction = function() {}

替代

function myFunction() {}

在本教程中，HTML5拖放事件是通过addEventHandler()函数添加的。这需要使用普通符号表示法，因为如果使用对象符号表示法，addEventHandler()函数会因某种原因而出错。

我曾试着将所有内容都重写成如下形式，没有使用addEventHandler:

myElement.dragstart = function(e) {}

但是所有这些都没有起作用。然而，使用normal符号加上addEventHandler，一切都能正常工作。我只想确认一下：我有没有忽略什么或者这应该可以工作吗？我的一部分怀疑这只是不正确地支持了，你需要使用addEventHandler。这是真的吗？

- KdgDev

6

你们内部的限制绝对是非常愚蠢的。做出这种决定的人是个白痴。 - Amy B

“Trips over”有点含糊不清……你在JS控制台中是否收到了错误消息？ - Jim Blackler

看起来 var myFunction = function() { ... }; 会让调试变得困难。（堆栈跟踪中没有函数名称） - icktoofay

2个回答

4

第一点：这是一个愚蠢的规定。有两种命名函数的方式，忽略其中一种方式来指定一种风格是相当愚蠢的，我认为。

你的问题是，我想，你在调用addEventHandler时，函数还没有被定义。这是因为有一种叫做“提升”的东西。在这个过程中，使用function myFunction() {}语法命名的函数会被“提升”到函数的顶部。所以如果你在函数的任何地方调用它们，函数都会起作用。例如，这个会起作用：

el.addEventListener('click', foo);
function foo() {}

您组织中使用的函数名称不会被提升，但变量声明会被提升。然而，在达到代码行之前，变量的值不会被设置。因此，以下代码将无法正常工作：

el.addEventListener('click', foo);
var foo = function() {};

最简单的方法是将所有函数定义移到作用域顶部，除非有很好的理由需要稍后定义它们。因此，以下代码可以正常工作：

var foo = function() {};
el.addEventListener('click', foo);

- lonesomeday

@Matt 我已经澄清了...请看以“Functions named”开头的那一段。 - lonesomeday

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Ball · Accepted Answer

设置dragstart属性与使用addEventHandler('dragstart', ...)不仅仅是符号的问题。你可以并且应该坚持使用addEventHandler。然而，使用这种“样式”也没有问题：

var myFunction = function() {}

myElement.addEventListener('dragstart', myFunction, ...);

好的，这并不是直接回答问题，但我觉得在这种情况下需要解决这个问题。

写作

var myFunction = function() {}

替代

function myFunction() {}

并不是任何形式的“对象符号表示法”。第一个是函数表达式，因为它是AssignmentExpression的一部分。第二个是函数声明。有什么区别？kangax 很好地解释了这一点：

首先，函数声明在解析和评估其他表达式之前进行。即使声明在源中最后位置，它也会被优先于作用域中包含的任何其他表达式进行评估。
...
函数声明的另一个重要特点是，在不同的环境中，有条件地声明它们是非标准化的，并且有所不同。您永远不应该依赖于有条件地声明函数，而应改用函数表达式。

制定JavaScript代码标准的人真正理解微妙的差别吗？