JS 20 - HTML 字串算什麽，教你用 CSS 选择器建立网页元素！

大家好！

昨天我们建立了 insert 方法，今天我们就要延伸它的用法。
我们进入今天的主题吧！

前言

$('<button>Submit</button>');
$('<button id="submit" type="submit" disabled>Submit</button>');

如果要使用 jQuery 来建立元素时，我们会使用第一行的方法。
但是，如果元素有很多属性的话，不就会像第二行的方法一样很冗长吗？
没错，接下来我们就要实作既省时又不冗长的静态方法。

实作

Felix.create = function (str, content) {
    /* 拆解 CSS 选择器 */
    var blank = str.split(/(?=[#.][\w-:]+)|(?=\[[a-z][\w-:]+(?:=".+")?\])/);
    /* 根据标签名或预设值建立元素 */
    var el = document.createElement(/^[\w-:]+$/.test(blank[0]) ? blank.shift() : 'div');
    blank.forEach((v) => {
        /* 解析拆解後的选择器 */
        var model = v.match(/#([\w-:]+)|\.([\w-:]+)|\[([a-z][\w-:]+)(?:="(.+)")?\]/);
        /* 识别解析後的选择器 */
        if (model[1]) el.id = model[1];
        else if (model[2]) el.classList.add(model[2]);
        else if (model[3]) el.setAttribute(model[3], model[4] || '');
    });
    if (content) {
        var type = content instanceof HTMLElement ? 'Element' : 'HTML';
        el['insertAdjacent' + type]('beforeend', content);
    }
    return el;
};

最後，再将昨天的 insert 改良一下：

Felix.prototype.insert = function (el, content, pos) {
    el = typeof el === 'string' ? Felix.create(el, content) : el;
    pos = /^(before|after)(begin|end)$/.test(pos) ? pos : 'beforeend';
    Felix.forEach(this, function () {
        this.insertAdjacentElement(pos, el);
    });
    return el;
};

使用方法请见下方的样本。

实测

我们来比较 jQuery 和 Felix 建立物件的效率吧！
先附上样本：

/* jQuery */
$('body').append('<button id="submit" type="submit" disabled>Submit</button>');

/* Felix */
Felix('body').insert('button#submit[type="submit"][disabled]', 'Submit');

结果是 Felix 成功胜出！

解析 HTML 字串需要一定时间（Element.innerHTML 或 Element.insertAdjacentHTML），因此执行时间就会比较长；然而，使用 CSS 选择器只要操作正规表示式，耗费的时间自然也会较少。

差不多也到尾声了，接下来我们要介绍的是函式库的静态方法。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！