Golang 기능으로 재사용 가능한 웹 구성 요소 구축-Golang-php.cn

Golang 기능으로 재사용 가능한 웹 구성 요소 구축

王林

풀어 주다： 2024-05-04 08:39:02

원래의

855명이 탐색했습니다.

Go 기능을 사용하면 재사용 가능한 웹 구성 요소를 만들 수 있습니다. 구체적인 단계는 다음과 같습니다. 새 Go 파일을 만들고 필요한 패키지를 가져옵니다. 구성 요소의 마크업과 JavaScript가 포함된 HTML 문자열을 반환하는 웹 구성 요소로 함수를 정의합니다. 웹 구성 요소를 등록하려면 http.HandleFunc 함수를 사용하세요. HTML의 태그를 사용하여 구성 요소를 렌더링합니다.

Golang 기능으로 재사용 가능한 웹 구성 요소 구축

Go 기능으로 재사용 가능한 웹 구성 요소 구축

웹 구성 요소는 웹 애플리케이션에 대화형 기능과 확장성을 추가하는 재사용 가능한 사용자 정의 HTML 요소입니다. Go에서 함수를 작성하는 것은 재사용 가능한 웹 구성요소를 구축하는 효율적인 방법입니다.

Go 함수 만들기

먼저 새 Go 파일을 만들고 필요한 패키지를 가져옵니다.

package main

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

로그인 후 복사

다음으로 웹 구성 요소로 사용할 함수를 정의합니다. 이 함수는 구성 요소의 마크업과 필요한 JavaScript가 포함된 HTML 문자열을 반환해야 합니다.

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

로그인 후 복사

웹 구성 요소 등록

Go 기능을 웹 구성 요소로 등록하려면 http.HandleFunc 함수를 사용하세요.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>

로그인 후 복사

이제 HTML에서 <my-comComponent> 태그를 사용하여 구성 요소를 렌더링할 수 있습니다.

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)
}

로그인 후 복사

실용 사례

다음은 Go 기능을 사용하는 재사용 가능한 카운터 웹 구성 요소입니다. 예:

Go 코드: