可以调用 document.querySelector( ) 一堆

Question

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

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

创建一个函数并向其传递IdName（IdName 将在代码的各个部分更改）是一个好主意吗？我知道它的作用，但我真的很好奇在文件中多次调用document.querySelector( )或将其放入我只调用它两次以执行play和pause操作的函数中是否是一种好习惯。

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();

与

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）会抱怨，如果你不这样做，因为它效率较低。