首頁 > web前端 > js教程 > #ustom 程式碼而不是外掛程式/庫 - 簡單性展示

#ustom 程式碼而不是外掛程式/庫 - 簡單性展示

Barbara Streisand
發布: 2024-12-31 08:08:09
原創
218 人瀏覽過

這是三篇文章中的第三篇,我將在其中展示如何快速、輕鬆地實現常見的 Web 功能,而無需依賴繁重的庫或複雜的框架。這次,我為剪輯內容製作了“閱讀更多”按鈕 - 實現了最大程度的自動化。

#ustom Code Instead of Plugins/Libraries - Showcase of Simplicity

隨意使用代碼

程式碼很簡單,只是普通的 JavaScript-沒有函式庫,沒有魔法。它超輕且易於整合。它使用 IntersectionObserver,因此它甚至不會在元素可見之前運行,從而節省效能開銷(儘管您可能希望針對較小的網頁刪除此最佳化)。

https://gist.github.com/TomJPro/39e96d2cd6cbfcf908ad99273b2211a5

發現一個全新的簡單世界

我認為存在用於此目的的庫,因為問題看起來很複雜。但當我嘗試自己編寫它時,我的頭腦陷入了這樣一個想法:它需要一個複雜的解決方案——我的想法欺騙了我!現在我確信這些函式庫的存在是因為其他開發人員也過度思考了這個問題,或者試圖用一個巨大的解決方案來解決每一種可能的情況。在我們計算毫秒的世界裡,這永遠不可能真正運作。

當我編寫第一段簡單的程式碼來完成這項工作時,與 100kb 的程式庫相比,它只有 20 行,而且針對每個專案進行自訂甚至更容易。老實說,感覺就像發現了一個新世界。

想看看我是如何建造它的嗎?

我很享受直播。下次來跟我聊聊吧!

觀看直播

最後的想法

在看到在短短幾分鐘內(包括JS、HTML 和CSS)編碼的三個常見功能(如輪播、帶有“閱讀更多”的行剪輯和類似腳本)後,我希望您清楚知道,您經常不這樣做不需要繁重的圖書館。有時,簡單的舊式 JavaScript 和少量 CSS 就可以實現流暢、高效能的結果。

以上是#ustom 程式碼而不是外掛程式/庫 - 簡單性展示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板