Actions

Actions 本質上是元素級生命週期 (element-level lifecycle) 的函式,會在元素被建立時呼叫。常常用在

  • 第三方庫的整合
  • 圖片的惰性載入
  • 工具提示 (tooltips)
  • 新增自訂事件處理程序

use: 語法

<script>
    /** @type {import('svelte/action').Action}  */
    function foo(node) {
        // the node has been mounted in the DOM

        return {
            destroy() {
                // the node has been removed from the DOM
            }
        };
    }
</script>

<!-- 當元素被建立時,就會呼叫 foo 函式 -->
<!-- 當元素被刪除時,就會呼叫 foo 函式回傳的 destroy() -->
<div use:foo />

加入變數

Actions 也可以傳入變數。下方是一個整合 tippy.js 的例子:

<script>
    import tippy from 'tippy.js';
    import 'tippy.js/dist/tippy.css';
    import 'tippy.js/themes/material.css';

    let content = 'Hello!';

    function tooltip(node, options) {
        // { content: 'Hello!', theme: 'material'}
        console.log(options);

        const tooltip = tippy(node, options);

        return {
            destroy() {
                tooltip.destroy();
            }
        };
    }
</script>

<input bind:value={content} />

<button use:tooltip=

<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="/note/assets/css/just-the-docs-default.css">

  <link rel="stylesheet" href="/note/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">

  <style id="jtd-nav-activation">
  

    .site-nav > ul.nav-list:first-child > li > a,
    
    .site-nav > ul.nav-list:first-child > li > ul > li:not(:nth-child(10)) > a,
    .site-nav > ul.nav-list:first-child > li > ul > li > ul > li a {
      background-image: none;
    }

    .site-nav > ul.nav-list:not(:first-child) a,
    .site-nav li.external a {
      background-image: none;
    }

    .site-nav > ul.nav-list:first-child > li:nth-child(19) > ul > li:nth-child(10) > a {
      font-weight: 600;
      text-decoration: none;
    }.site-nav > ul.nav-list:first-child > li:nth-child(19) > button svg,
    .site-nav > ul.nav-list:first-child > li:nth-child(19) > ul > li:nth-child(10) > button svg {
      transform: rotate(-90deg);
    }.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(19) > ul.nav-list,
    .site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(19) > ul.nav-list > li.nav-list-item:nth-child(10) > ul.nav-list {
      display: block;
    }
  </style>

  

  
    <script src="/note/assets/js/vendor/lunr.min.js"></script>
  

  <script src="/note/assets/js/just-the-docs.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  



  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>struct (結構體) | Allen’s Note</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="struct (結構體)" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Record the learning" />
<meta property="og:description" content="Record the learning" />
<link rel="canonical" href="https://yilanboy.github.io/note/rust/10-struct.html" />
<meta property="og:url" content="https://yilanboy.github.io/note/rust/10-struct.html" />
<meta property="og:site_name" content="Allen’s Note" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="struct (結構體)" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"Record the learning","headline":"struct (結構體)","url":"https://yilanboy.github.io/note/rust/10-struct.html"}</script>
<!-- End Jekyll SEO tag -->


  

</head>

<body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
  <title>Link</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  </svg>
</symbol>

  <symbol id="svg-menu" viewBox="0 0 24 24">
  <title>Menu</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</symbol>

  <symbol id="svg-arrow-right" viewBox="0 0 24 24">
  <title>Expand</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
    <polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</symbol>

  <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
  <title id="svg-external-link-title">(external link)</title>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>

  
    <symbol id="svg-doc" viewBox="0 0 24 24">
  <title>Document</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
  </svg>
</symbol>

    <symbol id="svg-search" viewBox="0 0 24 24">
  <title>Search</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</symbol>

  
  
    <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
  <title>Copy</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
  </svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
  <title>Copied</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
    <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
  </svg>
</symbol>

  
</svg>

  
    <header class="side-bar">
  <div class="site-header">
    <a href="/note/" class="site-title lh-tight">
  Allen's Note

</a>
    <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </button>
  </div>

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="AWS submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/aws/README.html" class="nav-list-link">AWS</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/aws/01-aws-cli.html" class="nav-list-link">AWS CLI</a></li><li class="nav-list-item"><a href="/note/aws/02-egress-only-gateway-introduction.html" class="nav-list-link">Egress Only Gateway</a></li><li class="nav-list-item"><a href="/note/aws/03-region-and-availability-zone.html" class="nav-list-link">Region and Availability Zone</a></li><li class="nav-list-item"><a href="/note/aws/04-elastic-load-balancer.html" class="nav-list-link">Elastic Load Balancer</a></li><li class="nav-list-item"><a href="/note/aws/05-lambda.html" class="nav-list-link">Lambda</a></li><li class="nav-list-item"><a href="/note/aws/06-iam.html" class="nav-list-link">AWS Identity and Access Management (IAM)</a></li><li class="nav-list-item"><a href="/note/aws/07-route53.html" class="nav-list-link">Route53</a></li><li class="nav-list-item"><a href="/note/aws/08-certificate.html" class="nav-list-link">AWS Certificate Service</a></li><li class="nav-list-item"><a href="/note/aws/09-aws-shield.html" class="nav-list-link">AWS Shield</a></li><li class="nav-list-item"><a href="/note/aws/10-firewall.html" class="nav-list-link">WAF (Firewall)</a></li><li class="nav-list-item"><a href="/note/aws/11-vpc.html" class="nav-list-link">Virtual Private Cloud (VPC)</a></li><li class="nav-list-item"><a href="/note/aws/12-api-gateway.html" class="nav-list-link">API Gateway</a></li><li class="nav-list-item"><a href="/note/aws/13-x-ray.html" class="nav-list-link">X-Ray</a></li><li class="nav-list-item"><a href="/note/aws/14-auto-scaling-group.html" class="nav-list-link">Auto Scaling Group (ASG)</a></li><li class="nav-list-item"><a href="/note/aws/15-ec2.html" class="nav-list-link">Elastic Compute Cloud (EC2)</a></li><li class="nav-list-item"><a href="/note/aws/16-storage.html" class="nav-list-link">Storage Service</a></li><li class="nav-list-item"><a href="/note/aws/17-database.html" class="nav-list-link">Database Service</a></li><li class="nav-list-item"><a href="/note/aws/18-sqs.html" class="nav-list-link">Simple Queue Service (SQS)</a></li><li class="nav-list-item"><a href="/note/aws/19-sns.html" class="nav-list-link">Simple Notification Service (SNS)</a></li><li class="nav-list-item"><a href="/note/aws/20-s3.html" class="nav-list-link">Simple Storage Service (S3)</a></li><li class="nav-list-item"><a href="/note/aws/21-cloudfront.html" class="nav-list-link">CloudFront (AWS CDN Service)</a></li><li class="nav-list-item"><a href="/note/aws/22-cloudwatch.html" class="nav-list-link">CloudWatch</a></li><li class="nav-list-item"><a href="/note/aws/23-cloudtrail.html" class="nav-list-link">CloudTrail</a></li><li class="nav-list-item"><a href="/note/aws/24-ecs.html" class="nav-list-link">Elastic Container Service (ECS)</a></li><li class="nav-list-item"><a href="/note/aws/25-efs.html" class="nav-list-link">Elastic File System</a></li><li class="nav-list-item"><a href="/note/aws/26-sigv4.html" class="nav-list-link">SigV4</a></li><li class="nav-list-item"><a href="/note/aws/27-athena.html" class="nav-list-link">AWS Athena</a></li><li class="nav-list-item"><a href="/note/aws/28-coe.html" class="nav-list-link">Correction of Errors (CoE) in AWS</a></li><li class="nav-list-item"><a href="/note/aws/29-sts.html" class="nav-list-link">AWS STS (Security Token Service)</a></li><li class="nav-list-item"><a href="/note/aws/99-others.html" class="nav-list-link">其他大大小小的 AWS 服務</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Azure submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/azure/README.html" class="nav-list-link">Azure</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/azure/01-azure-cli.html" class="nav-list-link">Azure CLI</a></li><li class="nav-list-item"><a href="/note/azure/02-blob-storage.html" class="nav-list-link">Azure Blob Storage</a></li><li class="nav-list-item"><a href="/note/azure/03-function-app.html" class="nav-list-link">App Function</a></li><li class="nav-list-item"><a href="/note/azure/04-managed-identity.html" class="nav-list-link">Azure Managed Identity</a></li><li class="nav-list-item"><a href="/note/azure/05-service-principal.html" class="nav-list-link">Service Principal</a></li><li class="nav-list-item"><a href="/note/azure/06-data-explorer.html" class="nav-list-link">Azure Data Explorer</a></li><li class="nav-list-item"><a href="/note/azure/07-policy.html" class="nav-list-link">Azure Policy</a></li><li class="nav-list-item"><a href="/note/azure/08-private-link-service.html" class="nav-list-link">Private Link Service</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Google Cloud Platform submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/google-cloud-platform/README.html" class="nav-list-link">Google Cloud Platform</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/google-cloud-platform/01-google-cloud-cli.html" class="nav-list-link">Google Cloud CLI</a></li><li class="nav-list-item"><a href="/note/google-cloud-platform/02-projects.html" class="nav-list-link">Project</a></li><li class="nav-list-item"><a href="/note/google-cloud-platform/03-service-account.html" class="nav-list-link">Service Account</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Terraform submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/terraform/README.html" class="nav-list-link">Terraform</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/terraform/01-import.html" class="nav-list-link">Terraform Import</a></li><li class="nav-list-item"><a href="/note/terraform/02-time-rotating.html" class="nav-list-link">Time Rotating</a></li><li class="nav-list-item"><a href="/note/terraform/03-debug.html" class="nav-list-link">分享前輩的 Terraform Debug 小技巧</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Ansible submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/ansible/README.html" class="nav-list-link">Ansible</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/ansible/01-inventory.html" class="nav-list-link">Inventory</a></li><li class="nav-list-item"><a href="/note/ansible/02-playbooks.html" class="nav-list-link">Playbooks</a></li><li class="nav-list-item"><a href="/note/ansible/03-variables.html" class="nav-list-link">Variables</a></li><li class="nav-list-item"><a href="/note/ansible/04-conditionals.html" class="nav-list-link">Conditionals</a></li><li class="nav-list-item"><a href="/note/ansible/05-handlers.html" class="nav-list-link">Handlers</a></li><li class="nav-list-item"><a href="/note/ansible/06-set-fact.html" class="nav-list-link">Set Fact Module</a></li><li class="nav-list-item"><a href="/note/ansible/07-template.html" class="nav-list-link">Template Module</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Docker submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/docker/README.html" class="nav-list-link">Docker</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/docker/01-best-practice.html" class="nav-list-link">Docker Best Practice</a></li><li class="nav-list-item"><a href="/note/docker/02-build.html" class="nav-list-link">建立映像檔</a></li><li class="nav-list-item"><a href="/note/docker/03-prune.html" class="nav-list-link">清理用不到的 Docker 資源 (容器、映像檔與資料存儲)</a></li><li class="nav-list-item"><a href="/note/docker/04-noninteractive.html" class="nav-list-link">遇到交互式問題時的處理</a></li><li class="nav-list-item"><a href="/note/docker/05-proxy.html" class="nav-list-link">使用自己的 Proxy</a></li><li class="nav-list-item"><a href="/note/docker/06-custom-command.html" class="nav-list-link">使用 Docker Container 來製作自己的指令</a></li><li class="nav-list-item"><a href="/note/docker/07-mount.html" class="nav-list-link">Mount</a></li><li class="nav-list-item"><a href="/note/docker/08-logging-drivers.html" class="nav-list-link">Logging Drivers</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Kubernetes (K8s) submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/k8s/README.html" class="nav-list-link">Kubernetes (K8s)</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/k8s/01-k3s.html" class="nav-list-link">K3s</a></li><li class="nav-list-item"><a href="/note/k8s/02-sealed-secrets.html" class="nav-list-link">Sealed Secrets</a></li><li class="nav-list-item"><a href="/note/k8s/03-roloader.html" class="nav-list-link">Reloader</a></li><li class="nav-list-item"><a href="/note/k8s/04-cronjob.html" class="nav-list-link">使用 K8s CronJob 來備份資料庫</a></li><li class="nav-list-item"><a href="/note/k8s/05-helm.html" class="nav-list-link">Helm</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Argo CD submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/argocd/README.html" class="nav-list-link">Argo CD</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/argocd/01-resource-hooks.html" class="nav-list-link">Resource Hooks</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="GitHub submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/github/README.html" class="nav-list-link">GitHub</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/github/01-composite-action.html" class="nav-list-link">Composite Action</a></li><li class="nav-list-item"><a href="/note/github/02-outputs.html" class="nav-list-link">Defining Outputs for Jobs</a></li><li class="nav-list-item"><a href="/note/github/03-markdown-syntax.html" class="nav-list-link">GitHub Markdown Syntax</a></li><li class="nav-list-item"><a href="/note/github/04-use-schedule-to-bakcup-postgresql.html" class="nav-list-link">Use Schedule to Backup PostgreSQL</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Grafana submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/grafana/README.html" class="nav-list-link">Grafana</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/grafana/01-node-exporter.html" class="nav-list-link">Use Node Exporter to monitor the host</a></li><li class="nav-list-item"><a href="/note/grafana/02-prometheus.html" class="nav-list-link">Prometheus</a></li><li class="nav-list-item"><a href="/note/grafana/03.promql.html" class="nav-list-link">PromQL</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Network submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/network/README.html" class="nav-list-link">Network</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/network/01-ca-certificate.html" class="nav-list-link">CA 憑證</a></li><li class="nav-list-item"><a href="/note/network/02-bgp.html" class="nav-list-link">BGP</a></li><li class="nav-list-item"><a href="/note/network/03-router.html" class="nav-list-link">Router</a></li><li class="nav-list-item"><a href="/note/network/04-switch.html" class="nav-list-link">Switch</a></li><li class="nav-list-item"><a href="/note/network/05-vxlan.html" class="nav-list-link">VXLAN</a></li><li class="nav-list-item"><a href="/note/network/06-static-route.html" class="nav-list-link">Static Route</a></li><li class="nav-list-item"><a href="/note/network/07-dns.html" class="nav-list-link">DNS</a></li><li class="nav-list-item"><a href="/note/network/08-data-plane-and-control-plane.html" class="nav-list-link">Data Plane 與 Control Plane</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Linux submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/linux/README.html" class="nav-list-link">Linux</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/linux/01-lsof.html" class="nav-list-link">lsof (list open files) 指令</a></li><li class="nav-list-item"><a href="/note/linux/02-ss.html" class="nav-list-link">簡單介紹 ss 指令</a></li><li class="nav-list-item"><a href="/note/linux/03-ram-disk.html" class="nav-list-link">在 Linux 中建立記憶體硬碟</a></li><li class="nav-list-item"><a href="/note/linux/04-file-and-directory-permission.html" class="nav-list-link">檔案與資料夾權限</a></li><li class="nav-list-item"><a href="/note/linux/05-last.html" class="nav-list-link">last 指令</a></li><li class="nav-list-item"><a href="/note/linux/06-disk-command.html" class="nav-list-link">使用 df 指令找出哪個資料夾佔據大量的硬碟空間</a></li><li class="nav-list-item"><a href="/note/linux/07-sockets.html" class="nav-list-link">什麼是 Sockets</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Windows submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/windows/README.html" class="nav-list-link">Windows</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/windows/01-development-setup.html" class="nav-list-link">設定 windows 開發環境</a></li><li class="nav-list-item"><a href="/note/windows/02-set-alias.html" class="nav-list-link">設定指令的 Alias</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Database submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/database/README.html" class="nav-list-link">Database</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/database/01-master-data-and-transcation-data.html" class="nav-list-link">Master Data (主資料) and Transaction Data (交易資料)</a></li><li class="nav-list-item"><a href="/note/database/02-generated-columns.html" class="nav-list-link">Generated Columns</a></li><li class="nav-list-item"><a href="/note/database/03-slotted-counter-pattern.html" class="nav-list-link">Slotted Counter Pattern</a></li><li class="nav-list-item"><a href="/note/database/04-migrate-to-postgresql.html" class="nav-list-link">從 MySQL 搬家到 PostgreSQL</a></li><li class="nav-list-item"><a href="/note/database/05-languages.html" class="nav-list-link">資料庫中的各種語句</a></li><li class="nav-list-item"><a href="/note/database/06-check.html" class="nav-list-link">Check</a></li><li class="nav-list-item"><a href="/note/database/07-foreign-key.html" class="nav-list-link">MySQL、SQLite 與 PostgreSQL 在加上 Foreign Key 上的差異。</a></li><li class="nav-list-item"><a href="/note/database/08-isolation-level.html" class="nav-list-link">Isolation Level</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="PHP submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/php/README.html" class="nav-list-link">PHP</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/php/01-swoole-confuse.html" class="nav-list-link">Swoole 的疑惑</a></li><li class="nav-list-item"><a href="/note/php/02-deploy-laravel-on-ubuntu.html" class="nav-list-link">在 Ubuntu 上面部署 Laravel</a></li><li class="nav-list-item"><a href="/note/php/03-joomla-xss-study.html" class="nav-list-link">Joomla! XSS 漏洞研究</a></li><li class="nav-list-item"><a href="/note/php/04-shell-exec.html" class="nav-list-link">Shell Exec</a></li><li class="nav-list-item"><a href="/note/php/05-install-php.html" class="nav-list-link">安裝 PHP</a></li><li class="nav-list-item"><a href="/note/php/06-install-local-packages.html" class="nav-list-link">安裝本地環境上的 Composer 套件</a></li><li class="nav-list-item"><a href="/note/php/07-property-hook.html" class="nav-list-link">簡單介紹 PHP 8.4 的屬性掛鉤</a></li><li class="nav-list-item"><a href="/note/php/08-phpstorm.html" class="nav-list-link">PHPStorm</a></li><li class="nav-list-item"><a href="/note/php/09-html-sanitizer-introduce.html" class="nav-list-link">使用 HTML Sanitizer 來過濾不安全的 HTML 內容</a></li><li class="nav-list-item"><a href="/note/php/10-is-the-static-method-really-hard-to-test.html" class="nav-list-link">PHP 的靜態方法難以測試?</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Pest submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/pest/README.html" class="nav-list-link">Pest</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/pest/01-installation-and-setup.html" class="nav-list-link">安裝與設定 Pest</a></li><li class="nav-list-item"><a href="/note/pest/02-ide-plugin.html" class="nav-list-link">IDE Plugin</a></li><li class="nav-list-item"><a href="/note/pest/03-lifecycle-hooks.html" class="nav-list-link">Pest 提供的 Lifecycle Hook 方法</a></li><li class="nav-list-item"><a href="/note/pest/04-refreash-database-trait.html" class="nav-list-link">使用 RefreshDatabase Trait 重置資料庫</a></li><li class="nav-list-item"><a href="/note/pest/05-custom-function.html" class="nav-list-link">定義自己的方法</a></li><li class="nav-list-item"><a href="/note/pest/06-faker.html" class="nav-list-link">使用 Faker 產生假資料</a></li><li class="nav-list-item"><a href="/note/pest/07-expectations.html" class="nav-list-link">優雅的 Expect API</a></li><li class="nav-list-item"><a href="/note/pest/08-datasets.html" class="nav-list-link">使用 Datasets 測試多組資料</a></li><li class="nav-list-item"><a href="/note/pest/09-groups.html" class="nav-list-link">使用 Group 幫測試建立群組</a></li><li class="nav-list-item"><a href="/note/pest/10-exception.html" class="nav-list-link">斷定是否會拋出例外 (Exception)</a></li><li class="nav-list-item"><a href="/note/pest/11-skip.html" class="nav-list-link">使用 Skip 根據情況跳過測試</a></li><li class="nav-list-item"><a href="/note/pest/12-code-coverage.html" class="nav-list-link">查看測試覆蓋度 (Code Coverage)</a></li><li class="nav-list-item"><a href="/note/pest/13-parallel.html" class="nav-list-link">Parallel</a></li><li class="nav-list-item"><a href="/note/pest/14-browser-testing.html" class="nav-list-link">瀏覽器測試 (Browser Testing)</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Laravel submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/laravel/README.html" class="nav-list-link">Laravel</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/laravel/01-livewire-important-point.html" class="nav-list-link">使用 Livewire 時應該注意的幾個問題</a></li><li class="nav-list-item"><a href="/note/laravel/02-upgrade-to-livewire-v3.html" class="nav-list-link">Livewire 升級到 v3 的筆記</a></li><li class="nav-list-item"><a href="/note/laravel/03-login-with-passkey.html" class="nav-list-link">在 Laravel 中實作密碼金鑰登入</a></li><li class="nav-list-item"><a href="/note/laravel/04-history-encryption-in-inertia.html" class="nav-list-link">在 Inertia.js 中防止登出後返回敏感頁面</a></li><li class="nav-list-item"><a href="/note/laravel/05-defensive-laravel.html" class="nav-list-link">防禦性 Laravel 開發</a></li><li class="nav-list-item"><a href="/note/laravel/06-laravel-pennant.html" class="nav-list-link">Laravel Pennant</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Python submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/python/README.html" class="nav-list-link">Python</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/python/01-pdm.html" class="nav-list-link">PDM</a></li><li class="nav-list-item"><a href="/note/python/02-serial-number.html" class="nav-list-link">從憑證取得 Serial Number</a></li><li class="nav-list-item"><a href="/note/python/03-json-schema.html" class="nav-list-link">JSON Schema</a></li><li class="nav-list-item"><a href="/note/python/04-uv.html" class="nav-list-link">uv Package Manager Note</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Rust submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/rust/README.html" class="nav-list-link">Rust</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/rust/01-cargo-usage.html" class="nav-list-link">Cargo 筆記</a></li><li class="nav-list-item"><a href="/note/rust/02-variable.html" class="nav-list-link">變數</a></li><li class="nav-list-item"><a href="/note/rust/03-data-type.html" class="nav-list-link">數據類型</a></li><li class="nav-list-item"><a href="/note/rust/04-function.html" class="nav-list-link">函式</a></li><li class="nav-list-item"><a href="/note/rust/05-comment.html" class="nav-list-link">註解</a></li><li class="nav-list-item"><a href="/note/rust/06-control-flow.html" class="nav-list-link">控制流</a></li><li class="nav-list-item"><a href="/note/rust/07-ownership.html" class="nav-list-link">所有權 (Ownership)</a></li><li class="nav-list-item"><a href="/note/rust/08-references-and-borrowing.html" class="nav-list-link">引用與借用 (References and Borrowing)</a></li><li class="nav-list-item"><a href="/note/rust/09-slice.html" class="nav-list-link">Slice</a></li><li class="nav-list-item"><a href="/note/rust/10-struct.html" class="nav-list-link">struct (結構體)</a></li><li class="nav-list-item"><a href="/note/rust/11-struct-example.html" class="nav-list-link">寫一個使用 struct 的範例程式</a></li><li class="nav-list-item"><a href="/note/rust/12-method-syntax.html" class="nav-list-link">方法語法</a></li><li class="nav-list-item"><a href="/note/rust/13-enum.html" class="nav-list-link">列舉 (Enum)</a></li><li class="nav-list-item"><a href="/note/rust/14-match.html" class="nav-list-link">match 控制流運算符</a></li><li class="nav-list-item"><a href="/note/rust/15-if-let.html" class="nav-list-link">if let 簡潔控制流</a></li><li class="nav-list-item"><a href="/note/rust/16-package-and-crates.html" class="nav-list-link">Packages 與 Crates</a></li><li class="nav-list-item"><a href="/note/rust/17-defining-modules-to-control-scope-and-privacy.html" class="nav-list-link">定義模組 (Modules) 來控制作用域 (Scope) 與私有性 (Privacy)</a></li><li class="nav-list-item"><a href="/note/rust/18-paths-for-referring-to-an-item-in-the-module-tree.html" class="nav-list-link">Paths for Referring to an Item in the Module Tree</a></li><li class="nav-list-item"><a href="/note/rust/19-bringing-paths-into-scope-with-the-use-keyword.html" class="nav-list-link">Bringing Paths into Scope with the use Keyword</a></li><li class="nav-list-item"><a href="/note/rust/20-separating-modules-into-different-files.html" class="nav-list-link">Separating Modules into Different Files</a></li><li class="nav-list-item"><a href="/note/rust/21-common-collection.html" class="nav-list-link">通用集合類型</a></li><li class="nav-list-item"><a href="/note/rust/22-vector.html" class="nav-list-link">Vector</a></li><li class="nav-list-item"><a href="/note/rust/23-string.html" class="nav-list-link">String</a></li><li class="nav-list-item"><a href="/note/rust/24-hash-map.html" class="nav-list-link">Hash Map</a></li><li class="nav-list-item"><a href="/note/rust/25-error-handling.html" class="nav-list-link">Error Handling</a></li><li class="nav-list-item"><a href="/note/rust/26-result.html" class="nav-list-link">Result 與可恢復錯誤</a></li><li class="nav-list-item"><a href="/note/rust/27-panic-or-not-panic.html" class="nav-list-link">什麼時候使用 panic!?什麼時候使用 Result?</a></li><li class="nav-list-item"><a href="/note/rust/28-generics-trait-and-lifecycle.html" class="nav-list-link">Generic、Traits 與 Lifetimes</a></li><li class="nav-list-item"><a href="/note/rust/29-trait.html" class="nav-list-link">Trait</a></li><li class="nav-list-item"><a href="/note/rust/30-lifecycle.html" class="nav-list-link">生命週期與引用有效性</a></li><li class="nav-list-item"><a href="/note/rust/31-writing-test.html" class="nav-list-link">如何寫測試</a></li><li class="nav-list-item"><a href="/note/rust/32-control-how-tests-are-run.html" class="nav-list-link">控制程式如何執行</a></li><li class="nav-list-item"><a href="/note/rust/33-test-orgnization.html" class="nav-list-link">Test Organization</a></li><li class="nav-list-item"><a href="/note/rust/34-closure.html" class="nav-list-link">Closures</a></li><li class="nav-list-item"><a href="/note/rust/35-iterator.html" class="nav-list-link">疊代器</a></li><li class="nav-list-item"><a href="/note/rust/36-thiserror.html" class="nav-list-link">thiserror</a></li><li class="nav-list-item"><a href="/note/rust/37-box.html" class="nav-list-link">使用 Box&lt;T&gt; 指向堆積上的資料</a></li><li class="nav-list-item"><a href="/note/rust/38-deref.html" class="nav-list-link">透過 Deref (解參考) 取得指標追蹤的值</a></li><li class="nav-list-item"><a href="/note/rust/39-drop.html" class="nav-list-link">Drop</a></li><li class="nav-list-item"><a href="/note/rust/40-reference-counted-smart-pointer.html" class="nav-list-link">Rc&lt;T&gt; 參考計數智慧指標</a></li><li class="nav-list-item"><a href="/note/rust/41-interior-mutability-pattern.html" class="nav-list-link">RefCell&lt;T&gt; 與內部可變性模式</a></li><li class="nav-list-item"><a href="/note/rust/42-tips.html" class="nav-list-link">Rust Tips</a></li><li class="nav-list-item"><a href="/note/rust/43-io.html" class="nav-list-link">IO 操作</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Svelte submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/svelte/README.html" class="nav-list-link">Svelte</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/svelte/01-reactivity.html" class="nav-list-link">Svelte 5 的即時反應 (Reactivity)</a></li><li class="nav-list-item"><a href="/note/svelte/02-props.html" class="nav-list-link">Props</a></li><li class="nav-list-item"><a href="/note/svelte/03-logic.html" class="nav-list-link">Logic</a></li><li class="nav-list-item"><a href="/note/svelte/04-events.html" class="nav-list-link">Events</a></li><li class="nav-list-item"><a href="/note/svelte/05-bind.html" class="nav-list-link">Bind</a></li><li class="nav-list-item"><a href="/note/svelte/06-lifecycle.html" class="nav-list-link">Lifecycle</a></li><li class="nav-list-item"><a href="/note/svelte/07-stores.html" class="nav-list-link">Stores</a></li><li class="nav-list-item"><a href="/note/svelte/08-motion.html" class="nav-list-link">Motion (動態效果)</a></li><li class="nav-list-item"><a href="/note/svelte/09-transition.html" class="nav-list-link">Transition</a></li><li class="nav-list-item"><a href="/note/svelte/10-animations.html" class="nav-list-link">Animations</a></li><li class="nav-list-item"><a href="/note/svelte/11-actions.html" class="nav-list-link">Actions</a></li><li class="nav-list-item"><a href="/note/svelte/12-advanced-bindings.html" class="nav-list-link">Advanced-bindings</a></li><li class="nav-list-item"><a href="/note/svelte/13-classes-and-styles.html" class="nav-list-link">Classes and Styles</a></li><li class="nav-list-item"><a href="/note/svelte/14-component-composition.html" class="nav-list-link">Component Composition</a></li><li class="nav-list-item"><a href="/note/svelte/15-context-api.html" class="nav-list-link">Context API</a></li><li class="nav-list-item"><a href="/note/svelte/16-special-elements.html" class="nav-list-link">Special Elements</a></li><li class="nav-list-item"><a href="/note/svelte/17-module-context.html" class="nav-list-link">Module Context</a></li><li class="nav-list-item"><a href="/note/svelte/18-miscellaneous.html" class="nav-list-link">Miscellaneous</a></li><li class="nav-list-item"><a href="/note/svelte/19-webstorm-settings.html" class="nav-list-link">WebStorm IDE 設定</a></li><li class="nav-list-item"><a href="/note/svelte/20-global-state.html" class="nav-list-link">Global state</a></li><li class="nav-list-item"><a href="/note/svelte/21-forwarding-attributes.html" class="nav-list-link">Forwarding Attributes</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Git submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/git/README.html" class="nav-list-link">Git</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/git/01-config.html" class="nav-list-link">Config</a></li><li class="nav-list-item"><a href="/note/git/02-stash.html" class="nav-list-link">使用 Stash 來暫存目前的變更</a></li><li class="nav-list-item"><a href="/note/git/03-angular-commit-message-format.html" class="nav-list-link">Angular Commit Message Format</a></li><li class="nav-list-item"><a href="/note/git/04-reset.html" class="nav-list-link">Reset</a></li><li class="nav-list-item"><a href="/note/git/05-revert.html" class="nav-list-link">Revert</a></li><li class="nav-list-item"><a href="/note/git/06-update-from-original-repo.html" class="nav-list-link">跟上原始專案的更新</a></li><li class="nav-list-item"><a href="/note/git/07-revert-merged-commit.html" class="nav-list-link">Revert 合併後的修改提交</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Vim submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/vim/README.html" class="nav-list-link">Vim</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/vim/01-shortcut.html" class="nav-list-link">Shortcut</a></li><li class="nav-list-item"><a href="/note/vim/02-console.html" class="nav-list-link">指令</a></li><li class="nav-list-item"><a href="/note/vim/03-map.html" class="nav-list-link">Map</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Warp submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/warp/README.html" class="nav-list-link">Warp</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/warp/01-install.html" class="nav-list-link">安裝 Warp</a></li><li class="nav-list-item"><a href="/note/warp/02-theme.html" class="nav-list-link">修改主題</a></li><li class="nav-list-item"><a href="/note/warp/03-feature.html" class="nav-list-link">Warp 相關功能</a></li><li class="nav-list-item"><a href="/note/warp/04-starship-integration.html" class="nav-list-link">整合 Starship</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Tailwind CSS submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/tailwind-css/README.html" class="nav-list-link">Tailwind CSS</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/tailwind-css/01-rounding-corners-tips.html" class="nav-list-link">利用科學與 CSS 變數來設定邊框圓角</a></li><li class="nav-list-item"><a href="/note/tailwind-css/02-make-button-bigger-in-mobile.html" class="nav-list-link">讓按鈕在移動設備上更大一些</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Web submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/web/README.html" class="nav-list-link">Web</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/web/01-passkey.html" class="nav-list-link">密碼金鑰?</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="TypeScript submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/typescript/README.html" class="nav-list-link">TypeScript</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/typescript/01-publish-package-to-npm.html" class="nav-list-link">發佈一個由 TypeScript 寫成的套件</a></li><li class="nav-list-item"><a href="/note/typescript/02-interface-vs-type.html" class="nav-list-link">Interface 與 Type 在 TypeScript 中的差異</a></li><li class="nav-list-item"><a href="/note/typescript/03-event-concept.html" class="nav-list-link">事件概念</a></li><li class="nav-list-item"><a href="/note/typescript/04-create-a-modal.html" class="nav-list-link">用 TypeScript 來寫個互動視窗</a></li><li class="nav-list-item"><a href="/note/typescript/05-trigger-css-animation.html" class="nav-list-link">觸發互動視窗的 CSS 轉場動畫</a></li><li class="nav-list-item"><a href="/note/typescript/06-debounce-helper.html" class="nav-list-link">使用 TypeScript 實作防抖函式 (Debounce Function)</a></li><li class="nav-list-item"><a href="/note/typescript/07-utility-types.html" class="nav-list-link">Utility Types in TypeScript</a></li><li class="nav-list-item"><a href="/note/typescript/08-use-shiki-js-to-highlight-code.html" class="nav-list-link">使用 Shiki.js 對程式碼著色</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Fluent Bit submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/fluent-bit/README.html" class="nav-list-link">Fluent Bit</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/fluent-bit/01-send-log-to-the-cloud.html" class="nav-list-link">將容器日誌發送到雲端</a></li><li class="nav-list-item"><a href="/note/fluent-bit/02-buffering-and-storage.html" class="nav-list-link">緩衝與儲存</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Zed submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/zed/README.html" class="nav-list-link">Zed</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/zed/01-init-settings.html" class="nav-list-link">Zed 設定</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Fitness submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/fitness/README.html" class="nav-list-link">Fitness</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/fitness/01-fat-loss.html" class="nav-list-link">減脂</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Cloudflare submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/note/cloudflare/README.html" class="nav-list-link">Cloudflare</a><ul class="nav-list"><li class="nav-list-item"><a href="/note/cloudflare/01-november-2025-outage.html" class="nav-list-link">Cloudflare 2025-11 全球性故障案例研究</a></li></ul></li><li class="nav-list-item"><a href="/note/php/02-static-analysis.html" class="nav-list-link">Static Analysis</a></li><li class="nav-list-item"><a href="/note/" class="nav-list-link">個人學習筆記</a></li></ul>
  
</nav>


<div class="d-md-block d-none">
  
  
    <div class="site-footer">
      This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
    </div>
  
  </div>
</header>

  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
  
    

<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Allen's Note" autocomplete="off">
    <label for="search-input" class="search-label">
      <span class="sr-only">Search Allen's Note</span>
      <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
    </label>
  </div>
  <div id="search-results" class="search-results"></div>
</div>

  
  
  
</div>

    <div class="main-content-wrap">
      <nav aria-label="Breadcrumb" class="breadcrumb-nav">
  <ol class="breadcrumb-nav-list">
    <li class="breadcrumb-nav-list-item"><a href="/note/rust/README.html">Rust</a></li>
    <li class="breadcrumb-nav-list-item"><span>struct (結構體)</span></li>
  </ol>
</nav>


      <div id="main-content" class="main-content">
        <main>
          
            <h1 id="struct-結構體">
  
  
    <a href="#struct-結構體" class="anchor-heading" aria-labelledby="struct-結構體"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> struct (結構體)
  
  
</h1>
    

<p>struct 或者稱 structure,是一個自定義的資料類型,允許你命名和包裝多個相關的值,形成一個有意義的組合。</p>

<p>struct 可以定義方法與關連函式來指定與 struct 資料相關的行為。</p>

<p>在程式碼中基於 struct 與枚舉 (enum) 創建新類型,可以充分利用 Rust 的編譯時檢查。</p>
<h2 id="定義結構體">
  
  
    <a href="#定義結構體" class="anchor-heading" aria-labelledby="定義結構體"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 定義結構體
  
  
</h2>
    

<p>和元組一樣,<strong>struct 中的每一個部分都可以是不同的類型,但需要明確定義</strong>。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">struct</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">username</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span>
    <span class="n">email</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="nb">u64</span><span class="p">,</span>
    <span class="n">active</span><span class="p">:</span> <span class="nb">bool</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>

<p>struct 定義好之後就可以創建實例。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">user1</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">email</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someone@example.com"</span><span class="p">),</span>
    <span class="n">username</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someone"</span><span class="p">),</span>
    <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>

<p>如果要取得實例中的某個值,可以使用 <code class="language-plaintext highlighter-rouge">.</code>,例如 <code class="language-plaintext highlighter-rouge">user1.email</code>。如果想要修改實例中的某個值,也可以使用如下的方式。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">user1</span><span class="py">.email</span> <span class="o">=</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"another@example.com"</span><span class="p">);</span>
</code></pre></div></div>

<p><strong>注意如果要這樣使用,整個實例必須是可變的</strong>,也就是必須使用 <code class="language-plaintext highlighter-rouge">let mut</code> 宣告。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="k">mut</span> <span class="n">user1</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">email</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someone@example.com"</span><span class="p">),</span>
    <span class="n">username</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someone"</span><span class="p">),</span>
    <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>

<p>我們也可以使用一個函式來建立實體。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">build_user</span><span class="p">(</span><span class="n">email</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span> <span class="n">username</span><span class="p">:</span> <span class="nb">String</span><span class="p">)</span> <span class="k">-&gt;</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">User</span> <span class="p">{</span>
        <span class="n">email</span><span class="p">:</span> <span class="n">email</span><span class="p">,</span>
        <span class="n">username</span><span class="p">:</span> <span class="n">username</span><span class="p">,</span>
        <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
        <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="變數名稱與-struct-key-值相同的簡單寫法">
  
  
    <a href="#變數名稱與-struct-key-值相同的簡單寫法" class="anchor-heading" aria-labelledby="變數名稱與-struct-key-值相同的簡單寫法"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 變數名稱與 struct key 值相同的簡單寫法
  
  
</h2>
    

<p>重複寫 struct 中的的 key 值可能有些囉嗦,當函式的參數名稱與 key 值相同,Rust 允許下方這種更方便的寫法。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">build_user</span><span class="p">(</span><span class="n">email</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span> <span class="n">username</span><span class="p">:</span> <span class="nb">String</span><span class="p">)</span> <span class="k">-&gt;</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">User</span> <span class="p">{</span>
        <span class="n">email</span><span class="p">,</span>
        <span class="n">username</span><span class="p">,</span>
        <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
        <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="使用更新語法從其他實例建立新實例">
  
  
    <a href="#使用更新語法從其他實例建立新實例" class="anchor-heading" aria-labelledby="使用更新語法從其他實例建立新實例"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 使用更新語法從其他實例建立新實例
  
  
</h2>
    

<p>我們可以使用舊實例的部分值來建立新的實例。</p>

<p>下方的例子展示了不使用更新語法的方式。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">user1</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">email</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someone@example.com"</span><span class="p">),</span>
    <span class="n">username</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"someusername123"</span><span class="p">),</span>
    <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="p">};</span>

<span class="k">let</span> <span class="n">user2</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">email</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"another@example.com"</span><span class="p">),</span>
    <span class="n">username</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"anotherusername567"</span><span class="p">),</span>
    <span class="n">active</span><span class="p">:</span> <span class="n">user1</span><span class="py">.active</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="n">user1</span><span class="py">.sign_in_count</span><span class="p">,</span>
<span class="p">};</span>
</code></pre></div></div>

<p>我們可以使用 <code class="language-plaintext highlighter-rouge">..</code> 來指定剩餘未設置值的部分使用 <code class="language-plaintext highlighter-rouge">user1</code> 的值。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">user2</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">email</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"another@example.com"</span><span class="p">),</span>
    <span class="n">username</span><span class="p">:</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"another@example.com"</span><span class="p">),</span>
    <span class="o">..</span><span class="n">user1</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="使用非字串-key-的元組結構體">
  
  
    <a href="#使用非字串-key-的元組結構體" class="anchor-heading" aria-labelledby="使用非字串-key-的元組結構體"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 使用非字串 key 的元組結構體
  
  
</h2>
    

<p>可以定義與元組 (tuple) 類似的元組結構體 (tuple structs)。</p>

<p>當你想給元組取一個名字,卻又不想要幫每個元素都命名 key 值,這種 struct 十分實用。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">struct</span> <span class="nf">Color</span><span class="p">(</span><span class="nb">i32</span><span class="p">,</span> <span class="nb">i32</span><span class="p">,</span> <span class="nb">i32</span><span class="p">);</span>
<span class="k">struct</span> <span class="nf">Point</span><span class="p">(</span><span class="nb">i32</span><span class="p">,</span> <span class="nb">i32</span><span class="p">,</span> <span class="nb">i32</span><span class="p">);</span>

<span class="k">let</span> <span class="n">black</span> <span class="o">=</span> <span class="nf">Color</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="k">let</span> <span class="n">origin</span> <span class="o">=</span> <span class="nf">Point</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
</code></pre></div></div>

<blockquote>
  <p>[!IMPORTANT]</p>

  <p>注意 black 與 origin 雖然組成方式一樣,但他們是不同的類型。</p>
</blockquote>
<h2 id="沒有任何字段的類單元結構體-unit-like-structs">
  
  
    <a href="#沒有任何字段的類單元結構體-unit-like-structs" class="anchor-heading" aria-labelledby="沒有任何字段的類單元結構體-unit-like-structs"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 沒有任何字段的類單元結構體 (unit-like structs)
  
  
</h2>
    

<p>我們也可以定義一個沒有任何字段的類單元結構體,類似於 <code class="language-plaintext highlighter-rouge">()</code>。</p>

<p>類單元結構體常常在你想要在某個類型上實現 trait 但不需要在類型中存儲數據的時候發揮作用。</p>
<h2 id="結構體資料的所有權">
  
  
    <a href="#結構體資料的所有權" class="anchor-heading" aria-labelledby="結構體資料的所有權"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 結構體資料的所有權
  
  
</h2>
    

<p>在剛剛的 <code class="language-plaintext highlighter-rouge">User</code> 結構體中,使用 <code class="language-plaintext highlighter-rouge">String</code> 而不是 <code class="language-plaintext highlighter-rouge">&amp;str</code> 字符串 slice 類型,這是一個有意而為之的選擇。
因為我們想要這個結構體擁有它所有的資料,只要整個結構體是有效的話其資料也是有效的。</p>

<p>雖然可以在結構體中包含引用,這這會需要用上生命週期 (lifetimes)。</p>

<div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">struct</span> <span class="n">User</span> <span class="p">{</span>
    <span class="n">username</span><span class="p">:</span> <span class="o">&amp;</span><span class="nb">str</span><span class="p">,</span>
    <span class="n">email</span><span class="p">:</span> <span class="o">&amp;</span><span class="nb">str</span><span class="p">,</span>
    <span class="n">sign_in_count</span><span class="p">:</span> <span class="nb">u64</span><span class="p">,</span>
    <span class="n">active</span><span class="p">:</span> <span class="nb">bool</span><span class="p">,</span>
<span class="p">}</span>

<span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">let</span> <span class="n">user1</span> <span class="o">=</span> <span class="n">User</span> <span class="p">{</span>
        <span class="n">email</span><span class="p">:</span> <span class="s">"someone@example.com"</span><span class="p">,</span>
        <span class="n">username</span><span class="p">:</span> <span class="s">"someusername123"</span><span class="p">,</span>
        <span class="n">active</span><span class="p">:</span> <span class="k">true</span><span class="p">,</span>
        <span class="n">sign_in_count</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>

<p>這裡編譯器會告訴你他需要生命週期標示符。</p>

<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>error[E0106]: missing lifetime specifier
 --&gt;
  |
2 |     username: &amp;str,
  |               ^ expected lifetime parameter

error[E0106]: missing lifetime specifier
 --&gt;
  |
3 |     email: &amp;str,
  |            ^ expected lifetime parameter
</code></pre></div></div>

          

          
            
          
        </main>
        
<hr>
<footer>
  

  

  <div class="d-md-none">
    
    
      <div class="mt-4 fs-2">
        This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
      </div>
    
  </div>
</footer>

      </div>
    </div>
    
      

<div class="search-overlay"></div>

    
  </div>

  
</body>
</html>

>
    Hover me
</button>

This site uses Just the Docs, a documentation theme for Jekyll.