摘要：
任务分解 一、绘制棋盘 二、绑定事件 1、先计算出需要绘制棋子的坐标 即将来绘制的棋子在哪个单元格内 2、绘制棋子 首先判断棋子是否存在 应该添加到哪个单元格内，分四种情况： 1.1 正常情况 1.2 最右侧 超出边界只能放在最后一个单元格内 1.3 左下侧 超出边界只能放在最后一个单元格内 1.4 阅读全文
摘要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
摘要：
普及知识：放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度offsetHeight 获取元素的高度offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时，获取元素距离父元素的左边距offsetTop父元素没有定位时，获取元素距离页面的上边距，父元素有定位时，获 阅读全文
摘要：
如上图：模仿chatgpt 光标文字输出效果 技术要点 1、模仿chatgpt 打字输出效果 循环中使用异步等待 每隔一段时间输出一段文字 代码如下： async function autoAppend(){ function transfer(text){ let div = document.c 阅读全文
摘要：
传统上，开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性。对于在构造函数中随时可用的小块数据来说，这不是问题。但是，如果在实例中可用之前需要计算某些数据，您可能不想预先支付该费用。例如，考虑这个类： class MyClass { constructor() { this.d 阅读全文
摘要：
目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子# 读完《你不知道的JavaScript--上卷》中关于this的介绍和深入的章节后,对于this的指向我用这篇文章简单总结了一下。接着我就想着能不能利用this的相关知识,模拟实现一下javascript中比 阅读全文
摘要：
前言 开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长 阅读全文
摘要：
useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每 阅读全文
摘要：
import React from 'react' import { connect } from 'react-redux' import TodoList from '../components/TodoList' import {toggleTodo,VisibilityFilters} fr 阅读全文
摘要：
action是一个普通对象 里面必须有一个type字段，代表将要执行的行为，其他字段自己规划。 action只是描述了将要发生的事情并不能直接修改状态 action创建函数 尽量是一个纯函数，他返回的是action对象 middleware 接受一个next() 的dispatch函数，返回了一个d 阅读全文
摘要：
概念：在不使用class组件的情况下，允许你使用state和react的其他特性 产生背景：在组件之间公用相同的逻辑往往很难，在以前的解决方案是：高阶组件和render props 但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。 你可以使用 Hook 从组件中提取状态逻辑 阅读全文
摘要：
受控组件处理表单数据是交给react内部的状态来处理，而非受控组件可以通过ref 交给dom来处理 1、受控组件的表单处理 import React, { Component } from 'react'; import ReactDOM from 'react-dom' import PropTy 阅读全文
摘要：
1、在dom元素中直接使用ref 意思就是可以在组件中创建一个dom节点的textInput，并将ref直接绑定到他 <script src="https://unpkg.com/@babel/standalone/babel.js"></script> <script src="https://u 阅读全文
摘要：
我们知道，在JavaScript中，原生DOM事件在开发中是很有用的(与用户交互的重要方式)，但是操作原生DOM事件其实有两大缺点：性能低、依赖于浏览器(NodeJs、小程序等不可用)。那么这个时候，就需要我们进行自定义事件去处理某些特定的业务。 认识Event对象及元素的dispatchEvent 阅读全文
摘要：
先回答我：为什么模块很重要？ 答：因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！ 于是下面三个模块规范出来了，这篇文章也出来了（拼出来的 {捂脸笑}）。 JS中的 阅读全文
摘要：
1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480 阅读全文
摘要：
layui table表格单元格动态合并，并设置隔行变色，此代码只针对嵌套数组只有一层的时候有效，多个数组嵌套还在冥想当中！！ 需求描述 我们知道在layui插件官方平台有个可以无限极单元格合并的模块，但是其核心理念是针对多个相同数据进行合并，并且也非常好用，数据结构不存在嵌套结构。 但是偶尔数据也 阅读全文
摘要：
本章节，我们一起来探讨以下问题：如何对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等。 1 gzip压缩 如果你想节省带宽提高网站速度，压缩是一种简单有效的方法。我们模拟一次html的请求，想象一下浏览器和服务器的对话： 浏览器：嘿 阅读全文
摘要：
经过三个章节的学习，你已经学会搭建了一个基于webpack4的react脚手架。如果要更改配置，比如，你希望把编译后的js文件和css文件等单独放dist下的static目录下，你想想，是不是有点麻烦。你要去浏览webpack的配置文件，找到哪些配置项，然后去更改它，我们希望有个参数配置文件，只要更 阅读全文
摘要：
本章节，我们对如何在脚手架中引入CSS，如何压缩CSS，如何使用CSS Modules，如何使用less，如何使用postcss等问题进行展开学习。 1 支持css （1）在app目录，新建一个css，命名为index.css，输入样式： h1{ display: flex; height: 200 阅读全文
摘要：
ref 转发不但可以转发指向具体的dom组件，也可以指向class组件的实例 import React from 'react' import ReactDOM from 'react-dom'; //ref 转发不但可以转发指向具体的dom组件，也可以指向class组件的实例 class Butt 阅读全文