目錄
創建庫的框架
簡短的理念探討
返回編碼
使用文本和HTML
操作類
使用屬性
創建元素
附加和前置元素
刪除元素
使用事件
使用庫
就是這樣!
首頁 web前端 js教程 構建您的第一個JavaScript庫

構建您的第一個JavaScript庫

Mar 11, 2025 am 12:09 AM

Build Your First JavaScript Library

你是否曾驚嘆於React的魔力?是否曾好奇Dojo是如何運作的?是否曾對jQuery的巧妙操作感到好奇?在本教程中,我們將潛入幕後,嘗試構建一個超簡化的jQuery版本。

我們幾乎每天都在使用JavaScript庫。無論是實現算法、提供API抽像還是操作DOM,庫在大多數現代網站中都執行許多功能。

在本教程中,我們將嘗試從頭開始構建一個這樣的庫(當然,這是一個簡化的版本)。我們將創建一個用於DOM操作的庫,類似於jQuery。是的,這很有趣,但在你興奮之前,讓我澄清幾點:

  • 這不會是一個功能齊全的庫。我們將編寫一套可靠的方法,但這並非完整的jQuery。我們將做的足夠多,讓你對構建庫時會遇到的問題類型有很好的了解。
  • 我們在這裡不會追求跨所有瀏覽器的完全兼容性。我們今天編寫的代碼應該可以在Chrome、Firefox和Safari上運行,但在IE等舊版瀏覽器上可能無法運行。
  • 我們不會涵蓋我們庫的每一個可能的用途。例如,我們的prepend方法只在你傳遞給它們我們的庫實例時才有效;它們不適用於原始DOM節點或節點列表。

  1. 創建庫的框架

我們將從模塊本身開始。我們將使用ECMAScript模塊(ESM),這是一種在Web上導入和導出代碼的現代方法。

 export class Dome {
    constructor(selector) {

    }
}
登入後複製

如你所見,我們導出一個名為Dome的類,其構造函數將接受一個參數,但它可以是多種類型。如果它是一個字符串,我們將假設它是一個CSS選擇器,但我們也可以接受單個DOM節點或document.querySelectorAll的結果來簡化元素查找。如果它具有length屬性,我們將知道我們擁有一個節點列表。我們將把這些元素存儲在this.elements中, Dome對象可以包裝多個DOM元素,我們幾乎需要在每種方法中循環遍歷每個元素,因此這些實用程序將非常方便。

讓我們從一個map函數開始,它接受一個參數,一個回調函數。我們將循環遍歷數組中的項目,收集回調函數返回的內容, Dome實例將接收兩個參數:當前元素和索引號。

我們還需要一個forEach方法,默認情況下,我們可以簡單地將調用轉發到mapOne 。很容易看出這個函數的作用,但真正的問題是,為什麼我們需要它?這需要一點你可能稱之為“庫理念”的東西。

簡短的理念探討

如果構建庫只是編寫代碼,那將不是一項太難的工作。但在從事這個項目時,我發現更難的部分是決定某些方法應該如何工作。

很快,我們將構建一個Dome對象,它包裝了多個DOM節點( $("li").text() ),你將得到一個包含所有元素文本連接在一起的單個字符串。這有用嗎?我認為沒有,但我不知道更好的返回值是什麼。

對於這個項目,我將把多個元素的文本作為數組返回,除非數組中只有一個項目;然後我們只返回文本字符串,而不是包含單個項目的數組。我認為你最常獲取單個元素的文本,所以我們對此情況進行了優化。但是,如果你正在獲取多個元素的文本,我們將返回你可以使用的內容。

返回編碼

因此, mapOne將首先調用map ,然後返回數組或數組中的單個項目。如果你仍然不確定這如何有用,請繼續關注:你將看到!

 mapOne(callback) {
    const m = this.map(callback);
    return m.length > 1 ? m : m[0];
};
登入後複製
  1. 使用文本和HTML

接下來,讓我們添加text方法來查看我們是在設置還是獲取。請注意,這只是遍曆元素並設置它們的文本。如果我們正在獲取,我們將返回元素的mapOne方法:如果我們正在處理多個元素,這將返回一個數組;否則,它將只是一個字符串。

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;
        });
    }
}
登入後複製

就像我說的:幾乎相同。


  1. 操作類

接下來,我們要能夠添加和刪除類,所以讓我們編寫addClassremoveClass方法。

我們的addClass方法將在每個元素上使用classList.add方法。當傳遞字符串時,只添加該類,當傳遞數組時,我們將遍歷數組並添加其中包含的所有類。

 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);
        }
    });
}
登入後複製

很簡單,對吧?

現在,刪除類呢?為此,你幾乎要做同樣的事情,只是使用classList.remove方法。

  1. 使用屬性

接下來,讓我們添加attr函數。這將很容易,因為它與我們的html方法幾乎相同。像這些方法一樣,我們將能夠同時獲取和設置屬性:我們將接受一個屬性名稱和值來設置,只接受一個屬性名稱來獲取。

 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方法。

  1. 創建元素

我們應該能夠創建新元素,任何好的庫都可以做到這一點。當然,這作為Dome類的方法是沒有意義的。

 export function create(tagName,attrs) {

}
登入後複製

如你所見,我們將接受兩個參數:元素的名稱和屬性對象。大多數屬性將通過我們的attr方法應用,文本內容將通過text方法應用於Dome對象。以下是所有這些的實際操作:

 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;
}
登入後複製

如你所見,我們創建元素並將其直接發送到新的Dome對像中。

但是現在我們正在創建新元素,我們將希望將它們插入到DOM中,對吧?

  1. 附加和前置元素

接下來,我們將編寫appendprepend方法。這些函數有點棘手,主要是因為有多種用例。以下是我們想要能夠做的事情:

 dome1.append(dome2);
dome1.prepend(dome2);
登入後複製

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

  • 一個新元素到一個或多個現有元素
  • 多個新元素到一個或多個現有元素
  • 一個現有元素到一個或多個現有元素
  • 多個現有元素到一個或多個現有元素

我使用“新”來表示尚未在DOM中的元素;現有元素已在DOM中。讓我們現在逐步講解:

 append(els) {

}
登入後複製

我們期望els是一個Dome對象。一個完整的DOM庫會將其作為節點或節點列表接受,但我們不會這樣做。我們必須遍歷我們的每個元素,然後在其中,我們遍歷我們想要附加的每個元素。

如果我們正在附加,則來自作為參數傳入的外部Dome對象的i將只包含原始(未克隆的)節點。因此,如果我們只將單個元素附加到單個元素,則所有涉及的節點都將是它們各自的prepend方法的一部分。

  1. 刪除元素

為了完整起見,讓我們添加一個remove方法。這將非常簡單,因為我們只需要使用removeChild方法。為了使事情更簡單,我們將使用forEach循環反向遍歷,我將使用removeChild方法反向遍歷循環,每個元素的Dome對象仍然可以正常工作;我們可以使用任何我們想要的方法,包括將其附加或前置回DOM。不錯,對吧?

  1. 使用事件

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

查看on方法,然後我們將討論它:

 on(evt, fn) {
    return this.forEach(function (el) {
        el.addEventListener(evt, fn, false);
    });
}
登入後複製

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

 off(evt, fn) {
    return this.forEach(function (el) {
        el.removeEventListener(evt, fn, false);
    });
}
登入後複製

  1. 使用庫

要使用Dome ,只需將其放入腳本並導入它。

 import {Dome, create} from "./dome.js"
登入後複製

從那裡,你可以像這樣使用它:

 new Dome("li")
...
登入後複製

確保你導入它的腳本是ES模塊。

就是這樣!

我希望你能嘗試一下我們的小型庫,甚至可以擴展它一點。正如我前面提到的,我已經把它放在GitHub上了。隨意分叉它,玩耍,並發送拉取請求。

讓我再次澄清一下:本教程的目的並不是建議你應該總是編寫自己的庫。有專門的團隊在共同努力,使大型的、成熟的庫盡可能好。這裡的目的是讓你對庫內部可能發生的事情有所了解;我希望你在這裡學到了一些技巧。

我強烈建議你在你的一些最喜歡的庫中四處挖掘。你會發現它們並不像你想像的那麼神秘,而且你可能會學到很多東西。以下是一些不錯的起點:

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

這篇文章已更新,其中包含Jacob Jackson的貢獻。 Jacob是一位網絡開發者、技術作家、自由職業者和開源貢獻者。

以上是構建您的第一個JavaScript庫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript難以學習嗎? JavaScript難以學習嗎? Apr 03, 2025 am 12:20 AM

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

Zustand異步操作:如何確保useStore獲取的最新狀態? Zustand異步操作:如何確保useStore獲取的最新狀態? Apr 04, 2025 pm 02:09 PM

zustand異步操作中的數據更新問題在使用zustand狀態管理庫時,經常會遇到異步操作導致數據更新不及時的問題。 �...

See all articles