Tiger's blog

原创 实现一个简单的弹窗组件

弹框组件实现一、写在前面最近技术设计评审过程，架构师要求将其中一些共同的业务场景封装为组件，于是产生了这个组件，但是怎么说呢，API不算多，并且适用的场景也比较少，主要还是涉及的组件间传值可以看一下，也欢迎指出问题。二、实现import React, { useEffect, useState } from 'react';import { createPortal } from 'react-dom';import './index.less'const Node = document.cr

原创 IntersectionObserver实现上拉加载

IntersectionObserver实现上拉加载一、前言最近写的比较多的移动端页面开发，分页加载比较多，于是对其进行了一些研究，找到了一个比较方便的方法。其中关键为IntersectionObserver这一对象。没用过的兄弟可以点链接。二、实现import React, { useEffect, useState, useRef } from "react";const [curPage, setCurPage] = useState(1);const loadingRef = us

原创 移动端点击穿透问题

一、问题描述当移动端存在一个弹框，点击弹框会导致下层的盒子中带有点击的元素被触发。举个例子，在进行一个修改当前元素状态，需要点击当前的状态，然后弹出一个包含所有状态的盒子，点击其中的状态进行修改得到对应的状态。当我们点击修改状态时，上层盒子的点击效果会对下层盒子进行触发，导致本该消失的弹框闪了一下又出现，这种类似于击穿页面的效果就是点击穿透问题。二、造成这一问题的由来click是在移动端有300ms的延迟，混用click和touch会导致穿透事件。经查找资料发现，造成这一问题是因为移动端click

原创 react组件中的生命周期函数

参考菜鸟教程组件的生命周期分为三个状态：Mounting:插入真实DOMUpdating:重新渲染UnMounting:移除DOM生命周期的方法（1）componentWillMount 在渲染前调用，在客户端也在服务端,用的较少（数据初始化后，页面加载前）（2）componentDidMount 在第一次渲染后调用，只在客户端。可以在这个钩子中使用setTimeout、setInterval或者发送AJAX等请求（防止异步操作阻塞UI），组件会重新渲染（3）componentWillRe

转载 9个面试题搞懂Cookie

转载于[不惧面试：HTTP协议(3) - Cookie]1.Cookie是什么？★☆cookie时当前识别用户，实现持久化会话的最好方式。简单点说就是服务器知道正在和哪个客户端通信，以及保持与已识别出的客户端通信。Cookie的基本思想就是让浏览器积累一组服务器特有的信息，每次访问服务器时都将这些信息提供给它。2.Cookie能做什么？★☆对连接另一端的用户有更多的了解，并且能在用户浏览页面时对其进行跟踪。3.Cookie是怎么分类的？★☆（1）会话cookie。临时cookie，记录了用户访问

原创 Redux基础（二）

内容参考技术胖老师文章Redux进阶一、中间件这个中间件是redux的中间件，不是react的中间件。中间件可以用来做什么？比如，dispatch在进行传递action对象之后到达reducer之前这段时间进行一些额外的操作就需要用到中间件middleware，在实际工作中可以用来进行调用异步接口或路由，还可以用来进行日志记录、创建崩溃报告。（中间件是对dispatchAPI作用的增强）二、Redux中间件1.Redux-thunk中间件（1）Redux-thunk配置Redux-thunk不

原创 Redux基本使用（一）

Redux基础一、设计思想：react是单项数据流框架，为了在相对较大的项目中方便进行状态管理。二、基本概念：1.Store：保存数据并且是改变state的地方，用createStore来进行创建。（整个应用只能有一个）import {createStore} from 'redux';//createStore函数用来接收reducer函数作为参数，返回一个新的Store对象const store = createStore(reducer)export default store2.R

原创 使用PropTypes进行类型检查

使用PropTypes进行类型检查报错：'date.data.typeName' is missing in props validation，解决办法：JavaScript是一门弱类型语言，在灵活开发的同时也更加容易出现bug。在react中有内置了一个组件参数类型检查的机制，这是为了更进一步对参数进行确认，不然参数不对或许只是显示的画面有问题，但程序并不会报错。这在找bug的时间就会花更多的时间。当然，当你缺少了参数类型验证，页面能正常显示但是会提示需要进行验证。PropTypes的使用1.

原创 宏任务和微任务

宏任务与微任务1.同步任务和异步任务JavaScript是单线程执行的语言，在同一个时间只能做一件事情。这就导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题JS中出现了同步任务和异步任务。（1）同步任务在主线程上排队执行的任务只有前一个任务执行完毕，才能执行后一个任务，形成一个执行栈。（2）异步任务不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行

原创 某次前端面试的面试题

最近一段时间一直忙于面试，好久没更新博客了。把某次面试被问到的问题大概整理一下拿过来凑个数，这些问题应该还算是挺简单的，我就没有写具体的答案给大家参考了，大家可以自己过一遍，遇到有问题的可以自行百度一下或者在下面留言我看到就会进行解答。（涉及的框架是Vue）1.自我介绍2.盒子居中的方法3.Vue3.0和Vue2.x版本的双向数据绑定原理？为何要重做？proxy代理的内容是什么？4.项目中遇到最困难的地方5.有没有上线的项目6.如何实现一个三角形？如何实现一个圆、半圆？7.Element-ui

原创 TCP三次握手过程

本次只是分析了三次握手，其他更具体的过程可以看看这篇文章，绝对大有收获。开局一张图图片一目了然就没必要看接下来的废话了！！！三次握手过程：第一次握手,建立连接。客户端发送连接请求报文段，将SYN置1序号seq=x。客户端进入SYN_SEND状态，等待服务器进行确认。第二次握手：服务器接收到SYN报文段，对这个报文段进行确认，将确认号ack=x+1，同时发送请求信息，将SYN置为1，seq=y。服务器将上述左右信息放进一个报文段（即SYN+ACK报文段）中，一并发给客户端，，此时服务器进入SYN_

转载 箭头函数与普通函数的区别

1.箭头函数是匿名函数，不能作为构造函数，不能使用new2.箭头函数不能绑定arguments，取而代之用rest参数…解决function A(a){ console.log(arguments);}A(1,2,3,4,5,8);// [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]let C = (...c) => { console.log(c);}C(3,82,32,11323);// [3, 82,

原创 Node.js中模块加载机制

Node.js中模块查找规则：【注】以下查找规则均来自于在VS Code中的实践，对于文件以及相应文件的截图太多，比较麻烦，就以文字形式呈现出来。1.当模块拥有路径但没有后缀时require('./home.js')require('./home')（1）当路径完整时，直接引入模块文件，读取。（2）当路径不完整时，首先查找同名文件，如果查找到同名文件，则会查找当前文件夹下的package.json文件中的main选项中的入口文件，但入口文件要求在当前文件夹下；如果找不到入口文件，则会查找当

原创 如何使用Promise来封装Ajax

题目：请使用Promise封装Ajax操作 原始的Ajax操作如下：var onSuccess = function(result){}; //成功的回调var onFail = function(error){}; //失败的回调var xhr = new XMLHttpRequest();xhr.open("POST", "www.baidu.com", true);xhr.onload = function(){ if(xhr.readyState === 4 && x

原创 关于Vue-router的几点知识

1.怎么进行路由重定向？//将/home重定向到根目录const routes = { {path:'/',redirect:'/home'}}2.vue-router怎样配置404页面？*，放在最后{ path: '*', component: NotFoundComponent }3.Vue-router有几种模式，他们之间有什么区别？（1）hash模式： 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新；url路径会出现“#”号字符（2）history

原创 ES6新特性思维导图（部分）

原创 Vue CLI生成的各文件夹代表的意思

原创 fatal: The current branch master has no upstream branch. To push the current branch and set

使用git push推送分支时，遇到错误：fatal: The current branch master has no upstream branch.To push the current branch and set the remote as upstream, usegit push --set-upstream origin master大意就是，当前分支与远程分支未建立联系，按照提示运行将分支进行关联，然后再使用git push命令再次复习一下今天使用到的Git指令：#查看分支g

原创 对重绘和重排（回流）的知识点梳理

1.重绘和重排（回流）是什么？该怎样来避免？重绘就是重新绘制（repaint）重排就是重新排列（reflow）DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但是重排一定发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免。网页如何生成（webkit内核浏览器渲染机制）解析html构建DOM树解析css绘制CSS树生成render tree（渲染树）layout排列，将渲染树节点合成（渲染）painting绘制，将排列绘制在屏幕上（渲染）任何对render tree

原创 Git工作流程及常用命令

1.什么是Git？Git 是一个开源的分布式版本控制系统 ，可有效的帮助团队进行多人协作开发。在Git项目开始时，项目有一个远程的中央仓库，团队成员在本地克隆中央仓库的文件进行开发。每一位成员的项目开发基线都领先于平台却又各自不同，如果将每个成员的开发成果合在一起就是项目的最新状态，也可以说项目的最新状态存在于每位成员的本地仓库中，这就是分布式开发的概念。2.Git工作流程一般工作流程如下：克隆 Git 资源作为工作目录。在克隆的资源上添加或修改文件。如果其他人修改了，你可以更新资源。在提交

原创 Vue实例的生命周期以及钩子函数

Vue实例的生命周期每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项})从创建到销毁的过程，这些过程会伴随一些函数的自调用，我们称这些函数为钩子函数。常用的钩子函数：beforeCreate在实例初始化后，数据观测和事件配置之前被调用create在实例完成创建后，但页面还未被渲染beforMount在挂载开始之前被调用，此时页面还看不到真实数据，只是一个模板页面mountede

转载 计算属性

计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属

原创 JS中基于数组的队列结构

认识队列栈，是一种比较高效的数据结构，遵循 先入后出(LIFO，last-in-first-out) 的原则。队列，它也是一种特殊的列表，它与栈不同的是， 队列只能在队尾插入元素，在队首删除元素，遵循 先进先出(FIFO，First-In-First-Out) 的原则，也是计算机常用的一种数据结构。同栈有点类似，队列的操作主要也是有两种：向队列中插入新元素和删除队列中的元素，即入队和出队操作，我们采用enqueue(element)：入队dequeue() ：出队front()：返回队首元素，该

原创 JS中的栈结构

什么是栈栈是一种高效的数据结构，因为数据只能在栈顶添加或删除，所以这样的操作很快，而且容易实现。栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。栈被称为一种后入先出（LIFO，last-in-first-out）的数据结构。由于栈具有后入先出的特点，所以任何不在栈顶的元素都无法访问。为了得到栈底的元 素，必须先拿掉上面的元素。栈的常见操作栈的封装function Stack(){ //栈的属性：数组 this.items = []

原创 本地储存和离线储存

HTML中的储存方式1.本地储存数据存储在用户浏览器中，设置、读取方便、甚至页面刷新不丢失数据。两种储存方式容量较大，sessionStorage约5M、localStorage约20M，只能存储字符串，可以将对象JSON.stringify() 编码后存储。1.1 window.sessionStorage1、生命周期为关闭浏览器窗口2、在同一个窗口(页面)下数据可以共享3、以键值对的形式存储使用存储数据：sessionStorage.setItem(key, value)获取数据：

原创 JS中的继承

JS中的两种继承：1.构造函数法：继承属性 //call()方法可以修改this指向 //构造函数做法：先定义一个父构造函数，再定义一个子构造函数，子构造函数使用call方法继承父构造函数的属性 function Foo(uname,sex){ this.uname = uname; this.sex = sex; } function Foo1(uname,sex){ //

原创 原型和原型链理解思路详解

原型对象原型怎样共享构造函数方法的？因为属性是简单数据类型实例对象可以直接使用，而函数是复杂数据类型，需要开辟内存空间，才能调用，当有多个实例对象的时候就会开辟多个一样的函数，这样就造成了内存的浪费。通过原型对象能够让所有实例共享这些方法。prototype是构造函数的内置属性，其中存放了一个对象，称其为原型对象__proto__是实例对象的内置属性，称之为对象原型具体思路图解如下：构造器：constructor对象原型（proto）和原型对象（prototype）里面都有一个属性cons

原创 简单理解事件委托

事件委托事件委托简单理解就是不给子元素注册事件，给父元素注册事件，把子元素的事件处理通过父元素来执行，这其中利用了事件冒泡的原理，点击子元素检测不到注册事件往上传递到父元素。事件委托减少了DOM访问次数，缩短整个页面的交互就绪时间。【注】事件冒泡的复习可以参考上一篇文章举例代码如下：创建li元素后利用事件委托和排他思想注册点击事件 <div> <ul></ul> </div> <script>

转载 事件流

事件流描述的是从页面接收事件的顺序事件流经历的三个阶段：捕获阶段当前目标阶段冒泡阶段用图示如下：【注】JS代码中只能执行冒泡或者捕获其中一个阶段；addEventListener(type,callback,useCaptrue),第三个参数是true即为捕获阶段，是false即为冒泡阶段，默认为false。有些事件是没有冒泡的，onblur、onfocus、onmouseenter、onmouseleave冒泡阶段var son = document.querySelector('.

转载 this指向问题

this指向问题this指向是调用函数时确定的，调用方式的不同决定了指向不同。一般是指向函数的调用者。普通函数调用，this指向window构造函数调用，this指向new的对象实例对象方法调用，指向该方法的所属对象事件绑定方法，指向绑定的事件对象定时器函数，指向window立即执行函数，指向window改变this指向的方法call()方法简单理解为调用函数的方式，但可以改变this的指向。经常在继承中出现。 //call()方法，格式call(指向对象，参数)

原创 数据类型强制转换

数据类型的强制转换其他基本数据类型转换为字符串（1）加空字符串或者加其他字符串（2）toString()方法（3）prompt()，不管输入的是什么内容都是字符串。其他数据类型转换为Number方式一：使用Number()函数（1）字符串→数字如果字符串是纯数字，则直接将其转化为数字如果字符串有非数字内容，则转化为NaN如果字符串是一个空串或者全为空格，则转化为0（2）布尔值→数字true转成1false转成2（3）null→数字结果为0（4）undefined转

转载 变量和函数声明提升

变量和函数声明提升变量提升什么是变量提升：js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。 【注意：变量提升不提升变量的赋值】 console.log(a);//undefined var a=1; //预编译后的代码结构如下： var a; console.log(a);//undefined a=1;记住：变量提升是相对于其作用域的，当变量为全局变量时，提升至全局的

转载 ajax总结

Ajax1.定义指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。2.Ajax工作原理https://www.runoob.com/wp-content/uploads/2013/09/ajax-yl.pngAjax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。3.Ajax的使用3.1XMLHttpRequest 的方法：（1）open() 方

转载 媒体查询

媒体查询1.定义：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。2.语法：@media mediatype and|not|only (media feature) {    CSS-Code;}也可以针对不同的媒体使用

转载 flex布局

1.flex布局1.1传统布局与flex布局（1）如果是PC端页面布局，还是使用传统布局；（２）如果是移动端或者不考虑兼容性的PC端页面布局，则使用flex弹性布局1.2布局原理当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效子盒子可以横向排列，也可以纵向排列，布局灵活总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。2.属性2.1常见的父项属性以下6个属性是对父元素设置的：（1）flex-direction：设

原创 小白总结MYSQL基本语句思维导图

MYSQL基本语句思维导图，小白总结，有错望指出。

原创 小程序中定义了全局样式，三页面中有一个没有显示，是什么情况，求大佬帮忙解答。

/app.wxss/.view1 {width: 100%;height: 350rpx;background: linear-gradient(#fff,#fbb);}中间页面为空白，另外两个页面有显示，且空白页对应的wxss为空。