国社科区块链

【国社科-区块链】烛光之窗

面试题总结

面试题、面经总结

读书笔记

读后感

我的博客预览

前端知识 | 整体了解 | 深入学习 | 复习

friend：芈渡

开发日常

如何搭建自己的个人博客

一、方案汇总

方案	平台	成本	优缺点
方案一：社区平台	- 飞书 - 语雀 - CSDN/博客园 - 其他技术社区	经济上：0 技术上：无	优点： - 方便，0成本 - 背靠社区 - 有后台管理缺点： - 比较难自定义页面
方案二：Github Pages/Vercel + Hexo/Vuepress	- Github Pages - Github + Vercel - Gitee Pages（Pro关闭了）	经济上：0 技术上：需要了解前端知识	优点： - 自定义能力强 - 主题多缺点： - 这类博客一般是纯静态网页，一般没有后台或数据统计 - 需要一定前端知识
方案三：云服务器 + Wordpress	- 云服务器 + Wordpress	经济上：需要一台云服务器（0~100/月，新用户/学生优惠）技术上：无，了解前端/后端更好	优点： - 主题多 - 有后台管理缺点： - 经济上有一定成本
方案四：微信公众号以及其他各类公众号	- 申请公众号	经济上：0 技术上：无	优点： - 方便，0成本 - 背靠社区 - 有后台管理缺点： - 比较难自定义页面

yyshino大约 3 分钟

HTML知识点

对HTML语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article、header、footer 等等标签

HTML标签的语义化

<h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
<main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
<article> 专注于单个主题的博客文章，报纸文章或网页文章。
<address> 提供了一个或多个人员或组织的联系信息。
<section> 定义文档中的节，表示HTML文档中包含的独立部分。
<aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
<footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
<hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。
<ul> 表示项目的无序列表，通常呈现为项目符号列表。
<ol> 表示项目的有序列表，通常呈现为编号列表。
<li> 表示列表中的项目。
<strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。
<em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。
<small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。
<abbr> 表示缩写或首字母缩写词。
<cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。
<figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。
<figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。
<blockquote> 定义块引用，可以使用<cite>元素提供文本表示
<mark> 表示被标记或突出显示以供参考或标记目的的文本。
<time> 表示特定的时间。
<date> 表示特定的日期。
<dfn> 用于表示在定义短语或句子的上下文中定义的术语。
<code> 计算机代码的简短片段的方式显示其内容的样式。
<samp> 输出的示例或引用的内联文本或样本文本。
<kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。
<del> 表示已从文档中删除的文本范围。
<ins> 表示已添加到文档中的文本范围。
<menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。
<dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。
<summary> 元素为<details>元素的显示框指定摘要，标题或图例。
<details> 描述文档或文档某个部分的细节。
<bdi>: 允许设置一段文本，使其脱离其父元素的文本方向设置。
<progress>: 定义任何类型的任务的进度。
<ruby>: 定义ruby注释（中文注音或字符）。
<rt>: 定义字符（中文注音或字符）的解释或发音。
<rp>: 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
<wbr>: 规定在文本中的何处适合添加换行符。
<meter>: 定义度量衡，仅用于已知最大和最小值的度量。

yyshino大约 8 分钟

Godot 入门

入门推荐

godot docs ：godot文档
learn-gdscript：快速入门 gdscript
# godot 4.x 教程 100集 ：B站视频教程，本人之后打算学习
# 2025年，独立游戏开发者必备的16款软件！：秦无邪OvO老师，本人大学期间学习过他的Unity教程，这个视频课主要介绍工具

yyshino小于 1 分钟

搜索接口调研

一、背景

背景：老板让我优化一个用户搜索接口，要求是用户搜索请假交接人时优先展示同部门的用户其次是上级和下级部门的用户最后是其他部门的用户。

二、优化方案

数据库查询优化。目前的公司内部的平台都是比较通用的查询，一些没有用的字段，也查询了。这里我去找前端沟通确定他们那边需要用到哪些字段，开发一个专用接口去进行操作。
借鉴Elasticsearch的IndexSorting技术，优化搜索性能。

并行调用与异步处理

使用CompletableFuture实现并行调用，提高接口响应速度。示例代码：

CompletableFuture<Void> task1 = CompletableFuture.runAsync(() -> {
    // 查询同部门用户
});
CompletableFuture<Void> task2 = CompletableFuture.runAsync(() -> {
    // 查询上级部门用户
});
CompletableFuture<Void> task3 = CompletableFuture.runAsync(() -> {
    // 查询下级部门用户
});
CompletableFuture.allOf(task1, task2, task3).join();

yyshino小于 1 分钟

Spring 事务

1. Spring 事务的工作原理

Spring 使用两种代理机制来管理事务：

JDK 动态代理：针对实现了接口的类，Spring 会创建一个实现了相同接口的代理类。事务逻辑通过代理类在方法调用时插入。
CGLIB 代理：针对没有实现接口的类，Spring 会使用 CGLIB 生成子类代理，拦截方法调用并插入事务逻辑。

不论哪种代理方式，Spring 都是在代理类中对事务进行管理。如果调用来自外部的类，代理对象会拦截该调用并正确地管理事务逻辑。

2. Spring 事务失效场景

yyshino大约 2 分钟

Emoji 表情报自取

😁😀😂😃😄😅😆😉😊😋😎😍😘😗😙😚🙂🤗🤔😐😑😶🙄😏😣😥😮🤐😯😪😫😴😌😛😜😝😒😓😔😕🙃🤑😲🙁😖😞😟😤😢😭😦😧😨😩😬😰😱😳😵😡😠😷🤒🤕😇🤓😈👿👹👺💀👻👽👾🤖💩😺😸😹😻😼😽🙀😿😾🙈🙉🙊👶👦👧👨👩👴👵👮💂👷👸👳👲👱👰👼🎅🙍🙎🙅🙆💁🙋🙇💆💇🚶🏃💃👯🛀🛌👤👥🏇🏂🏄🚣🏊🚴🚵👫👬👭💏💑👨👩👦💪👈👉👆🖕👇🖖🤘✋👌👍👎✊👊👋👏👐🙌🙏💅👂👃👣👀👅👄💋💘💓💔💕💖💗💙💚💛💜💝💞💟💌💤💢💣💥💦💨💫💬💭👓👔👕👖👗👘👙👚👛👜👝🎒👞👟👠👡👢👑👒🎩🎓📿💄💍💎

  

🐵🐒🐶🐕🐩🐺🐱🐈🦁🐯🐅🐆🐴🐎🦄🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🐘🐭🐁🐀🐹🐰🐇🐻🐨🐼🐾🦃🐔🐓🐣🐤🐥🐦🐧🐸🐊🐢🐍🐲🐉🐳🐋🐬🐟🐠🐡🐙🐚🦀🐌🐛🐜🐝🐞🦂💐🌸💮🌹🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿🍀🍁🍂🍃

  

🍇🍈🍉🍊🍋🍌🍍🍎🍏🍐🍑🍒🍓🍅🍆🌽🍄🌰🍞🧀🍖🍗🍔🍟🍕🌭🌮🌯🍳🍲🍿🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🍡🍦🍧🍨🍩🍪🎂🍰🍫🍬🍭🍮🍯🍼☕🍵🍶🍾🍷🍸🍹🍺🍻🍴🔪🏺

  

🎃🎄🎆🎇✨🎈🎉🎊🎋🎍🎎🎏🎐🎑🎀🎁🎫🏆🏅⚽⚾🏀🏐🏈🏉🎾🎱🎳🏏🏑🏒🏓🏸🎯⛳🎣🎽🎿🎮🎲🃏🀄🎴

  

🌍🌎🌏🌐🗾🌋🗻🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏯🏰💒🗼🗽⛪🕌🕍🕋⛲⛺🌁🌃🌄🌅🌆🌇🌉🌌🎠🎡🎢💈🎪🎭🎨🎰🚂🚃🚄🚅🚆🚇🚈🚉🚊🚝🚞🚋🚌🚍🚎🚐🚑🚒🚓🚔🚕🚖🚗🚘🚙🚚🚛🚜🚲🚏⛽🚨🚥🚦🚧⚓⛵🚤🚢🛫🛬💺🚁🚟🚠🚡🚀🚪🚽🚿🛁⌛⏳⌚⏰🕛🕧🕐🕜🕑🕝🕒🕞🕓🕟🕔🕠🕕🕡🕖🕢🕗🕣🕘🕤🕙🕥🕚🕦🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜🌝🌞⭐🌟🌠⛅🌀🌈🌂☔⚡⛄🔥💧🌊

  

🔇🔈🔉🔊📢📣📯🔔🔕🎼🎵🎶🎤🎧📻🎷🎸🎹🎺🎻📱📲📞📟📠🔋🔌💻💽💾💿📀🎥🎬📺📷📸📹📼🔍🔎🔬🔭📡💡🔦🏮📔📕📖📗📘📙📚📓📒📃📜📄📰📑🔖💰💴💵💶💷💸💳💹💱💲📧📨📩📤📥📦📫📪📬📭📮📝💼📁📂📅📆📇📈📉📊📋📌📍📎📏📐🔒🔓🔏🔐🔑🔨🔫🏹🔧🔩🔗💉💊🚬🗿🔮

  

🏧🚮🚰♿🚹🚺🚻🚼🚾🛂🛃🛄🛅🚸⛔🚫🚳🚭🚯🚱🚷📵🔞🔃🔄🔙🔚🔛🔜🔝🛐🕎🔯♈♉♊♋♌♍♎♏♐♑♒♓⛎🔀🔁🔂⏩⏪🔼⏫🔽⏬🎦🔅🔆📶📳📴🔱📛🔰

  

⭕✅❌❎➕➖➗➰➿❓❔❕❗🔟💯🔠🔡🔢🔣🔤🆎🆑🆒🆓🆔🆕🆖🆗🆘🆙🆚🈁🈶🈯🉐🈹🈚🈲🉑🈸🈴🈳🈺🈵◽◾⬛⬜🔶🔷🔸🔹🔺🔻💠🔘🔲🔳⚪⚫🔴

yyshino小于 1 分钟

如何阅读源码

作者：lgd8981289

搬运自 https://github.com/lgd8981289/vue-next-mini

简介

那么在上一小节中我们已经知道了如何对vue的源代码进行debugger ,但是如果想要学习或者了解 vue的代码执行，那么光靠 debugger是不够的,除此之外我们还需要掌握另外一个能力,那么如何阅读源代码

阅读源代码的误区

很多同学在去阅读源代码的时候,都会面临一个误区,那就是：我需要把源代码中每一行代码都读明

这是一个非常不对的行为，很容易让我们事倍功半

yyshino大约 3 分钟

Vue3源码解析

Vue响应式

原理

`Proxy`与`Object.defineProperty`

Proxy
1. Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。
2. 当想要修改对象的指定属性时,我们应该使用代理对象进行修改
3. 代理对象的任何一个属性都可以触发 handler 的 getter 和 setter
Object.defineProperty
1. Object.defineProperty 为指定对象的指定属性设置属性描述符
2. 当想要修改对象的指定属性时，可以使用原对象进行修改
3. 通过属性描述符，只有被监听的指定属性，才可以触发 getter 和 setter

yyshino大约 15 分钟

有限状态机

简介

有限状态自动机-维基百科

有限状态机（英语：finite-state machine，缩写：FSM）又称有限状态自动机（英语：finite-state automaton，缩写：FSA），简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学计算模型。

yyshino小于 1 分钟

WeakMap与Map的区别

WeakMap

key必须是对象
key是弱引用

弱引用与强引用

弱引用：不会影响垃圾回收机制。即： WeakMap 的 key 不再存在任何引用时，会被直接回收。
强引用：会影响垃圾回收机制。存在强应用的对象永远不会被回收。

对比示例

<script>

    let obj1 = {
        name: '张三'
    }
    let obj2 = {
        name: '张三'
    }

    // 强引用
    const map = new Map()
    // 弱引用
    const weakMap = new WeakMap()
    map.set(obj1,'value')
    weakMap.set(obj2,'value')

    obj1 = null
    obj2 = null

    console.log('map',map) // Map(1) {{…} => 'value'}
    console.log('weakMap',weakMap) // WeakMap {} 空
    
    /**
    此时 WeakMap 中不存在任何值，即: obj2不存在其他引用时， WeakMap 不会阻止垃圾回收，基于obj2的引用将会被清除。这就证明了 WeakMap 的 弱引用特性。
    */
</script>

yyshino小于 1 分钟

yyshino blog

一、方案汇总

对HTML语义化标签的理解

HTML标签的语义化

入门推荐

一、背景

二、优化方案

1. Spring 事务的工作原理

2. Spring 事务失效场景

简介

阅读源代码的误区

Vue响应式

原理

Proxy与Object.defineProperty

简介

WeakMap与Map的区别

WeakMap

弱引用与强引用

对比示例

`Proxy`与`Object.defineProperty`