Créez des composants Web réutilisables avec les fonctions Golang-Golang-php.cn

Créez des composants Web réutilisables avec les fonctions Golang

王林

Libérer： 2024-05-04 08:39:02

original

855 Les gens l'ont consulté

En utilisant les fonctions Go, vous pouvez créer des composants Web réutilisables. Les étapes spécifiques incluent : Créer un nouveau fichier Go et importer les packages nécessaires. Définissez une fonction en tant que composant Web qui renvoie une chaîne HTML contenant le balisage et le JavaScript du composant. Utilisez la fonction http.HandleFunc pour enregistrer les composants Web. Utilisez des balises en HTML pour afficher les composants.

Créez des composants Web réutilisables avec les fonctions Golang

Créez des composants Web réutilisables avec les fonctions Go

Un composant Web est un élément HTML personnalisé réutilisable qui ajoute une fonctionnalité interactive et une extensibilité à votre application Web. L'écriture de fonctions dans Go est un moyen efficace de créer des composants Web réutilisables.

Créez une fonction Go

Tout d'abord, créez un nouveau fichier Go et importez les packages nécessaires :

package main

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

Copier après la connexion

Ensuite, définissez une fonction à utiliser comme composant Web. Cette fonction doit renvoyer une chaîne HTML contenant le balisage du composant et tout JavaScript nécessaire :

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

Copier après la connexion

Enregistrement des composants Web

Pour enregistrer une fonction Go en tant que composant Web, utilisez la fonction 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)
}

Copier après la connexion

现在，你可以在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>

Copier après la connexion

Maintenant, vous pouvez utiliser la balise <my-component> en HTML pour rendre les composants :

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

Copier après la connexion

Cas pratique

Ce qui suit est un composant Web de compteur réutilisable utilisant les fonctions Go Exemple de :

Code Go :

<my-counter count="0"></my-counter>

Copier après la connexion

Utilisation HTML :

rrreee

Chaque fois que l'utilisateur clique sur le bouton du compteur, la fonction Go sera appelée et le décompte sera mis à jour sur la page.

Conclusion

Créer des composants Web à l'aide des fonctions Go est un moyen efficace de créer des composants frontaux réutilisables et maintenables. En suivant les étapes décrites dans cet article, vous pouvez créer vos propres composants Web personnalisés pour améliorer les fonctionnalités de votre application. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!