- 博客(70)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 redux的@reduxjs/toolkit + Hooks用法
介绍@reduxjs/toolkit + hooks + reacr-redux的用法
2022-10-28 18:15:00
2603
原创 react的组件之间的通讯方式 （全局通讯和跨级通讯）
1.跨级通讯创建一个createContext文件 里面导出一个myContextimport { createContext } from "react";const myContext = createContext()export default myContext父组件import ChilA from "./com/chilA"; // 子组建import React from "react";import myContext from './createContex
2022-02-22 11:01:11
584
原创 react - Hooks
1.useEffectimport React,{useEffect,useState} from 'react'export default function App() { const [count,setCount] = useState(0) useEffect(() => { // 如果是一个空数组 就表示谁都不依赖 那么就只会在第一次加载的时候执行一次 // 当添加了依赖的时候 就会在count变化的时候 实行监听 console.log('修改d
2022-02-11 14:37:08
393
原创 react-router@5.2.0
1.下载 react-router-dom2.引入import { HashRouter, Link, Route, Switch, withRouter} from 'react-router-dom' <HashRouter> <Link to='/'>首页</Link> <Link to='/about'>关于</Link> <Link
2022-02-10 15:43:53
909
原创 接口、泛型
1.函数的 this在终端执行 tsc --init 之后 打开tsconfjg.json文件 找到"noImplicitThis": true,配置项 将他设置为true 表示 ts 开启严格模式在这种情况下 他是可以被编译的const info = { name : 's', eat:function(){ console.log(this.name) }}info.eat()但在这种情况下function eat(){
2022-02-02 23:51:41
578
原创 react-redux多容器数据共享版
上一篇文章记录了一个容器组件的使用 ，但在一个项目开发中，肯定不止一个容器组件 所以在这里更新一个多个容器组件的数据共享的版本实现起来比较简单 只是在上一篇文章的基础上 合并多个容器组件就可以了有两个容器组件 一个为name容器组件 一个为 count容器组件两个容器组件之间互相用了对方的数据当我修改的时候 两个组件的内容都会发生改变下面我们来实现一下这个功能目录结构与之前的一样actions.js 把所有的请求任务的内容都写在这里expo...
2021-12-27 13:35:17
521
原创 react-redux的使用
以一个例子来说明，页面上有一个初始值 10 当我点击 add的时候，给这个值加5 ‘当点击 asyncAdd的时候，在1秒钟后 加 5 1.划分目录结构src container containerCount redux action action.js reducer count.js store.js app.jsx ...
2021-12-23 22:33:35
601
原创 前端下载excel文件的两种方式
前端下载后端的excel文件的两种方式//当下载excel的时候，不让其操作import { Loading } from 'element-ui'; //使用element的loading效果let instanceconst request = axios.create({ baseURL:'http://127.0.0.1:3000'})request.interceptors.request.use(function(config) { instance = Loadin
2021-12-02 09:39:40
5875
1
原创 插槽、跨级传值
class Child extends Component { render() { const {left,center,right} = this.props return ( <div className='ccc'> <div className='left'> {left} </div> <div className='center'> .
2021-11-27 23:42:52
548
原创 js实现中国人习惯的周期
class handleTime {//通过传入的week参数来实现第几周 比如传入0 表示本周 1下周 -1上一周 getWeekDate(week) {} // 得到周一 getMon(){} // 得到周日 getSun() }getWeekDate() getWeekDate(week) { ...
2021-11-24 10:00:02
778
原创 ts~函数类型
1.匿名函数 自行推导// 匿名函数的类型let arr = ['a','b','c',9]arr.forEach(item => {// 这个item是可以推导出来的 他一定是string类型或者number类型 所以可以写 也可以不写 console.log(item)})2. // 对象类型 可选类型// 参数本身是可选的 它的本质是一个联合类型 如下的z 就是 z:boolean|undefinedfunction fn (...
2021-11-10 16:25:08
678
原创 ts~基础类型
npm i typescript -g 安装布尔值 let isDone: boolean = false;数字 let decLiteral: number = 6;字符串let name: string = "bob"; 数组类型 let list: number[] = [1, 2, 3]; let list: Arra...
2021-11-09 17:30:05
111
原创 react组件实例三大属性
1.state属性<scripttype="text/babel">//1.创建组件classWeatherextendsReact.Component{//初始化状态state={isHot:false,wind:'微风'}render(){const{isHot,wind}=this.st...
2021-10-07 11:51:36
140
原创 React生命周期函数(旧版)
父组件classPersonextendsReact.Component{ //state状态state={carName:"丰田",};//render函数render(){console.log("render--Person");return(<div>...
2021-10-01 18:07:31
153
原创 穿透与300延迟
1.移动端300ms延迟 原因:因为手机浏览器的原因，一点击一下，浏览器不知道到底是应该触发还是等待你的双击的下一次，所以就会等300ms去等待确认，这就造成了延迟 解决方法 1.meta标签里<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale,maximum-scale=1,user-scala...
2021-08-31 21:52:10
80
原创 vue笔记
1.怎么理解vue框架 vue是一套构建用户界面的渐进式js框架 支持引入各个组件库 插件 diff算法 虚拟dom 性能高2.el 与 data 的两种写法 el:'#app', v.$mount('#app')3.事件修饰符 @click.prevent .stop .once capture 键盘事件 @keyup.enter delete esc 等等...
2021-08-31 18:15:56
133
原创 2021-08-31
类数组可以使用 Array.from()来转换成为数组如何使两个页面之间进行通信？ 1.如果是同域的，可以使用localStorage来使用 2.如果是不同域的 ， 可以使用 iframe 来使用 ，传递参数进去css优先级 !import > id > class > 标签 内联>内部>外部css盒子模型 标准：width = content ie盒模型 ： width...
2021-08-31 14:13:29
71
原创 实现promise的常用方法
构造函数版 function handlePromise(execut) { const FULFILLED = 'resolve' const REJECT = 'rejected' const PEDDING = 'pedding' function fnPromise(res, newPromise, resolve, reject) { ...
2021-08-03 16:35:54
183
原创 Proxy
Proxy是指在目标对象上，架设一个拦截层，外界对象要访问对象都要先通过这个拦截层1.get方法 get用于读取某个属性的读取操作letperson={name:'影久'}设置拦截letproxy=newProxy(person,{get(target,property,receiver){if(propertyintarget){console.log(1...
2021-07-31 16:04:46
95
原创 webpack的拆分合并配置
打包命令"build:dev":"webpack--config./webpack.dev.config.js","build:prod":"webpack--config./webpack.prod.config.js"webpack.base.config.js页面const path=require('path')const {CleanWebpackPlugin} = require('clean-webpack-pl...
2021-07-30 11:46:08
259
原创 es6的解构赋值与Iterator、以及 for of
本篇文章摘自阮一峰著作《es6标准入门》的部分笔记，本人加以整理和解读1.解构赋值 es6允许按照一定的模式，可以从数组和对象中提取值数组解构 let [a,b,c] = [1,2,3] //分别赋值给abc为123 let [ foo,[ [bar] , baz ] ] = [ 1, [ [ 2 ], 3 ] ] //foo bar baz = 1 2 3对于数组来说，两边的模式要相同过滤掉一部分...
2021-07-27 12:04:33
171
原创 vue全局事件总线
在vue中存在这么一个内置关系VueComponent.prototype.__proto__ === Vue.prototype这是为了让vc(也就是组件中)可以使用到Vue原型上的属性，方法比如 $mount $watch $emit等在这个关系的基础上，再来解释vue的全局事件总线 一句话来解释就是 有一个方法或者属性，在任何的 vc 和 vm 里都可以使用，通过这幅图可以看出来就应该写在vue的原型对象上，也就是说是在Vue.prototype,如果写在vue...
2021-07-25 17:29:36
590
原创 如何使用字体图标在项目里
1.找到你要的图标，然后添加到项目里2.将这些下载到本地3.解压之后 ，找到icofont.css里，复制这些内容到自己定义的一个css里例如4.再到main.js里去引入5.然后复制他们的标识符，就可以展示了...
2021-07-24 17:09:08
322
原创 html的音频与视频
<body> <!--controls是音视频播放时的一个控制键--><!-- autoplay是页面加载完后自动播放视频，height和width是设置视频的大小窗口--><!--loop规定重复播放--><!-- muted规定静音播放--> <!--poster是在视频播放之前，加载的一张海报，封面--><!--preload是视频加载后，（如果没有autoplay自动播放属性）第一个值：auto（在.
2021-07-20 11:22:41
162
原创 网站的权重，搜索引擎优化，语义化
网站的权重决定了自然排名，搜索引擎优化的是权重，语义化是搜索引擎优化的一部分 1.代码风格，良好的缩进 2.合理的标签嵌套 （1）行内元素不允许包含块状元素 （2）p、h1-6 可包含行内元素，和文本信息，但不要包含块元素 （3） dl元素只允许包含dd 、dt ，不要包含块元素 （4）不建议...
2021-07-19 15:24:46
106
原创 iframe跨域处理
<iframe src="https://www.bilibili.com/medialist/play/ml298530516/BV1fW411j7JV" frameborder="0"></iframe> <script> let iframe = document.querySelector('iframe') iframe.onload = function(){ let data = {...
2021-07-18 19:36:51
2415
原创 http 与 https 的区别、浏览器的缓存机制
http是超文本传输协议，是从万维网服务器传输超文本到本地浏览器时候，遵从的协议http的步骤:当浏览器发送了一个请求到服务器时，服务器接收到请求，然后返回相应的响应体，状态行，浏览器接收到后在显示到页面上的过程http常用的请求方式 有 get 和 post请求请求头:Accept-Language 表示语言 User-Agent：浏览器的一些信息 Host: localhost:8888====>访问地址 Accept-Encodi...
2021-07-18 19:23:17
632
原创 vue虚拟dom 与 diff 算法
JS操作真实DOM的代价！用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。...
2021-07-17 17:17:36
178
1
原创 浏览器的事件循环机制
直接看代码做题举例子输出下面的运行结果async function async1(){ console.log('saync1 start') await async2() // 相当于 new Promise(()=>{async2}) //会同步执行 // await 的作用就是 把它后面的函数同步执行， //即相当于执行了 async2函数 //也就是放到了new Promise中去了 // 然后再把它后面的代码放到了 th
2021-07-05 10:56:54
126
原创 jQuery事件与动画
合成事件 hover对应的简化mouseover和mouseouttoggle: // toggle用来模拟连续的鼠标单击事件，有几个函数就出发几个，依次触发 $('div[class=mydiv]').toggle(function(){ console.log('one') },function(){ console.log('two')
2021-06-28 13:35:10
55
原创 jQuery中的dom操作
<div class="mydiv"> <ul id="list"> <li>1</li> <li>2</li> <li class="a">3</li> <li>4</li> <li>5</li> <...
2021-06-28 09:47:14
68
原创 jQuery选择器
1.可以官网下载jQuery源文件，在script中引用2.可以直接跨域引用3.如果在vue中可以 npm i jquery --save 下载使用这里我们就使用第一种方法使用，在这之前需要先下载jQuery(一、层次选择器)html结构如图 <div> <span class="one">5</span> <p>6</p> <span>66</span>
2021-06-27 10:03:26
58
原创 从输入url到页面显示这个过程发生了什么
注:这题胜在区分度高，知识点覆盖广，再不懂的人，都能打赏几点，高手就在于根据自己擅长的领域自由发挥，从url规范，http协议，dns，cdn，数据库查询，到浏览器解析，css树构建，dom树构建，js执行等等方面1.先查找缓存首先在内存缓存中查找硬盘缓存中查找系统host文件中查找（当在浏览器缓存中找不到时）路由器缓存中去查找2.dns服务器系统解析域名检查本机host文件系统查找缓存检查本地dns缓存转发至区域dns服务器解析根服务器解析通过递归或者迭代方法查解析查询，将解析
2021-06-26 23:12:02
68
1
原创 使用koa搭建服务端
计划写一个本地服务，使用localStorage来实现一个缓存本地皮肤的功能先实现服务器 通过npm下载koa插件npm i koa koa-views koa-router koa-static koa-bodyparse --saveconst koa = require('koa')const router = require('koa-router')()const views = require('koa-views')const static = require('koa-stati
2021-06-26 16:45:56
327
空空如也
js深拷贝继承后的子对象怎么获取父对象更新后的属性?
2021-06-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人