document.querySelector抽象

Question

I always found a pain to write let btn = document.querySelector('.btn');

So I was playing with javascript and thought about doing writing a function for a sugar syntax, I came up with:

function dq(selector) {
  return document.querySelector(selector);
}

let h1 = dq('h1');

h1.onclick = () => {
  console.log('yey');
};

So, my question is: are there any downsides of doing that in my code?

Answer 1

What are you essentially doing is what code minifiers do, just manually - obfuscating the code a little bit.

Your code is shorter, but harder to read. Also, it really only works for document.querySelector , not for example for document.body.querySelector or any other element's querySelector method.

Instead, create a code snippet/template in your preferred IDE. Code snippets are designed to do exactly what you want: less writing.