Yangyang's Blog

React最佳实践 – 2022年编写更好的React代码的技巧 🌠 本文非原创，为原文的中文翻译版 📖 原文地址：https://www.freecodecamp.org/news/best-practices-for-react/ 目录: React 开发者面临的三大挑战 了解 React 的基础 学习如何构建整洁、高性能和可维护的 React 组件 Tips to Help You Write Better React Code – The Cherries on Top Final Words 首先也是最重要的，你应该知道每一个 React 开发者需要去面对的三个主要挑战。这很重要因为当你意识到潜在的挑战时，你将会更加深入地理解这些最佳实践背后的原因。 React 开发者面临的三大挑战⚙️ 可维护性这与可复用性息息相关。在应用程序和组件非常轻量的时候，它们很容易维护。但是，一旦需求开始增长，组件就会变得非常复杂，因此维护性较差。 我经常看到一个有许多不同情况代表不同结果的组件。JSX 充满条件渲染（三元运算符和简单&&运算符），根据条件添加 class ...

使用 JavaScript 最合理的方式

前言Vite 是一种新型前端构建工具，能够显著提升前端开发体验。但在用它搭建项目时，选择vue模板，会默认创建一个 vue3 项目。那能不能用vite搭建一个vue2的项目呢？答案是可以的。我这里有一个已经搭建完的项目实例，具体方法请往下看。 搭建方法1. 创建一个 vite 项目以Yarn为例 先用 Vite 创建一个项目，详见官方文档 1$ yarn create vite 然后按提示操作！ 注意：在进行到第二步时时，即Select a framework:，不要选择vue，因为这样会创建一个vue3的项目，选择为vanilla，即原生 js, 然后通过插件和一些配置来改造成 vue2 项目。 2. 安装并配置依赖和插件安装 vue2 （此处我安装的为 2.6.14 版本） 及相关依赖： 1$ yarn add vue@2.6.14 vue-template-compiler 让 vite 支持 vue2，安装插件 vite-plugin-vue2： 1$ yarn add vite-plugin-vue2 -D 创建 vite.config.js 文件并引入插件： 1234 ...

Webpack to Vite1. 安装并配置 Vite1$ yarn add vite -D vite 默认没有对 vue2 的支持，我们需要先安装一个插件 vite-plugin-vue2 1$ yarn add vite-plugin-vue2 -D 然后在根目录下新建 vite.config.js 文件，添加内容： 1234567// vite.config.jsimport { defineConfig } from 'vite';import { createVuePlugin as Vue2 } from 'vite-plugin-vue2';export default defineConfig({ plugins: [Vue2()],}); 在package.json中加入脚本 1234567{ "scripts": { "vite-dev": "vite", &quo ...

一个很有意思的猜单词游戏，试玩一下。🎈 代码在这里 玩法介绍 共有六次机会来猜一个单词。 每个猜测必须是一个有效的五个字母的单词。点击 Enter 按钮提交。 每次猜测后，瓷砖的颜色都会改变，以显示您的猜测与单词的接近程度。 关于分享 如果朋友还没有猜过今天的随机单词的话，截图分享之前记得点击左上角的“隐藏答案”哦，防止剧透！ 自定义单词：在分享功能中，允许你自定义出题来分享给你的朋友猜测，再也不怕一个单词不过瘾了！ 参考Wordle 游戏的 Vue2 实现。 看到尤雨溪大佬的搞了一个 vue3 的项目，感觉挺有意思的就自己也搞一个 vue2 版本的。 仅供学习和娱乐。

题目描述给定一个二进制数组 nums , 找到含有相同数量的 0 和 1 的最长连续子数组，并返回该子数组的长度。 示例 1: 123​输入: nums = [0,1] 输出: 2 说明: [0, 1] 是具有相同数量0和1的最长连续子数组。 示例 2: 123​输入: nums = [0,1,0] 输出: 2 说明: [0, 1] (或 [1, 0]) 是具有相同数量0和1的最长连续子数组。 解题思路把 0 当作 -1，原题即变为求和为 0 的最长连续子数组。 代码实现123456789101112131415161718192021222324/** * @param {number[]} nums * @return {number} */var findMaxLength = function (nums) { let l = 0; let sum = 0; const map = new Map(); map.set(sum, -1); const n = nums.length; ...

封装一个用来判断js数据类型的方法

针对 ES6 语法的一些知识梳理，做一下记录。

关于 hexo 文章永久链接的设置，推荐使用 hexo-abbrlink 插件，简单几分钟就能设置，快速入手。

Greedy Snake 贪吃蛇基于原生 js，采用面向对象编程思想，部分 ES6+ 语法 效果展示演示地址 思路整理Classes 节点 Node: 用于创建蛇身体每一部分的组成元素，以及食物。 x: 水平位置y: 垂直位置type: head / body / foodel: 每个 node 实例都对应一个 DOM 元素，实际上就是一个个 div 小方块，每个方块在容器内部进行绝对定位，有对应的 top 和 left 值 蛇 Snake:存储蛇相关信息，处理移动等逻辑。 游戏 Game:用于存储游戏信息和控制游戏整体逻辑，初始化、开始、暂停、结束等。 核心原理 移动的实现： 关于蛇的移动的实现，我们不采用去修改每个元素对应的 top 和 left 的方法，因为当蛇达到一定长度时，每一步移动我们都要去修改很多 DOM 元素，这样做效率低而且性能也不好。 其实我们每次移动只需要考虑蛇头和蛇尾就可以了，当蛇移动时，生成一个新头，添加到身体最前端，然后弹出最后一个元素（即尾部），这样不断进行变化，就实现了蛇的移动；如果在移动过程中碰到了食物，则不需要删除当前蛇尾元素，这样则实现 ...