Question

我现在开始越来越多地使用JavaScript了，尽管我还在学习。话虽如此，我想检查我是否遵循了最佳实践＆＃34;最佳实践＆＃34;在构建基本功能时。

当我查看其他JavaSCript代码时，我经常会以不同的方式构建函数。当然，这取决于函数的上下文。

以下4个示例函数中哪些函数表现最佳？什么是最佳做法？

我经常使用前3种功能布局的混合物，而有时候我会使用第4种功能布局。

我刚刚使用基本点击功能作为示例，但我想更广泛地回答何时使用这些功能语法以及原因。

1

var myDiv = document.getElementById('#myDiv');

myDiv.addEventListener('click', function () {
// do something 
// all future variables are stored locally within the click function
}

2

document.getElementById('#myDiv').addEventListener('click', function () {
// do something 
// all future variables are stored locally within the click function
}

3

function doSomething() {
// do something 
// all future variables are stored locally within the click function
}

document.getElementById('#myDiv').addEventListener('click', function () {
doSomething();
}

4

function doSomething() {
   var myDiv = document.getElementById('#myDiv');

   myDiv.addEventListener('click', function () {
   // do something 
   // all future variables are stored locally within the click function
   }
 }

new doSomething();

Answer 1

一个好主意，如果你要重复使用myDiv，因为它会缓存选择器
＃1的对应物，如果您不打算再次选择#myDiv，请使用此
如果您打算多次调用该功能，那么
我只说当你想在某个时候使用click事件时，只使用那个，一个简单的函数声明和执行后就没有用了

Answer 2

示例1和2“相同”。它只是品味和喜好的问题。在第一种情况下，你正在保存（想想像“relabel”这样的东西）对“myDiv”中对象的引用，在另一种情况下你直接调用它...对于编译器它将是相同的。

使用示例3，您正在创建一个调用函数的函数，但由于JavaScript是一种不必要的函数式语言，您可以将函数传递给另一个函数...像这样：

示例3.1：

var doSomething = function() {
// do something 
// all future variables are stored locally within the click function
};    
document.getElementById('#myDiv').addEventListener('click', doSomething);

是的，addEventListener是一个在第二个参数:)中接收函数的函数。

在示例4中，您正在做一些与众不同的事情。当你调用“new doSomething（）”时，你正在实例化一个新对象。 ¿但为什么它有效？好吧，Javascript将在你的函数/对象中运行代码，这就是它的工作原理。但是你实际上是在实例化一个新对象（但你不会把它保存在任何地方，所以它会被垃圾收集......对象，而不是你在其中做的事情，因为它们在div的范围内）

我发现所有例子都是正确的，但我不喜欢4.至少在这种情况下，只需调用“doSomething（）”就可以更简单，而不需要“新”。

如何构建基本的JavaScript函数

2 个答案: