## 简介

`display` 属性是 `CSS1` 规范中引入的，该规范最早发布于 1996 年。这意味着自从 CSS 的诞生之初，`display` 属性就一直存在。在 `CSS1` 中，`display` 属性的作用是控制元素在文档中的显示方式，这对于页面布局和样式设计非常重要。

随着 `CSS` 的不断发展，`display` 属性的功能也得到了扩展，新的取值不断被添加进来，例如 `Flexbox` 和 `Grid` 布局模型的引入，使得开发者可以更加灵活地控制页面布局。到目前为止，`display` 属性仍然是 `CSS` 中的一个核心属性，被广泛应用于网页开发中。



## `dispaly`的值

以下是 `display` 属性的一些常见取值：

- `none`: 元素不会被显示，并且在文档布局中不占据空间。
- `block`: 元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。
- `inline`: 元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。
- `inline-block`: 元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。
- `table`: 元素呈现为表格元素，可以将其作为表格布局的一部分来使用。
- `table-cell`: 元素作为表格单元格显示。
- `table-row`: 元素作为表格行显示。
- `inline-table`: 元素作为内联表格显示。
- `list-item`: 元素作为列表项显示，常用于 `<li>` 元素。
- `inherit`: 继承父元素的 display 属性值。

### 最常用的值

- `block`: 将元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。常见的默认块级元素包括 `<div>`、`<p>`、`<h1>` 等。
- `inline`: 将元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。常见的默认内联元素包括 `<span>`、`<a>`、`<strong>` 等。
- `inline-block`: 将元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。常用于创建水平排列的块级元素。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。可以使用一系列属性来控制子元素的布局，例如 `justify-content`、`align-items` 等。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。通过设置网格列和行，可以灵活地控制子元素的布局。

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

CSS的display有哪些值？

## 简介

本文用于记录 `Go` 语言的轻量级Web框架 `Gin` 的基本使用。

接下来老狗将从零开始搭建一个简单的项目环境，然后使用 `Gin` 编写一些Web服务器相关代码，包括创建服务、Token拦截、参数接收等基本操作。

注意：在进行下面的操作前，请保证你已经正确安装和配置 `Golang` 的开发环境。



## 创建项目

### 创建文件夹

```bash
# 创建文件夹
mkdir gin-server
# 进入文件夹
cd gin-server
```
> PS：也可以用鼠标操作

### 初始化项目

```bash
# 在 gin-server 文件夹内，用命令行终端运行：
go mod init gin-server
```
> 使用 `go mod` 初始化 `gin-server` 项目，成功后，会出现提示：`go: creating new go.mod: module gin-server` ，并且 `gin-server` 文件夹内会出现 `go.mod`文件。

### 安装`gin`

```bash
# 用命令行终端运行：
go get github.com/gin-gonic/gin
```
> 该命令将下载 `gin` 相关代码包

### 创建入口文件

> 在 `gin-server` 文件夹内创建 `main.go` 文件，并填入以下代码：

```go
// go语言规范，必须程序入口必须是在 package main 包内
package main

// 引用 fmt 和 gin
import (
	"fmt"
	"github.com/gin-gonic/gin"
)

func main() {
        // 创建路由
	router := gin.Default()
        
        // 路由分组
	api := router.Group("/gin")
        // 开放接口
	api.GET("/hello", hello)
        
        // 以上两行代码相当于：router.GET("/gin/hello", hello)

        // 启动服务并设置端口为 8080
	err := router.Run(":8080")
	if err != nil {
		fmt.Println("Error: ", err)
	}
}

// 接口参数必须是 c *gin.Context
func hello(c *gin.Context) {
	fmt.Println("hello gin")
}
```

## 运行测试

通过以上操作，你已经使用 `gin` 创建了一个最基础的 `web` 服务，并开放了一个 `/gin/hello` 接口。

### 运行

```bash
# 在gin-server文件夹内，用命令行终端运行：
go run main.go
```

运行成功后，会出现相应日志：
```console
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
 - using env:   export GIN_MODE=release
 - using code:  gin.SetMode(gin.ReleaseMode)

[GIN-debug] GET    /gin/hello                --> main.hello (3 handlers)
[GIN-debug] [WARNING] You trusted all proxies, this is NOT safe. We recommend you to set a value.
Please check https://pkg.go.dev/github.com/gin-gonic/gin#readme-don-t-trust-all-proxies for details.
[GIN-debug] Listening and serving HTTP on :8080
```
根据提示，已经开发地址为 `/gin/hello` 的 `GET` 接口，且端口为 `8080`。

**注意：启动成功后不要关闭该终端，否则将会关闭该服务！**

### 测试

可以通过浏览器输入地址 `http://localhost:8080/gin/hello` 发送请求，也可以使用命令行 `curl` 工具发送请求：

```bash
# 在任意地方再开一个命令行终端，并运行：
curl http://localhost:8080/gin/hello
```

请求发送后，查看原来启动 服务的终端窗口，可以看到输出：

```bash
hello gin
[GIN] 2024/04/04 - 12:06:09 |[97;42m 200 [0m|            0s |             ::1 |[97;44m GET     [0m "/gin/hello"
```

其中输出 `hello gin` 则可认为接口成功。

## 总结

1. 本文运行、测试等操作都建议使用命令行来完成；
2. `go mod` 是 Go 语言提供的依赖管理工具，用于管理 Go 项目的依赖关系和版本信息；
3. `router := gin.Default()` 用于创建接口根节点；
4. `api := router.Group("/gin")` 用于创建 `router` 的下级节点，可以一层层向下扩展节点。

通过本文的学习，你已经搭建了一个最简单的Http服务，下一篇，将介绍一下接口封装：【[Go语言框架Gin基础教程二：接口封装](https://oldmoon.top/post/gin2)】

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

Go语言框架Gin基础教程一：创建项目

## 简介

本文主要介绍了一些性能分析工具，和一些 `Vue` 项目的优化方式。

如 `Chrome` 浏览器自带的`LightHouse` 分析工具、`rollup` 分析工具等等。



## 性能优化

### LightHouse页面分析

我们可以使用谷歌浏览器自带的 `DevTools` 中的 `LightHouse` 进行性能分析：

开始分析：
![1](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135072100.png)

分析结果：
![2](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135065105.png)

#### 参数介绍

从 `Performance` 页的表现结果来看，得分 `37`，并提供了很多的时间信息，我们来解释下这些选项代表的意思：
- `FCP` (First Contentful Paint)：首次内容绘制的时间，浏览器第一次绘制DOM相关的内容，也是用户第一次看到页面内容的时间。
- `Speed Index`: 页面各个可见部分的显示平均时间，当我们的页面上存在轮播图或者需要从后端获取内容加载时，这个数据会被影响到。
- `LCP` (Largest Contentful Paint)：最大内容绘制时间，页面最大的元素绘制完成的时间。
- `TTI`（Time to Interactive）：从页面开始渲染到用户可以与页面进行交互的时间，内容必须渲染完毕，交互元素绑定的事件已经注册完成。
- `TBT`（Total Blocking Time）：记录了首次内容绘制到用户可交互之间的时间，这段时间内，主进程被阻塞，会阻碍用户的交互，页面点击无反应。
- `CLS`（Cumulative Layout Shift）：计算布局偏移值得分，会比较两次渲染帧的内容偏移情况，可能导致用户想点击A按钮，但下一帧中，A按钮被挤到旁边，导致用户实际点击了B按钮。

通过以上测试指标，可以进行针对性优化。

### rollup代码分析

由于我们使用的是 `vite`，`vite` 打包是基于 `rollup` 的，我们可以使用 `rollup` 的插件：
```bash
# 安装插件
npm install rollup-plugin-visualizer
```
```ts
// `vite.config.ts`配置插件，记得设置open 不然无效
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [vue(), vueJsx(),visualizer({
      open:true
 })],
```

然后进行 `npm run build` 打包，打包后会弹出分析页面，如：

![3](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135059548.png)

我在项目中使用了 `Ant Design`，分析发现这个 `UI` 库非常庞大，这时候就可以使用 `Ant Design` 的按需引入来减少包大小

### Vite 配置优化
```ts
build:{
       chunkSizeWarningLimit:2000,
       cssCodeSplit:true, //css 拆分
       sourcemap:false, //不生成sourcemap
       minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
       assetsInlineLimit:5000 //小于该值 图片将打包成Base64 
},
```

### PWA离线存储技术

```bash
npm install vite-plugin-pwa -D
```
```ts
import { VitePWA } from 'vite-plugin-pwa' 
plugins: [vue(),VitePWA(), vueJsx(),visualizer({
      open:true
})],
```
`PWA` 技术的出现就是让 `web` 网页无限接近于 `Native` 应用：
1. 可以添加到主屏幕，利用manifest实现
2. 可以实现离线缓存，利用service worker实现
3. 可以发送通知，利用service worker实现

```ts
VitePWA({
      workbox:{
          cacheId:"XIaoman",//缓存名称
          runtimeCaching:[
            {
              urlPattern:/.*\.js.*/, //缓存文件
              handler:"StaleWhileRevalidate", //重新验证时失效
              options:{
                cacheName:"XiaoMan-js", //缓存js，名称
                expiration:{
                  maxEntries:30, //缓存文件数量 LRU算法
                  maxAgeSeconds:30 * 24 * 60 * 60 //缓存有效期
 
                }
              }
            }
          ]
      },
    })
```
进行 `npm run build` 打包会生成 `sw.js`：

![4](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135081781.png)
![5](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135077569.png)

 

### 其他性能优化

#### 图片懒加载 
```bash
# 引入vue3懒加载模块
import lazyPlugin from 'vue3-lazy'
# 页面中使用懒加载
<img v-lazy="user.avatar" >
```
#### 虚拟列表

Element-Plus中的组件：
![6](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135055645.png)


#### 多线程

使用 `new Worker` 创建多线程，优化速度。

`worker` 脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相同
```ts
const myWorker1 = new Worker("./calcBox.js");
```
都使用 `postMessage` 发送消息
```ts
worker.postMessage(arrayBuffer, [arrayBuffer]);
```
都使用 `onmessage` 接收消息
```ts
self.onmessage = function (e) {
 // xxx这里是worker脚本的内容
};
```
关闭
```ts
worker.terminate();    
```

- `VueUse` 库已经集成了 `webWorker`：
![7](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135068343.png)

#### 防抖节流

- 同样` VueUse` 也是集成了：
![8](https://images.oldmoon.top/images/dingdangdog/dingdangdog1712135050716.png)

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

Vue项目打包性能分析与优化

使用 `VS Code` 创建 `Vue` 文件后，想要初始化一些代码，通过一些插件可以实现，但本文记录一个更简单的配置方式，使用 `VS Code` 的用户设置。

1. 在 `VS Code`中，点击左下角设置按钮（齿轮）
2. 选择【用户片段】（`User Snippents`），会弹出搜索框
3. 输入 `vue` 后，选择 `vue.json` 文件，会出现一个配置文件
4. 在配置文件中有一个注释示例，根据注释填入一些内容即可

下面是一个 `vue.json` 的示例，可以直接使用：

```json
{
  "Print to console": {
  // 前缀提示符，在编辑器中输入vue3可以出现提示
  "prefix": "vue3",
  "body": [
    "<template>",
    "  <div>",
    "  </div>",
    "</template>",
    "",
    "<script setup lang='ts'>",
    "",
    "</script>",
    "",
    "<style scoped>",
    "",
    "</style>"
  ],
  "description": "Log output to console"
  }
}
```

提示：以上内容中的 `prefix` 值可以自定义，`body` 是你想要初始化的内容。

以上配置完成后，在一个 `Vue` 文件中输入 `vue3`，就会出现提示，选择后就会将 `body` 的内容自动填入当前文件。

VS Code配置Vue3代码初始模板

## 引言

如果你第一次听说，可能一脸懵，在软件开发领域，有许多术语和概念，其中之一就是 “Hook”（钩子），在几年前，虽然有些人也提 “钩子” 这个词，但是也局限在很小的范围内应用，而在近几年 `Hook` 的说法越来越普及。

虽然这个术语可能对一些人来说听起来有些陌生，但它却在开发中发挥着重要作用。本文将为你介绍什么是 `Hook` ，以及 `Hook` 常见的应用场景和实现方式。



## 什么是Hook？

在软件开发中，`Hook`是一种编程机制，允许开发者在特定事件发生时插入自定义代码或逻辑。这个概念源自于英语中的 “`hook`” ，意为钩子，就像钩子可以抓住东西一样，Hook可以“抓住”特定的事件或行为，然后执行相关的操作。

### Hook与函数的区别

在软件开发中，“Hook”、“函数（Method）”和“方法（Function）”是不同的概念，它们代表了不同的设计和用途。

Hook（钩子）：
- 钩子是一种编程概念，用于在软件系统中插入自定义代码或逻辑，以便在特定事件发生时执行额外的操作。
- 钩子通常用于监听、拦截、修改或扩展系统的行为，而不需要修改原始源代码。
- 钩子可以用于各种目的，如事件处理、自定义验证、日志记录等。

函数（Method）和方法（Function）：
- 函数和方法都是用来实现特定功能的代码段。
- 函数通常是指在面向过程编程中定义的独立功能代码块，它接收输入参数并返回输出结果。
- 方法则是指在面向对象编程中定义在类或对象中的功能代码块，它可以访问类的属性和其他方法，并且通常与特定对象实例相关联。
- 函数和方法的作用类似，都是执行特定的任务或操作，但方法通常与特定的类或对象实例相关联，而函数则可以是独立的、不属于任何特定类的功能代码。

### Hook的一般应用

`Hook` 的主要用途包括但不限于以下几个方面：  
- 事件处理：监听和响应特定事件的发生，例如用户点击按钮、数据更新等。
- 拦截与修改：拦截系统的行为，并在需要时对其进行修改或扩展。
- 自定义行为：添加自定义的行为或逻辑，以满足特定的需求，例如数据验证、权限控制等。

### Hook的实现方式

`Hook` 可以以各种不同的方式实现，包括但不限于以下几种形式：
- 函数钩子：通过调用预定义的函数或方法来触发 `Hook`，通常用于监听事件或执行特定的操作。
- 消息钩子：基于消息传递机制，当系统接收到特定消息时触发 `Hook`，例如 `Windows` 操作系统中的消息钩子。
- Webhook：通过 `HTTP` 协议实现的事件通知机制，当特定事件发生时向指定的 `URL` 发送 `HTTP` 请求。

### Hook的业务场景

`Hook` 在软件开发中有着广泛的应用场景，包括但不限于以下几个方面：
- 插件系统：允许插件开发者通过 `Hook` 机制扩展或修改系统的行为，实现功能的定制和扩展。
- 监控与日志：使用 `Hook` 来监听系统的运行状态或事件，以进行监控和记录日志。
- 数据处理：在数据处理流程中使用 `Hook` 来拦截和处理数据，实现数据的验证、转换或分发。

## 总结

`Hook` 是一种强大的编程机制，为开发者提供了在不修改原始代码的情况下对系统行为进行扩展和定制的能力。通过合理的使用 `Hook` ，开发者可以实现更灵活、更可扩展的软件系统，满足不同用户的需求。因此，`Hook` 对于现代软件的开发人员来说是非常重要的一部分。

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`