React
未读Reduxredux 将所有数据存储到树中，且树是唯一的。
Redux 基本概念
store：存储树结构。
state：维护的数据，一般维护成树的结构。
reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。
action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。
dispatch：传入一个参数action，对整棵state树操作一遍。
React-Redux 基本概念
Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。
connect(mapStateToProps, mapDispatchToProps)函数：用来将store与组件关联起来。
mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。
mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。
安装
npm i redux react-redux @reduxjs ...
路由Web 分类
静态页面：页面里的数据是写死的
动态页面：页面里的数据是动态填充的
后端渲染：数据在后端填充
前端渲染：数据在前端填充
安装环境
VSCODE 安装插件：Auto Import - ES6, TS, JSX, TSX
安装Route组件：npm i react-router-dom
Route 组件介绍
BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
Link：跳转到某个链接，to属性表示跳转到的链接
Routes：类似于 C++中的switch，匹配第一个路径
Route：路由，path属性表示路径，element属性表示路由到的内容
URL 中传递参数解析 URL：
1<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />
获取参数，类组件写法：
1234567891011121314151617import React, { Component ...
React
未读Components5.3.1 创建项目创建项目box-app：
123create-react-app box-appcd box-appnpm start
安装bootstrap库：
1npm i bootstrap
bootstrap的引入方式：
1import "bootstrap/dist/css/bootstrap.css";
5.3.2 创建 Component5.3.3 创建按钮当子节点数量大于 1 时，可以用<div>或<React.Fragment>将其括起来。
5.3.4 内嵌表达式JSX 中使用{}嵌入表达式。
5.3.5 设置属性
class -> className
CSS 属性：background-color -> backgroundColor，其它属性类似
5.3.6 数据驱动改变 Style5.3.7 渲染列表
使用 map 函数
每个元素需要具有唯一的key属性，用来帮助 React 快速找到被修改的 DOM 元素。
5.3.8 Conditional Rend ...
React
未读配置 react 环境React 官网
安装Git Bash（仅限使用 Windows 的同学，使用 Mac 和 Linux 的同学无需安装）
安装地址
安装Nodejs安装地址 `
安装create-react-app打开Git Bash，执行：
1npm i -g create-react-app
安装VSCode的插件
Simple React Snippets
Prettier - Code formatter
创建React App在目标目录下打开Git Bash，在终端中执行：
1234create-react-app react-app # 可以替换为其他app名称cd react-appnpm start # 启动应用
JSXReact中的一种语言，会被Babel编译成标准 JavaScript。
ES6 语法使用bind()函数绑定this取值在 JavaScript 中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。
例如：
1234567891011const person = { name: "yxc&qu ...
本文章借鉴https://www.lzhiscoding.xyz
项目实战–拳皇实现攻击效果在Player类中把人物背景渲染出来，以及添加一个矩形来表示挥拳范围，便于碰撞检测
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758// render方法，表示玩家角色在游戏画面中的呈现形式，这里不是简单地使用矩形填充绘制，而是根据玩家角色当前的状态，从对应的动画信息中获取相应帧的图像，并绘制到游戏画面上，实现更丰富的动画效果展示render() { this.ctx.fillStyle = 'blue'; this.ctx.fillRect(this.x, this.y, this.width, this.height); //如果是正方向 if (this.direction > 0) { //画一个矩形表示挥拳的范围，以便于做碰撞检测 ...
本文章借鉴https://www.lzhiscoding.xyz
项目实战–拳皇创建项目新建文件夹KOF，子文件夹有static、templates，分别用来存放静态文件和html文件，static子文件夹有js，css，images，分别用来存放js代码，css文件和图片等资源
创建仓库git init
初始化文件1234567891011121314<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拳皇</title></head><body></body></html>
设置网站图标将图标文件放入/static/ ...
1.jQuery使用方式
在<head>元素中添加：
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
按jQuery 官网提示下载
选择器$(selector)，例如：
123$("div");$(".big-div");$("div > p");
selector类似于 CSS 选择器。
事件$(selector).on(event, func)绑定事件，例如：
123$("div").on("click", function (e) { console.log("click div");});
$(selector).off(event, func)删除事件，例如：
12345$("div").on("click" ...
JavaScript 的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。常见的触发函数有：
鼠标
click：鼠标左键点击
dblclick：鼠标左键双击
contextmenu：鼠标右键点击
mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0 表示左键，1 表示中键，2 表示右键
mouseup：鼠标弹起，包括左键、滚轮、右键
event.button：0 表示左键，1 表示中键，2 表示右键
键盘
keydown：某个键是否被按住，事件会连续触发
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了 alt、ctrl、shift 键。
keyup：某个按键是否被释放
event常用属性同上
keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、 ...
与C++中的Class类似。但是不存在私有成员。
this指向类的实例。
定义1234567891011121314151617181920class Point { constructor(x, y) { // 构造函数 this.x = x; // 成员变量 this.y = y; this.init(); } init() { this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义 } toString() { // 成员函数 return "(" + this.x + ", " + this.y + ")"; }}let p = new Point(3, 4);console.log(p.toString());
继承123456789101class ColorPoint extends Point { constructo ...
JavaScript
未读对象英文名称：Object。
类似于C++中的map，由key:value对构成。
value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。
例如：
12345678let person = { name: "yxc", age: 18, money: 0, add_money: function (x) { this.money += x; },};
对象属性与函数的调用方式：
person.name、person.add_money()
person["name"]、person["add_money"]()
数组数组是一种特殊的对象。
类似于C++中的数组，但是数组中的元素类型可以不同。
数组中的元素可以是变量、数组、对象、函数。
例如：
1234567891011let a = [1, 2, "a", "yxc"];let b = [ 1, // 变量 "yxc ...
