你是否曾驚嘆於React的魔力？是否曾好奇Dojo是如何運(yùn)作的？是否曾對(duì)jQuery的巧妙操作感到好奇？在本教程中，我們將潛入幕後，嘗試構(gòu)建一個(gè)超簡(jiǎn)化的jQuery版本。

我們幾乎每天都在使用JavaScript庫(kù)。無(wú)論是實(shí)現(xiàn)算法、提供API抽像還是操作DOM，庫(kù)在大多數(shù)現(xiàn)代網(wǎng)站中都執(zhí)行許多功能。

在本教程中，我們將嘗試從頭開始構(gòu)建一個(gè)這樣的庫(kù)（當(dāng)然，這是一個(gè)簡(jiǎn)化的版本）。我們將創(chuàng)建一個(gè)用於DOM操作的庫(kù)，類似於jQuery。是的，這很有趣，但在你興奮之前，讓我澄清幾點(diǎn)：

• 這不會(huì)是一個(gè)功能齊全的庫(kù)。我們將編寫一套可靠的方法，但這並非完整的jQuery。我們將做的足夠多，讓你對(duì)構(gòu)建庫(kù)時(shí)會(huì)遇到的問(wèn)題類型有很好的了解。
• 我們?cè)谶@裡不會(huì)追求跨所有瀏覽器的完全兼容性。我們今天編寫的代碼應(yīng)該可以在Chrome、Firefox和Safari上運(yùn)行，但在IE等舊版瀏覽器上可能無(wú)法運(yùn)行。
• 我們不會(huì)涵蓋我們庫(kù)的每一個(gè)可能的用途。例如，我們的prepend方法只在你傳遞給它們我們的庫(kù)實(shí)例時(shí)才有效；它們不適用於原始DOM節(jié)點(diǎn)或節(jié)點(diǎn)列表。

1. 創(chuàng)建庫(kù)的框架

我們將從模塊本身開始。我們將使用ECMAScript模塊（ESM），這是一種在Web上導(dǎo)入和導(dǎo)出代碼的現(xiàn)代方法。

 export class Dome {
    constructor(selector) {

    }
}

如你所見，我們導(dǎo)出一個(gè)名為Dome的類，其構(gòu)造函數(shù)將接受一個(gè)參數(shù)，但它可以是多種類型。如果它是一個(gè)字符串，我們將假設(shè)它是一個(gè)CSS選擇器，但我們也可以接受單個(gè)DOM節(jié)點(diǎn)或document.querySelectorAll的結(jié)果來(lái)簡(jiǎn)化元素查找。如果它具有length屬性，我們將知道我們擁有一個(gè)節(jié)點(diǎn)列表。我們將把這些元素存儲(chǔ)在this.elements中， Dome對(duì)象可以包裝多個(gè)DOM元素，我們幾乎需要在每種方法中循環(huán)遍歷每個(gè)元素，因此這些實(shí)用程序?qū)⒎浅７奖恪?/p>

讓我們從一個(gè)map函數(shù)開始，它接受一個(gè)參數(shù)，一個(gè)回調(diào)函數(shù)。我們將循環(huán)遍歷數(shù)組中的項(xiàng)目，收集回調(diào)函數(shù)返回的內(nèi)容， Dome實(shí)例將接收兩個(gè)參數(shù)：當(dāng)前元素和索引號(hào)。

我們還需要一個(gè)forEach方法，默認(rèn)情況下，我們可以簡(jiǎn)單地將調(diào)用轉(zhuǎn)發(fā)到mapOne 。很容易看出這個(gè)函數(shù)的作用，但真正的問(wèn)題是，為什麼我們需要它？這需要一點(diǎn)你可能稱之為“庫(kù)理念”的東西。

簡(jiǎn)短的理念探討

如果構(gòu)建庫(kù)只是編寫代碼，那將不是一項(xiàng)太難的工作。但在從事這個(gè)項(xiàng)目時(shí)，我發(fā)現(xiàn)更難的部分是決定某些方法應(yīng)該如何工作。

很快，我們將構(gòu)建一個(gè)Dome對(duì)象，它包裝了多個(gè)DOM節(jié)點(diǎn)（ $("li").text() ），你將得到一個(gè)包含所有元素文本連接在一起的單個(gè)字符串。這有用嗎？我認(rèn)為沒有，但我不知道更好的返回值是什麼。

對(duì)於這個(gè)項(xiàng)目，我將把多個(gè)元素的文本作為數(shù)組返回，除非數(shù)組中只有一個(gè)項(xiàng)目；然後我們只返回文本字符串，而不是包含單個(gè)項(xiàng)目的數(shù)組。我認(rèn)為你最常獲取單個(gè)元素的文本，所以我們對(duì)此情況進(jìn)行了優(yōu)化。但是，如果你正在獲取多個(gè)元素的文本，我們將返回你可以使用的內(nèi)容。

返回編碼

因此， mapOne將首先調(diào)用map ，然後返回?cái)?shù)組或數(shù)組中的單個(gè)項(xiàng)目。如果你仍然不確定這如何有用，請(qǐng)繼續(xù)關(guān)注：你將看到！

 mapOne(callback) {
    const m = this.map(callback);
    return m.length > 1 ? m : m[0];
};

4. 使用文本和HTML

接下來(lái)，讓我們添加text方法來(lái)查看我們是在設(shè)置還是獲取。請(qǐng)注意，這只是遍曆元素並設(shè)置它們的文本。如果我們正在獲取，我們將返回元素的mapOne方法：如果我們正在處理多個(gè)元素，這將返回一個(gè)數(shù)組；否則，它將只是一個(gè)字符串。

html方法與text方法幾乎相同，只是它將使用innerHTML 。

 html(html) {
    if (typeof html !== "undefined") {
        this.forEach(function (el) {
            el.innerHTML = html;
        });
        return this;
    } else {
        return this.mapOne(function (el) {
            return el.innerHTML;
        });
    }
}

就像我說(shuō)的：幾乎相同。

5. 操作類

接下來(lái)，我們要能夠添加和刪除類，所以讓我們編寫addClass和removeClass方法。

我們的addClass方法將在每個(gè)元素上使用classList.add方法。當(dāng)傳遞字符串時(shí)，只添加該類，當(dāng)傳遞數(shù)組時(shí)，我們將遍歷數(shù)組並添加其中包含的所有類。

 addClass(classes) {
    return this.forEach(function (el) {
        if (typeof classes !== "string") {
            for (const elClass of classes) {
                el.classList.add(elClass);
            }
        } else {
            el.classList.add(classes);
        }
    });
}

很簡(jiǎn)單，對(duì)吧？

現(xiàn)在，刪除類呢？為此，你幾乎要做同樣的事情，只是使用classList.remove方法。

6. 使用屬性

接下來(lái)，讓我們添加attr函數(shù)。這將很容易，因?yàn)樗c我們的html方法幾乎相同。像這些方法一樣，我們將能夠同時(shí)獲取和設(shè)置屬性：我們將接受一個(gè)屬性名稱和值來(lái)設(shè)置，只接受一個(gè)屬性名稱來(lái)獲取。

 attr(attr, val) {
    if (typeof val !== "undefined") {
        return this.forEach(function (el) {
            el.setAttribute(attr, val);
        });
    } else {
        return this.mapOne(function (el) {
            return el.getAttribute(attr);
        });
    }
}

如果val已定義，我們將使用setAttribute方法。否則，我們將使用getAttribute方法。

7. 創(chuàng)建元素

我們應(yīng)該能夠創(chuàng)建新元素，任何好的庫(kù)都可以做到這一點(diǎn)。當(dāng)然，這作為Dome類的方法是沒有意義的。

 export function create(tagName,attrs) {

}

如你所見，我們將接受兩個(gè)參數(shù)：元素的名稱和屬性對(duì)象。大多數(shù)屬性將通過(guò)我們的attr方法應(yīng)用，文本內(nèi)容將通過(guò)text方法應(yīng)用於Dome對(duì)象。以下是所有這些的實(shí)際操作：

 export function create(tagName, attrs) {
    let el = new Dome([document.createElement(tagName)]);
    if (attrs) {
        for (let key in attrs) {
            if (attrs.hasOwnProperty(key)) {
                el.attr(key, attrs[key]);
            }
        }
    }
    return el;
}

如你所見，我們創(chuàng)建元素並將其直接發(fā)送到新的Dome對(duì)像中。

但是現(xiàn)在我們正在創(chuàng)建新元素，我們將希望將它們插入到DOM中，對(duì)吧？

8. 附加和前置元素

接下來(lái)，我們將編寫append和prepend方法。這些函數(shù)有點(diǎn)棘手，主要是因?yàn)橛卸喾N用例。以下是我們想要能夠做的事情：

 dome1.append(dome2);
dome1.prepend(dome2);

我們可能想要附加或前置：

• 一個(gè)新元素到一個(gè)或多個(gè)現(xiàn)有元素
• 多個(gè)新元素到一個(gè)或多個(gè)現(xiàn)有元素
• 一個(gè)現(xiàn)有元素到一個(gè)或多個(gè)現(xiàn)有元素
• 多個(gè)現(xiàn)有元素到一個(gè)或多個(gè)現(xiàn)有元素

我使用“新”來(lái)表示尚未在DOM中的元素；現(xiàn)有元素已在DOM中。讓我們現(xiàn)在逐步講解：

 append(els) {

}

我們期望els是一個(gè)Dome對(duì)象。一個(gè)完整的DOM庫(kù)會(huì)將其作為節(jié)點(diǎn)或節(jié)點(diǎn)列表接受，但我們不會(huì)這樣做。我們必須遍歷我們的每個(gè)元素，然後在其中，我們遍歷我們想要附加的每個(gè)元素。

如果我們正在附加，則來(lái)自作為參數(shù)傳入的外部Dome對(duì)象的i將只包含原始（未克隆的）節(jié)點(diǎn)。因此，如果我們只將單個(gè)元素附加到單個(gè)元素，則所有涉及的節(jié)點(diǎn)都將是它們各自的prepend方法的一部分。

9. 刪除元素

為了完整起見，讓我們添加一個(gè)remove方法。這將非常簡(jiǎn)單，因?yàn)槲覀冎恍枰褂?code>removeChild方法。為了使事情更簡(jiǎn)單，我們將使用forEach循環(huán)反向遍歷，我將使用removeChild方法反向遍歷循環(huán)，每個(gè)元素的Dome對(duì)象仍然可以正常工作；我們可以使用任何我們想要的方法，包括將其附加或前置回DOM。不錯(cuò)，對(duì)吧？

10. 使用事件

最後但並非最不重要的是，我們將編寫一些事件處理程序函數(shù)。

查看on方法，然後我們將討論它：

 on(evt, fn) {
    return this.forEach(function (el) {
        el.addEventListener(evt, fn, false);
    });
}

這很簡(jiǎn)單。我們只需遍曆元素並使用addEventListener方法。 off函數(shù)（它取消掛鉤事件處理程序）幾乎相同：

 off(evt, fn) {
    return this.forEach(function (el) {
        el.removeEventListener(evt, fn, false);
    });
}

11. 使用庫(kù)

要使用Dome ，只需將其放入腳本並導(dǎo)入它。

 import {Dome, create} from "./dome.js"

從那裡，你可以像這樣使用它：

 new Dome("li")
...

確保你導(dǎo)入它的腳本是ES模塊。

就是這樣！

我希望你能嘗試一下我們的小型庫(kù)，甚至可以擴(kuò)展它一點(diǎn)。正如我前面提到的，我已經(jīng)把它放在GitHub上了。隨意分叉它，玩耍，並發(fā)送拉取請(qǐng)求。

讓我再次澄清一下：本教程的目的並不是建議你應(yīng)該總是編寫自己的庫(kù)。有專門的團(tuán)隊(duì)在共同努力，使大型的、成熟的庫(kù)盡可能好。這裡的目的是讓你對(duì)庫(kù)內(nèi)部可能發(fā)生的事情有所了解；我希望你在這裡學(xué)到了一些技巧。

我強(qiáng)烈建議你在你的一些最喜歡的庫(kù)中四處挖掘。你會(huì)發(fā)現(xiàn)它們並不像你想像的那麼神秘，而且你可能會(huì)學(xué)到很多東西。以下是一些不錯(cuò)的起點(diǎn)：

• 我從jQuery源代碼中學(xué)到的11件事（Paul Irish）
• jQuery的幕後（James Padolsey）
• React 16：深入了解我們前端UI庫(kù)的API兼容重寫

這篇文章已更新，其中包含Jacob Jackson的貢獻(xiàn)。 Jacob是一位網(wǎng)絡(luò)開發(fā)者、技術(shù)作家、自由職業(yè)者和開源貢獻(xiàn)者。

以上是構(gòu)建您的第一個(gè)JavaScript庫(kù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！