Golang 関数を使用して再利用可能な Web コンポーネントを構築する-Golang-php.cn

Golang 関数を使用して再利用可能な Web コンポーネントを構築する

王林

リリース： 2024-05-04 08:39:02

オリジナル

854 人が閲覧しました

Go 関数を使用すると、再利用可能な Web コンポーネントを構築できます。具体的な手順には、新しい Go ファイルの作成と必要なパッケージのインポートが含まれます。コンポーネントのマークアップと JavaScript を含む HTML 文字列を返す Web コンポーネントとして関数を定義します。 http.HandleFunc 関数を使用して Web コンポーネントを登録します。 HTML のタグを使用してコンポーネントをレンダリングします。

Golang 関数を使用して再利用可能な Web コンポーネントを構築する

Go 関数を使用して再利用可能な Web コンポーネントを構築する

Web コンポーネントは、Web アプリケーションの機能とスケーラビリティに対話性を追加する再利用可能なカスタム HTML 要素です。 Go で関数を記述することは、再利用可能な Web コンポーネントを構築する効率的な方法です。

Go 関数の作成

まず、新しい Go ファイルを作成し、必要なパッケージをインポートします。

package main

import (
    "fmt"
    "log"
    "net/http"
)

ログイン後にコピー

次に、Web コンポーネントとして使用する関数を定義します。この関数は、コンポーネントのマークアップと必要な JavaScript を含む HTML 文字列を返す必要があります。

func MyComponent() string {
    return `<div>Hello, world!</div><script>console.log('Hello from MyComponent')</script>`
}

ログイン後にコピー

Web コンポーネントの登録

Go 関数を Web コンポーネントとして登録するには、 http.HandleFunc を使用します。 関数:

func main() {
    http.HandleFunc("/my-component", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprint(w, MyComponent())
    })

    log.Println("Listening on port 8080")
    http.ListenAndServe(":8080", nil)
}

ログイン後にコピー

これで、HTML で <my-component> タグを使用してコンポーネントをレンダリングできます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Component Example</title>
</head>
<body>
  <my-component></my-component>
  <script src="main.js"></script>
</body>
</html>

ログイン後にコピー

実用的なケース

Go 関数を使用して再利用可能なカウンター Web コンポーネントを構築する例を次に示します:

Go コード:

func CounterComponent(count int) string {
    return fmt.Sprintf(`
        <div>Count: %d</div>
        <button onclick="incrementCount(%d)">Increment</button>
        <script>
            let count = %d;
            function incrementCount(index) {
                count++;
                document.querySelectorAll('my-counter')[index].textContent = 'Count: ' + count;
            }
        </script>
    `, count, count, count)
}

ログイン後にコピー

HTML 使用法: