原生 Web 組件的興起
原生 Web 組件正在興起。你不相信嗎？這裡有一些統計數據可以證明並非如此：
-
根據截至 2022 年 1 月 1 日的 chromestatus.com 關於
17.5%網頁加載使用 CustomElementRegistryDefine 功能來定義自定義元素。在 2021 年 1 月 1 日，這個數字只有10%左右 . -
根據 caniuse.com 的說法，瀏覽器對自定義元素 (V1) 規範的支持約為
93.85%.
Web 組件缺陷
那麼為什麼不是每個人都切換到 Web 組件呢？嗯，多方面的原因。如果您曾經在 Google 上搜索過 Web 組件並嘗試實現它們，您很快就會意識到使用準系統 Web 組件 API 並不好玩。此外，Vue、React 或 Angular 等常見框架還缺少許多您習慣使用的功能。此外，它們過於復雜，因此設置的進入門檻過高。
當然還有一些其他的缺點，但是如果系統的開發者體驗不好，沒有人會嘗試深入挖掘。
我馬上註意到的是，很多人認為他們被迫在項目的框架或原生 Web 組件之間進行選擇。但缺陷就在這裡，不是非此即彼。
跳出框框思考
每個人都對原生 Web 組件抱有很高的期望，但他們從來沒有辜負炒作，並且在某種程度上淡出了背景，而 React 和 Vue 仍然處於聚光燈下。
我認為這種情況即將改變，但首先，我們需要重新定義我們對 Web 組件的看法。原生 Web 組件不是用來替代常見框架的，而是應該作為補充使用。
Web 組件的優勢在於它們的通用性，因為它們是原生的，您可以在任何地方使用它們，這使得它們非常適合設計系統。
這意味著，如果您在設計系統中使用原生 Web 組件，則不必為您正在使用的每個框架和遺留應用程序編寫相同的組件集。
在自己為多個項目製作了一堆 Web 組件並擺弄了 Web 組件 API 之後，我知道需要另一種解決方案才能輕鬆使用 Web 組件，因此 Minze 誕生了。
明澤
什麼是明澤？ Minze 是一個非常簡單的可共享 Web 組件框架。它圍繞 Web 組件 API 提供了一個直觀的抽象層，用於創建封裝的、可重用的、跨框架的 Web 組件。
特點
- 👶 簡單 - 通過搭建項目或使用 CDN 鏈接直接進入。
- ⚡ 快速 - 佔用空間小約 2KB（已縮小和壓縮）。
- 🚀 現代 - 基於 Web 組件的最新技術。
- 📦 可共享 - 構建組件庫或設計系統。定義一次，隨處使用。
- 🎲 與框架無關 - 將 Minze 與任何常見框架一起使用 - React、Vue、Angular ...
- 🔒 Typed API - 使用 TypeScript 輕鬆擴展您的組件庫。
示例
這是通過 npm 包含的 Minze 的樣子：
import { MinzeElement } from 'minze'
class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}
MyElement.define()
<my-element></my-element>
這是通過 CDN 包含的 Minze 的樣子：
<html>
<head></head>
<body>
<my-element></my-element>
<script src="//unpkg.com/minze@latest" defer></script>
<script type="module">
class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}
MyElement.define()
</script>
</body>
</html>
容易，對吧？歡迎在下面的評論中分享您對 Web 組件主題的看法。
了解有關明澤的更多信息
- GitHub
- minze.dev（文檔）
