大家好！

昨天我們建立了 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');

| # | jQuery | Felix | Winner |
| --- | --- | --- |
| 01 | 0.48511 ms | 0.53809 ms | jQuery |
| 02 | 0.33594 ms | 0.34668 ms | jQuery |
| 03 | 0.46191 ms | 0.25488 ms | Felix |
| 04 | 0.43604 ms | 0.16406 ms | Felix |
| 05 | 0.51001 ms | 0.24072 ms | Felix |
| 06 | 0.34180 ms | 0.15820 ms | Felix |
| 07 | 0.37964 ms | 0.20410 ms | Felix |
| 08 | 0.37598 ms | 0.17725 ms | Felix |
| 09 | 0.42871 ms | 0.37402 ms | Felix |
| 10 | 0.45386 ms | 0.24194 ms | Felix |
| Total | 4.20900 ms | 2.69994 ms | Felix |

結果是 Felix 成功勝出！

解析 HTML 字串需要一定時間（Element.innerHTML 或 Element.insertAdjacentHTML），因此執行時間就會比較長；然而，使用 CSS 選擇器只要操作正規表示式，耗費的時間自然也會較少。

差不多也到尾聲了，接下來我們要介紹的是函式庫的靜態方法。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！