javascript - 将简单的 jQuery 重写为纯 JavaScript

Question

我正在构建一个 JavaScript 插件，它将连接到其他网站。

整个事情都是用纯 JS 编写的，但有一点我无法摆脱 jQuery:

var key = "some_key";
var selector = "#my_input, input[name=my_input], .someInputs";
jQuery(document).on('change', selector, function() {
    doSomething(key, this.value);
});

我想避免使用 jQuery 的原因是我希望这个 JS 能够包含在广泛的站点中，其中许多站点都没有 jQuery。有些已经安装了其他框架，例如 Mootools，有些则安装了不支持 .on() 的旧版本 jQuery，等等。

那，我理想地试图保持它非常轻量级，所以仅仅为了这个小任务添加 jQuery 似乎有点过多。

Answer 1

这里有一些 future 派的 JavaScript 可以做同样的事情:

var key = "some_key";
var selector = "#my_input, input[name=my_input], .someInputs";

document.addEventListener('change', function (e) {
    if (e.target.matches(selector)) {
        doSomething(key, e.target.value);
    }
});

但是，several browsers only support it with a prefix ，所以它会更接近这个:

var matches = (function () {
    var names = ['matches', 'matchesSelector', 'mozMatchesSelector', 'webkitMatchesSelector', 'msMatchesSelector'];

    for (var i = 0; i < names.length; i++) {
        var name = names[i];

        if (name in HTMLElement.prototype) {
            return HTMLElement.prototype[name];
        }
    }

    return null;
})();

var key = "some_key";
var selector = "#my_input, input[name=my_input], .someInputs";

document.addEventListener('change', function (e) {
    if (matches.call(e.target, selector)) {
        doSomething(key, e.target.value);
    }
});

假设选择器不是动态的并且您需要委派，您仍然可以进行详细的手动检查:

var key = "some_key";

document.addEventListener('change', function (e) {
    var target = e.target;

    if (target.id === 'my_input' ||
            target.nodeName === 'INPUT' && target.name === 'my_input' ||
            (' ' + target.className + ' ').indexOf(' someInputs ') !== -1) {
        doSomething(key, target.value);
    }
}, false);

作为@T.J. Crowder 指出，虽然这适用于输入元素，但在许多情况下您需要检查元素的父元素。这里有一些更 future 派的 JavaScript 来完成这个任务:

function* ascend(element) {
    do {
        yield element;
    } while ((element = element.parentNode));
}

var key = "some_key";
var selector = "#my_input, input[name=my_input], .someInputs";

document.addEventListener('change', function (e) {
    var match = Array.from(ascend(e.target)).find(x => x.matches(selector));

    if (match) {
        doSomething(key, match.value);
    }
});

如果您将 Firefox Nightly 和 Chrome 放在一起，这将在该浏览器中运行。我们没有，但请随意填充 Array.prototype.find!