建立和維護(hù)個(gè)人網(wǎng)站具有許多優(yōu)勢(shì)，包括您的平臺(tái)所有權(quán)以及探索網(wǎng)絡(luò)技術(shù)的機(jī)會(huì)。最近，我從自己的網(wǎng)站開(kāi)始研究無(wú)服務(wù)器功能。本文分享了我的經(jīng)驗(yàn)和學(xué)習(xí)，使您能夠建立自己的經(jīng)驗(yàn)和學(xué)習(xí)！

快速介紹無(wú)服務(wù)器功能

無(wú)服務(wù)器功能（也稱為lambda功能或云功能）是您可以獨(dú)立編寫，主機(jī)執(zhí)行和執(zhí)行的獨(dú)立代碼段，獨(dú)立于您的網(wǎng)站，應(yīng)用程序或其他代碼。當(dāng)它們?cè)诜?wù)器上運(yùn)行時(shí)，您不管理服務(wù)器基礎(chǔ)架構(gòu)。這簡(jiǎn)化了強(qiáng)大的可擴(kuò)展應(yīng)用程序的開(kāi)發(fā)。

為了獲得更深入的理解，CSS-Tricks的指南“無(wú)服務(wù)器前端開(kāi)發(fā)人員的力量”是一個(gè)很好的資源。

項(xiàng)目目標(biāo)：簡(jiǎn)單的電子郵件注冊(cè)表格

我的項(xiàng)目專注于創(chuàng)建具有特定約束的電子郵件注冊(cè)表格：

• 無(wú)JavaScript功能：表單應(yīng)僅使用CSS和HTML功能，從而允許進(jìn)行漸進(jìn)的增強(qiáng)功能。
• 沒(méi)有外部依賴性：目標(biāo)是自己編寫所有代碼。
• 無(wú)服務(wù)器功能集成：電子郵件數(shù)據(jù)處理將發(fā)生服務(wù)器端，而不是客戶端。

技術(shù)堆棧：11ty，Netlify和Buttondown

我的網(wǎng)站使用11ty，這是一個(gè)靜態(tài)站點(diǎn)生成器，允許創(chuàng)建HTML模板。 NetLify處理部署，對(duì)于無(wú)服務(wù)器功能至關(guān)重要，提供：

• 自動(dòng)化的GitHub部署：簡(jiǎn)化開(kāi)發(fā)工作流程。
• NetLify表格：管理表單提交，而沒(méi)有自定義代碼。
• NetLify函數(shù)：基于表單數(shù)據(jù)啟用服務(wù)器端操作。

Buttondown用作電子郵件列表管理服務(wù)。重要的是，對(duì)于個(gè)人站點(diǎn)，這三個(gè)服務(wù)都提供免費(fèi)層。

表格的HTML

我的電子郵件訂閱表的HTML簡(jiǎn)潔，利用NetLify表單屬性：

data-netlify="true"指示NetLify處理表單。 bot-field輸入充當(dāng)蜜罐來(lái)檢測(cè)機(jī)器人，自動(dòng)從用戶隱藏。 Netlify的Akismet集成進(jìn)一步保護(hù)了垃圾郵件。 email輸入使用瀏覽器驗(yàn)證來(lái)增強(qiáng)用戶體驗(yàn)。

JavaScript進(jìn)行逐步增強(qiáng)

雖然Netlify表單提供自動(dòng)重定向，但我更喜歡將用戶保留在頁(yè)面上。 JavaScript函數(shù)增強(qiáng)了表單的功能：

 const processForm = form => {
  // ...（提取API代碼而不重定向提交表單）...
};

該功能是由提交事件偵聽(tīng)器觸發(fā)的，可以逐步增強(qiáng)表單，即使禁用JavaScript，也可以確保功能。

無(wú)服務(wù)器功能

NETLIFY函數(shù)位于functions/submission-created.js中，進(jìn)程表格提交：

 // ...（使用Node-fetch和環(huán)境變量來(lái)將數(shù)據(jù)發(fā)送到buttondown）... ...

該函數(shù)檢索電子郵件地址，使用node-fetch通過(guò)其API將其發(fā)送到Buttondown，并記錄調(diào)試結(jié)果。環(huán)境變量安全地存儲(chǔ)了Buttondown API鍵。

部署和本地測(cè)試

編寫函數(shù)，配置netlify.toml和設(shè)置環(huán)境變量后，通過(guò)NetLify的GitHub集成，部署是簡(jiǎn)單的?？梢允褂肗etLify Dev（ npm i netlify -g ，然后是netlify dev ）進(jìn)行本地測(cè)試，盡管表單提交測(cè)試需要預(yù)覽構(gòu)建。

未來(lái)的改進(jìn)

未來(lái)的增強(qiáng)功能可能包括向用戶提供實(shí)時(shí)反饋，例如指示是否已經(jīng)訂閱了電子郵件地址。

結(jié)論

使用大約50行代碼，我創(chuàng)建了一個(gè)功能齊全的電子郵件注冊(cè)表格。 HTML，CSS，JavaScript和NetLify的無(wú)服務(wù)器功能的組合導(dǎo)致了抗垃圾郵件，用戶友好的表單，無(wú)論JavaScript可用性如何，都可以使用。

以上是使用NetLify表單和NetLify功能來(lái)構(gòu)建電子郵件注冊(cè)小部件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！