javascript - 编写一个类似 jQuery 的 JS 元素选择器

Question

我正在尝试编写类似 jQuery 的元素选择函数，以缩短常规 JS 元素选择器。所以我写了这个函数:

function _(str){
    var s = str.trim();
    var x = s.charAt(0);
    if (s.length > 0) {
        if(x == "#") return document.getElementById(s.substring(1));
        else if(x == ".") return document.getElementsByClassName(s.substring(1));
        else if(x == "*") return document.getElementsByTagName(x);
        else return document.getElementsByTagName(s);
    } else {
        return;
    }
}

示例用法:_("#container")。这将返回一个带有 id="container" 的元素。到目前为止，这工作得很好。当我尝试将空格作为变量(即 _(""))或不存在的元素(即 _("someelement")) 或使用错误的选择器(即 _("%p"))。虽然其余代码仍然有效，但如果我尝试做类似的事情......

var e = _("$nonexist");
e.style.backgroundColor="yellow";

...然后在控制台中我收到以下红色错误消息:

TypeError: e.style is undefined
    e.style.backgroundColor="yellow";
----^

所以问题是:如何防止在参数中传递非法字符(如空格、$、@ 等...)？如果用户通过了它们 - 我只想返回一个空白结果，而不是在控制台中看到这些错误消息。

Answer 1

那么你的代码就坏了。你总是返回一些东西，但它可能是 undefined 如果你试图访问 undefined 的 style 属性，你会得到一个错误，因为它不存在。根据您要返回的类型，您应该修改最后一行 if case。您可以返回 ''、[]、undefined 等。

function _(str){
    var s = str.trim();
    var x = s.charAt(0);
    if (s.length > 0) {
        if(x == "#") return document.getElementById(s.substring(1));
        else if(x == ".") return document.getElementsByClassName(s.substring(1));
        else if(x == "*") return document.getElementsByTagName(x);
        else return [];
    } else {
        return;
    }
}