日期:2014-05-16  浏览次数:20304 次

[Js++开发历程] 巧妙使用querySelector实现类似JQuery.is函数

?

? is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

它产用是Sizzle技术。

? 那我们如何使用querySelector模仿呢?

? 由于querySelector只能查找dom以下的DOM,所以我考虑到将采用dom的父dom来使用querySelector

? 由于querySelector无法查找精确子DOM(它将会查找其所有的子孙DOM),而且,要查找的dom可能会有很多兄弟

? 所以要重新定位到要查找的dom就有困难了,这时,我又想到id,由于在HTML中我们会规范,界面中需要唯一的ID

? 有了以上的条件,JQuery.is的模拟就有可能了,直接上代码

第一种方案:

?

var tagTokenRe = /^(#)?([\w\\-\\*]+)/;

function is(dom, selector) {
    var tokenMatch = selector.match(tagTokenRe);
    if (tokenMatch) {
        if (tokenMatch[1] == "#") {
            if (dom.id != tokenMatch[2]) {
                return false;
            }
        } else {
            if (dom.tagName.toLowerCase() != tokenMatch[2].toLowerCase()) {
                return false;
            }
        }
        selector = selector.replace(tokenMatch[0], "");
        if (!selector) return true;
    }
    var pdom;
    if (dom && (pdom = dom['parentNode'])) {
        var id = dom.id;
        if (!id) {
            dom.id = id = "_J" + ++$.guid;
        }
        selector = '#' + id + selector;
        var ret = pdom.querySelector(selector);

        return ret !== null;
    }
    return false;
}

?以上缺点是要保障子dom的兄弟不能有相同的ID

?为了保障,可以将

?

var id = dom.id;
        if (!id) {
            dom.id = id = "_J" + ++$.guid;
        }
        selector = '#' + id + selector;
        var ret = pdom.querySelector(selector);

改为第二种方案

?

var id = dom.id;
       dom.id = '_JIS_'
        selector = '#' + dom.id + selector;
        var ret = pdom.querySelector(selector);
dom.id = id?id:null;

这样就可以保证ID的唯一性,但会降低性能。

?

?

?

?

第三种方案,采用存JS实现的如下:

?

var modeRe = /^(\s?[\/>+~]\s?|\s|$)/,
            tagTokenRe = /^(#)?([\w\\-\\*]+)/,
            tplRe = /\{(\d+)\}/g,
            cache = {};

        var matchers = [
            {re: /^\.([\w-]+)/, select: 'n = byClassName(n, " {1} ");if(n.length==0) return false;\n'},
            {re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/, select: 'n = byPseudo(n, "{1}", "{2}");if(n.length==0)return false;\n'},
            {re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/, select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");if(n.length==0) return false;\n'},
            {re: /^#([\w-]+)/, select: 'n = byId(n, "{1}");if(n.length==0) return false;\n'}
        ];
        var operators = {
            "=": function (a, v) {
                return a == v;
            }, "!=": function (a, v) {
                return a != v;
            }, "^=": function (a, v) {
                return a && a.substr(0, v.length) == v;
            }, "$=": function (a, v) {
                return a && a.substr(a.length - v.length) == v;
            }, "*=": function (a, v) {
                return a && a.indexOf(v) !== -1;
            }, "%=": function (a, v) {
                return (a % v) == 0;
            }, "|=": function (a, v) {
                return a && (a == v || a.substr(0, v.length + 1) == v + '-');
            }, "~=": function (a, v) {
                return a && (' ' + a + ' ').indexOf(' ' + v + ' ') != -1;
            }
        };

        var pseudos = {
            "contains": function (c, v) {
                var r = [], ri = -1;
                for (var i = 0, ci; ci = c[i]; i++) {
                    if ((ci.textContent || ci.innerText || '').indexOf(v) != -1) {
                        r[++ri] = ci;
                    }
                }
                return r;
            },
            "checked": function (c) {
                var r = [],