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，你会收到一个错误，因为它不存在。根据您要返回的类型，如果是大小写，则应修改最后一行。你可以返回＆＃39;＆＃39;，＃，，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;
    }
}

编写类似jQuery的JS元素选择器

1 个答案: