Question

如果我的js文件中有以下几行代码的多个实例：

document.querySelector('#IdName').play(); 
document.querySelector('#IdName').pause();

创建一个函数并将IdName传递给它是一个好主意（IdName会在代码的各个部分发生变化）吗？我知道它的作用，但我真的很好奇，如果在文件中多次调用document.querySelector( )或将其放在一个我只调用它两次以执行{{1}的函数中是一个好习惯}和play行动。

Answer 1

如果您经常需要相同的元素，请更改函数以获取DOM节点，并将元素存储在变量中

function doStuff(elem) {
    elem.play();
}

function stopStuff(elem) {
    elem.pause();
}

var element = document.querySelector('#IdName');

doStuff( element );

// later

stopStuff( element );

这样你只需要获得一次元素，并避免不必要的DOM查找

Answer 2

最好的方法是将该查询缓存在变量中，这样您每次都不需要搜索DOM。

对于ID选择器，此时节省的时间可能很少，但对于更复杂的集合可以提供帮助

var $el = document.querySelector('#IdName');
$el.play();
$el.pause();

Answer 3

编写可重用的代码是一种好习惯，因此在这种情况下，函数是更好的实践。如果该函数只包含1行代码并且您多次调用它，那么它仍然是可取的，因为如果您决定更新该行代码或添加更多代码，那么它是集中的，您只能在一个地方进行更改

就实际执行而言，这些是相同的：

document.querySelector('#IdName1').play(); 
document.querySelector('#IdName1').pause();
document.querySelector('#IdName2').play(); 
document.querySelector('#IdName2').pause();
document.querySelector('#IdName3').play(); 
document.querySelector('#IdName3').pause();

VS

playpause("#IdName1");
playpause("#IdName2");
playpause("#IdName3");

function playpause(idname){
  document.querySelector(idname).play(); 
  document.querySelector(idname).pause();
}

Answer 4

除了史蒂夫的答案之外，还要注意如果你连续两次使用同一个：

document.querySelector('#IdName').play(); 
document.querySelector('#IdName').pause();

那么这是一个更好的做法：

var thing_with_play_and_pause = document.querySelector('#IdName');
thing_with_play_and_pause.play();
thing_with_play_and_pause.pause();

这减少了您必须进行的查询次数。一些IDE（例如PyCharm）会因为效率低而抱怨。

好的，调用document.querySelector（）一堆

4 个答案: