Tao ying

手写Promise 这一节咱们一起来手写Promise 这一章咱们会学习的有: 实现Promise的核心功能: Promise: 实例方法:catch,finally 静态方法:resolve,reject,race,all,allSettled,any Promise\A+标准,并跑通872个单元测试 首先明确Promise的核心用法 1234567891011121314151617181920// 实例化 并管理异步任务const p = new HMPromise((resolve, reject) => {  setTimeout(() => {    resolve('success')    // reject('error')  }, 1000);})// then方法获取成功/失败结果// 参数1:成功时执行的回调函数// 参数2:失败时执行的回调函数p.then(res => {  console.log('res:', re ...

知识点自测 今天课程中涉及到的已学习知识点 函数的call方法-文档链接12345678910// 以指定的this调用函数，并通过 从第二个参数开始依次传递参数function func(food,drink){ console.log(this) console.log(food) console.log(drink)}const obj = { name:'小黑'}func.call(obj,'西蓝花','咖啡') 函数的apply方法-文档链接12345678910// 以指定的this调用函数，并通过 数组的形式 传递参数function func(food,drink){ console.log(this) console.log(food) console.log(drink)}const obj = { name:'小黑'}func.apply(obj,['西蓝花', ...

React Router 6 快速上手1.概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等。 react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。 与React Router 5.x 版本相比，改变了什么？ 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。 语法的变化：component={About} 变为 element={<About/>}等。 新增多个hook：useParams、useNavigate、useMatch等。 官方明确推荐函数式组件了！！！ …… 2.Compo ...

setState1. setState 更新状态的两种写法 (1). setState(stateChange, [callback]) - 对象式的 setState 📦 stateChange 为状态改变对象（该对象可以体现出状态的更改）. callback 是可选的回调函数, 它在状态更新完毕并且界面也更新后（✅ render 调用后）才被调用. (2). setState(updater, [callback]) - 函数式的 setState 🔄 updater 为返回 stateChange 对象的函数. updater 可以接收到当前的 state 和 props. callback 是可选的回调函数, 它在状态更新以及界面也更新后（✅ render 调用后）才被调用. 总结: 对象式的 setState 是函数式的 setState 的简写方式，它是一种语法糖. 使用原则: 如果新状态不依赖于原状态，可以使用对象方式. 如果新状态依赖于原状态，应使用函数方式. 如果需要在 setState() 执行后获取最新的状态数据, 可以在第二个回调函数中读取 📊。 ...

📌 1.Redux🌟 1.1. Redux理解 📚 1.1.1. 学习文档 英文文档: Redux Official 中文文档: Redux 中文版 GitHub: Redux GitHub 🧠 1.1.2. Redux是什么? Redux是一个专门用于做状态管理的JavaScript库，不是React的插件。 它可以与React、Angular、Vue等框架一同使用，但主要与React一起使用。 主要作用: 集中式管理React应用中多个组件共享的状态。 🤔 1.1.3. 何时需要使用Redux 当某个组件的状态需要被其他组件访问或共享时。 当一个组件需要更改另一个组件的状态时。 原则: 能不使用就尽量不使用。当不使用会带来困难时，再考虑使用。 🔄 1.1.4. Redux工作流程 🌟 1.2. Redux的三大核心概念 📜 1.2.1. Action 表示操作的对象。 通常包含以下属性: type: 唯一标识，是一个字符串。 data: 任意类型的数据属性。 例: { type: 'ADD_STUDENT', data: ...

🚀 第1章：React应用 基于React脚手架 1.1 使用create-react-app创建react应用1.1.1 React脚手架 脚手架定义: 用于帮助程序员快速创建基于某一库的模板项目。 ✅ 包含所有必要配置 (如语法检查、jsx编译、devServer等) ✅ 预装了所有相关依赖 ✅ 可直接展示简单效果 React脚手架库: 提供了专门的脚手架工具——create-react-app。 技术架构: 主要包括react + webpack + es6 + eslint。 项目特点: 脚手架项目通常为模块化、组件化、工程化。 1.1.2 创建项目并启动 全局安装: 1npm i -g create-react-app 创建项目:1create-react-app hello-react 进入项目目录:1cd hello-react 启动项目:1npm start 1.1.1 React脚手架项目结构 public: 静态资源文件夹 favicon.icon: 网站图标 index.html: 主页面 logo*.png: logo图片 manifest ...

01_hello_reactReact简介官网 英文官网: React Official 中文官网: React 中文文档 介绍描述React 是一个用于动态构建用户界面的 JavaScript 库。主要的特点有： 只关注于视图部分 由 Facebook 开源 React的特点 声明式编码 组件化编码 使用 React Native 编写原生应用 优秀的Diffing算法，使得React非常高效 为什么React高效React 之所以高效，主要归功于以下两点： 使用虚拟(virtual)DOM，而不是直接操作真实的页面DOM 采用DOM Diffing算法，可以最小化页面的重绘 相关JS库以下是与 React 相关的一些主要的JavaScript库： react.js: 这是 React 的核心库 react-dom.js: 提供操作DOM的React扩展库 babel.min.js: 可以解析JSX语法代码并转为常规的JS代码 hello_react.html概括： 基本React设置。 使用JSX创建一个简单的虚拟DOM，并渲染到页面。 要点： 在HTML中创 ...

css快速布局上下左右居中对齐 将body设置成 display: flex; ，给需要布局的盒子在有宽高的前提下设置 marin: auto; padding与margin的区别 padding为盒子的内边距，margin为外边距作用对象不同，padding是作用域自身的，而margin是作用外部对象的外部 vw与百分比的区别 百分比具有继承关系，而vw只和设备的宽度有关系 如何让谷歌浏览器支持小字体 浏览器默认支持最小字体为 font-size：12px,再缩小就需要为添加 tarnsform属性使其变为原来的多少倍。123.small-font{transform: scale(0.8);-webkit-transform: scale(e.8);} 行内元素和块级元素行内元素和块级元素是HTML和CSS中两种基本的元素显示方式。它们之间的主要区别如下： 显示方式： 块级元素：独占一行，即使内容没有充满整个行宽，它仍然会拓展到其容器的整个宽度。常见的块级元素包括：<div>, <p>, <h1>~<h6&g ...

Promise基本使用Promise 是什么? 抽象表达: Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数 具体表达: 从语法上来说: Promise 是一个构造函数 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值 promise 的状态改变 pending 变为 resolved pending 变为 rejected 说明: 只有这 2 种, 且一个 promise 对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据成功的结果数据一般称为 value, 失败的结果数据一般称为 reason promise 的基本流程 Promise 初体验123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<!doc ...

说明 项目的请求根路径为：http://127.0.0.1 以 /api 开头的请求路径，不需要访问权限 以 /my 开头的请求路径，需要在请求头中携带 Authorization 身份认证字段，才能正常访问成功 推荐一款 VSCode 主题： escook-theme 推荐一款 VSCode 单词翻译插件： escook-translate 登录注册注册简要描述 用户注册接口 请求URL http://127.0.0.1/api/reguser 请求方式 POST 请求体 参数名 必选 类型 说明 username 是 string 用户名 password 是 string 密码 返回示例 1234{ "status": 0, "message": "注册成功！"} 返回参数说明 参数名 类型 说明 status int 请求是否成功，0：成功；1：失败 message string 请求结果的描述消息 登录简要描述 用户 ...

脚手架文件结构├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json：包版本控制文件 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别： vue.js是完整版的Vue，包含：核心功能 + 模板解析器。 vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。 因为vue ...

Day04_AJAX进阶知识点自测 看如下标签回答如下问题？ 12345<select> <option value="北京">北京市</option> <option value="南京">南京市</option> <option value="天津">天津市</option></select> 当选中第二个 option 时, JS 中获取下拉菜单 select 标签的 value 属性的值是多少? 答案 南京 页面上看到的是北京, 还是北京市等？ 答案 北京市 我给 select 标签的 value 属性赋予”南京”会有什么效果？ 答案 什么效果都没有, 没有没有一个option选项的value能匹配 目录 同步代码和异步代码 回调函数地狱和 Promise 链式调用 async 和 await 使用 事件循环-EventLoop Promise.all ...

Day03_AJAX原理知识点自测 以下哪个方法可以把 JS 数据类型转成 JSON 字符串类型? A. JSON.stringify() B. JSON.parse() 答案 选择A 以下哪个方法，会延迟一段时间后，再执行函数体，并执行一次就停止? A. setTimeout(函数体, 毫秒值) B. setInterval(函数体, 毫秒值) 答案 选择A 下面代码 result 结果是多少? 1234let obj = { status: 240}const result = obj.status >= 200 && obj.status < 300 A. true B. 大于 C. 240 D. false 答案 选A 下面代码运行结果是多少？ 123let result = 'http://www.baidu.com'result += '?a=10'result += '&b=20' A：’http ...

Day02_AJAX综合案例知识点自测 以下代码运行结果是什么？（考察扩展运算符的使用） 12345678const result = { name: '老李', age: 18}const obj = { ...result}console.log(obj.age) A：报错 B：18 答案 B正确 什么是事件委托？ A：只能把单击事件委托给父元素绑定 B：可以把能冒泡的事件，委托给已存在的向上的任意标签元素绑定 答案 B正确 事件对象e.target作用是什么? A：获取到这次触发事件相关的信息 B：获取到这次触发事件目标标签元素 答案 B正确 如果获取绑定在标签上自定义属性的值10？ 1<div data-code="10">西游记</div> A：div标签对象.innerHTML B：div标签对象.dataset.code C：div标签对象.code 答案 B正确 哪个方法可以判断目标 ...

Day01_Ajax入门知识点自测 如下对象取值的方式哪个正确? 123let obj = { name: '黑马'} A: obj.a B: obj()a 答案 A选项正确 哪个赋值会让浏览器解析成标签显示? 12let ul = document.querySelector('#ul')let str = `<span>我是span标签</span>` A: ul.innerText = str B: ul.innerHTML = str 答案 选择B, innerText会把字符串当做普通文本现在在ul标签之间, innerHTML会试着把字符串解析成标签, 如果是普通文本则显示普通文本字符串 哪个是获取输入框值的方式? 1let theInput = document.querySelector('#input') A: theInput.innerHTML B: theInput.value 答案 答案是B, 表单标签设置或 ...

复习123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> // let obj = {name: 'andy'} // let obj = new Object( ...

复习123456789101112131415161718192021222324252627282930<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <ul> <li class="item">1</li> <l ...

1. App.vue1234567891011121314151617181920<template> <div> <School></School> <Student></Student> </div></template><script> //引入组件 import School from './School.vue' import Student from './Student.vue' export default { name:'App', components:{ School, Student } }</script> 2. index.html12345678910111213<!DOCTYPE html><html> <head> <meta charset="UTF-8" ...