土豆切成丝-CSDN博客

原创 react-redux中使用Hook和类组件写法进行状态管理

是的官方绑定库。它能够使你的组件从中读取数据，并且向分发以更新数据1.react项目搭建 npx create-react-app app2.安装redux npm i redux3.安装 react-redux npm i react-reduxsrc/index.jssrc/store/index.jssrc/store/reducer.jssrc/store/reducer-types.js②在类组件中使用src/App.jsx③在Hook中使用

2022-07-13 00:32:12 812 8

原创在react中使用redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。...

2022-07-12 20:37:04 959 1

原创 React路由跳转及路由传参的几种方式

原理：hash路由的原理是监听hashchange事件安装包 npm i react-router-dom@5.3.0 代码部分 Link 和 NavLink区别：NavLink指向的路径会自带一css类名swith：用Switch组件包裹多个组件。在组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件404：不设置path属性，将404页对应的路由放在switch内部的最后位置三、编程式路由跳转传递参数组件里方法： let goNews = ()=>{

2022-07-12 00:05:37 4989 5

原创 React生命周期

(1)constructor①触发时机：创建组件时，最先执行②作用：1.初始化state 2.为事件处理程序绑定this(2)getDerivedStateFromProps①触发时机：在调用render方法之前调用，并且在初始化挂载及后续更新时都被调用。②作用：返回一个一个对象来更新state，如果返回null则不更新任何内容(3)render①触发时机：每次组件被渲染的时候都会被触发②作用：渲染ul结构（注意：不能调用setState()）(4)componentDidMount①触发时机：组件挂载后（

2022-07-08 00:26:53 293 2

原创 vue3.0中使用vuex

目录一、前言二、vuex介绍三、项目搭建四、vuex使用①state②mutations③actions一、前言学习了vue3.0，vuex也是一个必不可少的知识点。在学习完后，也可以发现vuex也是比较容易上手。提示：项目是用vue-cli进行搭建的。二、vuex介绍官网介绍：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化我们理解：Vuex是采用集中

2022-05-31 21:04:58 5218 6

原创 TypeScript数据类型及相关面试点

一、前言首先我们先得知道TypeScript是什么，TypeScript是JavaScript的类型的超集，支持ES6语法，支持面对对象编程的概率，如类、接口、继承、泛型等。二、主要的数据类型boolean（布尔类型）// boolean 布尔类型let bool:boolean = trueconsole.log(bool);//truenumber（数字类型）// number 数字类型,和javascript一样// typescript的数值类型都是浮点数，

2022-05-19 20:47:28 281 4

原创 vue父子组件传值

一、父组件向子组件传值1.在子组件的调用标签上使用自定义属性进行传值2.子组件通过props属性进行接收，子组件把接受来的数据当成data里数据来使用3.props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件4.props可以显示定义一个或一个以上的数据，对于接收的数据可以是各种数据类型，同样也可以传递一个函数<body> <!-- 父-》子

2022-05-14 00:02:52 504 3

原创 vue框架

一、vue是什么官方解释：vue是一套用于构建用户界面的渐进式框架。vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增强其能力。vue-router vuex axios nuxt二、vue的核心①数据驱动视图（页面）修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。②MVVM模式M 数据模型 model V 视图..

2022-05-09 01:03:15 97956 8

原创第十三届蓝桥杯全国软件和信息技术作业人才大赛（Web应用开发）——布局题型（第一题）

第一题：水果拼盘介绍：目前CSS3中新增的Flex弹性布局已经成为前端页面的首选方案，本体可以使用Flex属性快速完成布局在浏览器中预览index.html页面效果如下：需求：建议使用flex相关属性完成css/style.css中的TODO部分。1.禁止修改圆盘的的位置和图片的大小。2.相同颜色的水果放在相同颜色的圆盘正中间（例如：苹果是红色的就放在红色的圆盘里）。完成后，效果如下：html部分代码<body> <div id=".

2022-04-11 20:28:20 1133 3

原创 node.js是干什么的

一、Node.js简介Node.js是一个开源和跨平台的JavaScript运行时环境。它几乎是任何类型项目的流行工具！Node.js在浏览器之外运行V8 JavaScript引擎（Google Chrome的内核）。这使得Node.js的性能非常好。Node.js应用程序在单个程序中运行，无需为每个请求创建新的线程。Node.js在其标准库中提供了一组异步的I/O原语，以防JavaScript代码阻塞，通常，Node.js中的库是使用非阻塞范式编写的，使得阻塞行为成为异常而不是常态。Nod

2022-04-08 00:46:35 25241 5

原创 node事件循环

一、什么是事件循环首先，node.js的事件循环与JavaScript的略有不同。node中事件循环使node.js可以通过将操作转移到系统内核中来执行非阻塞 I/O操作。由于大多数现代内核都是多线程的，因此它们可以处理在后台执行的多个操作。当这些操作之一完成时，内核会告诉node.js,以便可以适当的回调添加到轮询队列中以最终执行二、事件循环图解node.js启动时，它将初始化事件循环，处理提供的输入脚本，这些脚本可能会进行异步API调用，调度计算器，然后开始处理事件循环。下图显示了事件循

2022-04-04 23:34:23 2409 4

原创 node.js中封装获取一个给定路径下文件或者目录的信息

一、功能需求封装函数：读取一个目录中所有子目录和文件返回为一个对象：属性： name : 文件名， ext : 后缀名，目录为空字符串 isFile : 是否是一个文件 size ：文件大小，目录为0 createTime : 创建时间日期对象 updateTime : 修改时间日期对象方法： getChidren() : 获取当前目录的所有子文件对象，如果是文件，则返回空数组 getContent...

2022-03-30 23:27:07 1535 2

原创 Promise源码分析

实现原理：说到底，Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。我这里只是实现了部分的功能，并非和源码一模一样！希望里面不足的地方，小伙伴们多多指正//我们首先来定义一个MyPromise类，我在这里使用立即执行函数的方式，防止变量全局污染。const MyPromise = (() => { // 定义三种状态 const PENDING

2022-03-27 22:08:09 912 4

原创 Set和Map数据结构

一、SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。 // 创建一个set集合，传参必须为一个可迭代对象 const s1 = new Set([1,2,3,3,5,1]) console.log(s1)//Set(4){1, 2, 3, 5}.

2022-03-24 23:50:55 248 3

原创 promise详解

一、promise含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。二、异步和回调异步处理的模型：ES

2022-03-23 23:15:22 16608 2

原创手写 forEach、map、find、reduce等方法

一、forEach//forEach() 遍历数组参数1：函数参数2：改变函数中的this指向var arr = ['lcy','xyy','wjj','zj']var obj = {};arr.forEach(funtion(value,index,_arr){ //value: 数组中的每一项数据 //index: 每一项数据对应的下标 //_arr: 该数据本身 // console.log(arguments); // consol

2022-03-22 20:15:13 339 1

原创 es6 class类继承（extends、super）

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。1.extends继承，用于类中的定义2.super①当成函数使用，表示父类的构造器 ②当成对象使用，则表示为父类的原型它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。实例： // ES6 class继承 // extends 继承，用于类中的定义 // super 1...

2022-03-21 20:46:32 968 1

原创什么是跨域？解决跨域的常见方法

一、浏览器同源政策“同源”：协议相同、域名相同、端口相同"同源的目的"：只有在一个服务器上的文件才能互相交互，多个服务器之间的文件禁止1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。举例来说，http://www.example.com/dir/page.html这个网址，协议是http://,域名是www.examp

2022-03-20 22:06:49 1364 9

原创 ajax(面试重点)

目录一、ajax简介二、ajax优缺点(面试题)三、异步和同步四、ajax处理网络请求五、xhr对象发送GET、POST请求六、最后补充（面试题）1.grt请求和post请求的区别2、常见的响应码和状态码含义①status②readyState一、ajax简介ajax（Asynchronous Javascript And XML）其实就是异步的javaScript和XML。XML:<html>这是html标签，XML格式是一样的可以自定

2022-03-19 23:56:22 3552 1

原创 js生成随机颜色九九乘法表

变颜色的九九乘法表js代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九九乘法表</title></head><body> <script> document.write(`<table width='550px' height='500p

2022-03-18 23:42:56 1307 2

原创 HTTP协议

目录一、HTTP协议简介二、HTTP协议的发展历史三、HTTP工作原理四、HTTP三次握手为什么要三次握手五、HTTP四次挥手为什么四次挥手六、HTTP请求方法一、HTTP协议简介超文本传输协议(英文：HyperText Transfer Protocol,缩写：HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP是一个客户端终端（用户）和服务器端（网站）请求和应答的标准（TCP）。通常，由HTTP客户.

2022-03-17 19:38:54 501 1

原创 canvas生成随机（颜色位置）验证码

一、什么是canvas？1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。二.功能实现canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。①功能需求：1.需要的内容：字母数字组合(长度随机5-7,颜色随机,位置随机，大.

2022-03-12 15:20:38 1833 4

原创 js实现canvas在线画板

一、前言canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。二、实现效果今天这个canvas小案例主要是四个功能1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板三、代码实现1.html+css部分代码 <style> canvas{ background-colo..

2022-02-21 00:59:28 2933 4

原创原生JS实现页面滚动条加载数据，页面下拉加载内容

一、前言今天这个案例是滚动条事件，当滚动条距离底部的距离小于一个范围值时，会自动的增加页面的高度，从而达到永远划不到底部的效果。二、scrollHeight、scrollTop和clientHeight的区别网页的全文高滚动条距离顶部的距离（滚动条被卷去的距离）可以看到的屏幕高度由于js没有给我们滚动条距离底部的距离我们就需要自己计算了用网页的全文高减去滚动条距离顶部的距离减去可以看的的屏幕高度就可以得到滚动条距离底部的距离了。三、代码<style>

2022-02-13 23:53:23 2087 2

原创实现JS异步加载的三种方法

一、为什么要写异步加载：①js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。②但是实际开发中我们只需要把script标签放在页面的最下面。完全没有必要写赘余代码，但是按需加载一定是面试的重中之重！！！二、JS异步加载的三种方案：①defer script标签中增加defer属性，异步加载 1.但要等dom文档全部解析完（d

2022-02-11 19:23:09 9598 8

原创详解JS中关于call、apply和bind的实现（源码实现）

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。call、apply、bind方法的共同点：1.都是用来改变函数的this对象的指向的；2.第一个参数都是this要指向的对象；3.可以利用后续参数传参；区别：bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。call()方法和apply()方法的作用相同，区别仅在于接受参数的方式不同。一、call的源码

2022-02-10 23:35:17 1433 21

原创 js实现轮播图（淡入淡出效果）

目录一、前言二、轮播图实现效果三、功能四、实现代码1.html+css部分代码2.js主要代码5、总结一、前言说起轮播图，大家应该都不陌生，大部分网站的首页或者也是面试官的提问：你会写轮播图吗？都会见到它的存在。虽然实现起来也不是很困难，但是真正能写好的人也不多，这也是我写这个的原因，整理一下自己写的东西，也带着大家一起复习巩固。二、轮播图实现效果三、功能1.实现自动播放2.鼠标移入停止播放，按左右切换按钮或者点击分页器小圆点切换图片3.图片实现.

2022-01-20 18:30:13 3986 11

原创 JS实现弹性漂浮广告代码

2022-01-15 21:31:50 2358 12

原创 JS实现随机抽奖功能

点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取 <script> var but1 = document.getElementById("btn1") var but2 = document.getElementById("btn2") var alldiv = document.querySelectorAll(".father>div") console.log(alldiv);

2022-01-10 01:38:31 3879 6

原创 JavaScript onclick点击事件：点击切换图片并可以自动播放

在页面中放图片并设置四个button，可以通过点击上一张下一张来切换图片（翻到最后一张自动切换到第一张）.用户点击自动播放，每隔两秒自动切换（类似轮播图），点击停止播放，就终止播放，运用了定时器。先看效果图.下面是完整的代码，需要的自取哈！<body> <img id="img" src="./img/0.webp" alt=""><br> //给四个button加上点击事件 <button type="button" onc.

2021-12-23 23:52:15 2644 10

原创 JavaScript函数封装随机颜色验证码

数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码，需要的自取哈！function verify(a = 6,b = "num"){ //定义三个随机验证码验证码库 var num ="0123456789" var str ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ" var mixin = num +str; //定义一个空字符串用来存放验证码 var verify=""

2021-12-19 22:31:48 1917 12

A20201130的博客