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

Writing a jQuery-like JS element selector

本文关键字：jQuery JS 选择器 元素 一个      更新时间：2023-09-26

我正在尝试编写类似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";
----^

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

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

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;
    }
}
相关文章：