1.2020?商城商城̳?Դ??
2.技术系列开源之DrawDocker源码略读（一）
3.这是一款适合8090朋友圈小霸王游戏机源码
4.搞懂React源码系列-React Diff原理

2020?̳?Դ??

       waynboot-mall 商城项目，始于疫情初期，源码源码历时三年，电商目前已有完备前后端、商城商城生产可用的源码源码商城系统。

       项目定位，电商宏编程源码旨在帮助开发者构建完整商城，商城商城包含运营后台、源码源码H5 商城、电商后端接口，商城商城实现多功能，源码源码如首页展示、电商商品分类等。商城商城

       源码全面开源，源码源码技术栈包含最新Spring Boot3.1、电商Mybatis Plus、Spring Security，整合Mysql、Redis、RabbitMQ、ElasticSearch等，经验丰富的乐捐源码博主打造。

       适合初学者部署，通过readme指南快速启动项目。提供docker-compose一键部署脚本，生产环境启动服务只需十多分钟。

       功能设计分为H5商城前台和运管后台，系统架构简洁优雅，采用Spring Boot3.1、MyBatis-Plus等最新组件。

       最新版本1.4.0引入多项改进，包括新增功能、优化体验、美化样式和修复bug。累计多次提交记录，受到个star、个fork。

       项目发展至今，提交记录展示其进化路径，从年4月日首次提交至今，持续迭代优化。

       项目持续更新，将添加秒杀、device 源码抽奖等营销模块。欢迎关注及参与，获取最新消息。

       GitHub项目地址：github.com/wayn/wayn...

技术系列开源之DrawDocker源码略读（一）

       本文由神州数码云基地团队整理撰写，若需转载，请注明出处。本文将简要解析开源图形化工具“神笔马良”（DrawDocker）的设计引擎和设计试图视角功能，以供后续开发者参考。分析基于年月日的master分支代码，读者应依据实际情况进行判断。

       项目包含侧栏、画布和右侧格式栏，以及上方工具栏。侧栏提供搜索图形、便笺本、自定义Kubeapps组件栏、更多图形按钮等功能。其中，搜索图形功能通过关键字实现，由Sidebar对象的addSearchPalette方法控制。便笺本功能则用于保存临时图形模板，源码讲师自定义Kubeapps组件栏则能展示并生成自定义应用组件。Kubeapps应用组件栏显示所有应用组件模板，通过读取kubeappsPalette.json文件的数据，创建包含图形、应用名、chart名和chart地址等信息的应用组件。

       创建新的组件栏需新增添加面板方法，并在初始化时调用。更多图形方法位于MoreShapesDialog中，新建的组件栏需添加至条目中才能在“更多图形”中显示。自定义属性或格式图形模板需在shapes和stencils目录下创建相应文件。

       画布部分主要由mxGraph对象实现，提供选中、获得样式等功能。右侧格式栏提供绘图、样式、文本、调整图形和安装参数栏，依据选中状态动态显示。样式栏显示图形属性及其值，若为Kubeapps图形，glow源码显示应用名、安装状态等。安装参数栏显示安装或删除按钮等。工具栏包含菜单、撤销、重做、删除、重命名、保存、语言等功能，通过Actions、EditorUi等对象实现。

       如需改进安装功能，可在Actions对象中修改或定义新动作，甚至在AppController.java文件中调整。项目已开源在GitHub，有兴趣的开发者可自行探索和优化。

这是一款适合朋友圈小霸王游戏机源码

       小高在社交媒体上发现了一款火爆的游戏机源码，名为小霸王，吸引了很多玩家。为了满足好奇，小高决定深入探索并分享此源码，旨在与朋友们一同享受乐趣。这款源码在年9月首次发布，近期再次风靡，可能与短视频平台的推波助澜有关。

       源码的开发者基于JSNES库进行构建，JSNES是一个JavaScript实现的红白机模拟器，能够运行各种红白机游戏，包括小霸王游戏机的经典游戏。这款源码开源，小高整理并美化了界面布局，使之更加贴近游戏机的视觉体验。

       源码包含了众多后和后童年记忆中的游戏，如《魂斗罗》、《超级玛丽》等，唤起了玩家的集体回忆。小高，作为后的一员，深感这款源码能够迅速走红，或许是因为它完美重现了童年的快乐。

       这款网页版游戏机无需下载，只需打开网页即可畅玩，支持移动端及PC端，内置各种经典卡带，提供丰富的游戏体验。在操作上，移动端使用触摸操控，而PC端则提供按键映射，满足不同设备的用户需求。

       对于后玩家来说，FC游戏是童年记忆的一部分，这款源码的出现，无疑为他们提供了重温旧时光的机会。小高分享了源码，鼓励喜欢探索的玩家自行搭建，同时也提供了一个预设版本供直接使用，实现与朋友们在朋友圈中玩小霸王游戏的梦想。

       最近的更新中，源码修复了打开网页时自动播放音乐的问题，添加了“啊哦，小霸王其乐无穷啊”的旋律，为游戏体验增添了一抹怀旧情怀。玩家只需调整source/ui.js文件中的代码，即可根据个人喜好进行定制。

搞懂React源码系列-React Diff原理

       时隔2年，重新审视React源码，理解了许多过去未曾明晰的内容。本文聚焦于通过实际案例结合相关React源码，集中探讨React Diff原理。我们将使用当前最新React版本：..1。

       同时，今年计划推出“搞懂React源码系列”，旨在以通俗易懂的方式深入解析React的核心部分。年，该系列将涵盖以下内容：

       React Diff原理

       React 调度原理

       搭建阅读React源码环境-支持所有版本断点调试

       React Hooks原理

       欢迎关注我的博客。

       在深入Diff算法之前，有必要先理解React Fiber。虽然Fiber并不复杂，但全面理解需要时间。本文重点是Diff原理，因此Fiber介绍将简要进行。

       Fiber是React中的抽象节点对象，它将所有节点连接成链表树。每个Fiber可能包含子Fiber、相邻Fiber以及父Fiber。React使用链表形式连接所有Fiber，形成树结构。Fiber还带有副作用标签（effectTag），如替换（Placement）和删除（Deletion），用于后续更新DOM。

       值得注意的是，React Diff过程中，除了Fiber，还涉及基本的React元素对象，如将foo编译后的对象为：{ type: 'div', props: { children: 'foo' } }。

       Diff过程始于reconcileChildren(...)

       总流程如下：

       reconcileChildren(...)

       在Diff时，比较中的旧内容为Fiber，而新内容为React元素、文本或数组。新内容为对象时，流程分为两步：reconcileSingleElement(...)和placeSingleChild(...)。

       以React元素为例，流程如下：

       reconcileSingleElement(...)

       这里正式开始Diff，child为旧内容Fiber，element为新内容，它们的元素类型不同。

       React将“删除”旧内容Fiber及其所有相邻Fiber（添加Deletion标签），并基于新内容生成新的Fiber。然后将新Fiber设置为父Fiber的child。

       如果新旧内容的元素类型相同，则通过fiber复用生成新的Fiber。同样设置为父Fiber的child。

       总结新内容为React元素的Diff流程：

       reconcileChildren(...)

       新内容为文本时，逻辑与新内容为React元素类似。

       新内容为数组时，通过遍历数组元素，与React元素的处理方式类似，生成新的Fiber。

       总结新内容为数组的Diff流程：

       reconcileChildrenArray(...)

       Diff的三种情况总结：

       比较结果相同：复用旧内容Fiber，结合新内容生成新Fiber

       比较结果不同：仅通过新内容创建新Fiber

       然后给旧内容Fiber添加替换标签，或给旧内容Fiber及其所有相邻元素添加删除标签。最后将新的（第一个）Fiber设为父Fiber的child。