将简单的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,有些框架会有旧版本的jQuery,.on()不支持等等.

那,并且我理想地试图保持它非常轻量级,所以为这个小任务添加jQuery似乎过度.

Answer 1

这里有一些未来派的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);
    }
});

但是,有些浏览器只支持前缀,因此它更接近于此:

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);

正如@TJ Crowder指出的那样,尽管这适用于输入元素,但在许多情况下,您需要检查元素的父元素.这里有一些更具未来感的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!