- 博客(54)
- 收藏
- 关注
RSS订阅原创 常见React-hooks原理
文章目录useMemouseCallbackuseStateuseReduceruseRefuseEffectuseMemouseMemo的功能是记忆某个结果，只有当依赖项发生改变时才会更新输出结果组件初始化：执行计算函数，获取计算结果缓存计算结果和依赖项计算返回结果组件更新：判断依赖项和缓存的依赖项是否相同，相同则直接返回已缓存的计算结果不同则执行计算函数，获取新的计算结果，缓存新计算结果和新的依赖项并返回计算结果注意：React会使用Object.is()对新旧依赖数组中
2022-04-09 20:54:46
996
原创 虚拟DOM和Diff算法
文章目录虚拟DOM和diff算法虚拟DOMDiff算法单节点diff多节点diffreact中key值的作用如何理解fiberReact的双缓存机制虚拟DOM和diff算法虚拟DOM背景：以前使用jq等命令式的完成一些DOM操作，伴随着前端工程化的不断发展，涌现了react、vue等MVVM框架，不用再关心具体的DOM操作，而是把重点放在了基于数据状态的操作，一旦数据更改，相应的DOM元素也会跟着变化，这种声明式的开发方式极大地提高了开发体验，更好地帮助我们实现组件复用、逻辑解耦等虚拟DOM本质上
2022-03-31 11:01:35
1365
原创 前端面试——安全相关
XSS推荐一篇文章跨站脚本攻击，在网页中嵌入一段js代码反射型xss（非持久型）：攻击的代码放在url中，提交到服务器，又返回给客户端，浏览器解析执行存储型xss（持久型）：常见的攻击方式是在留言的地方，输入一段xss脚本，服务端将评论内容存储在数据库中，这样每次刷新浏览器都会解析执行攻击代码防御输入过滤、输出编码（如把留言全部当成字符串）设置cookie为http-only：只要cookie含有http-only字段，那么任何javaScript脚本都没有权限读取这条cooki
2022-02-15 18:09:38
2382
原创 前端面试——浏览器存储&浏览器缓存（http缓存机制）
浏览器存储cookie和session的区别cookie数据存放在浏览器上，session存放在服务器上cookie一般在客户端有大小限制，一般为4K，session没有限制，但是考虑到服务器性能，一般不能存放太多数据cookie可以设置过期时间，否则一直有效，session在超过一定的时间（通常30min）后就会失效，当关闭浏览器时，会自动调用session.invalidate()方法，清除掉session中的信息cookie安全性较低，可以通过分析本地的cookie并进行co
2022-02-15 18:05:50
2549
原创 事件循环例题，你能做对几道？
例题1new Promise((resolve)=>{ resolve();}).then(()=>{ console.log(1); Promise.resolve().then(()=>{ console.log(2); })}).then(()=>{ console.log(3);})例题2new Promise((resolve)=>{ resolve();}).then(()=>{
2022-02-12 16:02:18
710
1
原创 前端面试——设计模式之发布-订阅模式
文章目录发布订阅模式（观察者模式）通用的发布-订阅模式取消订阅的事件全局的发布-订阅对象模块间通信先发布再订阅总结发布订阅模式（观察者模式）定义：定义对象之间一对多的依赖关系，当一个对象状态发生改变时，所有依赖它的对象都将得到通知发布-订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要做任何改变，同样发布者需求改变时，也不会影响到之前的订阅者。只要约定的事件名没有变化，就可以自由地改变它们实现发布-订阅模式指定发布者
2021-11-27 10:59:11
981
原创 前端面试——设计模式之策略模式
文章目录策略模式使用策略模式计算奖金表单验证（多种校验规则）策略模式的优缺点策略模式定义：定义一系列的算法，把它们一个个封装起来，并且使它们之间可以相互替换将不变的部分和变化的部分分隔开是每个设计模式的主题，策略模式的目的就是将使用的算法和算法的实现分离开来使用策略模式计算奖金绩效为S的人奖金为4倍工资，A为3倍，B为2倍，要求提供一段代码，方便地计算每个员工的奖金//策略对象const strategies={ 'S':function(salary){ re
2021-11-27 10:58:05
728
原创 前端面试——设计模式之单例模式
文章目录单例模式透明的单例模式用代理实现单例模式惰性单例单例模式核心：确保只有一个实例，并提供全局访问 （注意：全局变量不是单例模式）实现：用一个变量标志当前是否已经为某个类创建过对象，如果是，则在下次创建类实例的时候，直接返回之前创建的对象（用闭包缓存数据），若不是则通过new创建一个新的对象应用场景：登录框透明的单例模式需求：实现一个透明的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。为了把标志变量instance封装起来，此处使用自执行的匿名函数和闭包const
2021-11-27 10:56:53
358
原创 前端面试——跨域问题
文章目录cookie和session的区别cookie，localStorage，sessionStorage的区别CSRF和XSS攻击及防范跨域问题浏览器的同源策略跨域解决方案跨域资源共享（CORS）通过JSONP跨域websocket协议跨域cookie和session的区别cookie数据存放在浏览器上，session存放在服务器上cookie一般在客户端有大小限制，一般为4K，session没有限制，但是考虑到服务器性能，一般不能存放太多数据cookie可以设置过期时间，否则一直有效，se
2021-11-27 10:53:05
2566
原创 关于js和css是否阻塞dom解析和渲染
关于css和js是否会阻塞DOM解析和执行通常我们把script标签放在body尾部，link标签放在head头部，通过CDN引入第三方库时，放在link标签前面概括CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染JS会阻塞DOM解析CSS会阻塞JS的执行浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染Body内部的外链CSS较为特殊，会形成FOUC(样式闪烁)现象，请慎用
2021-11-27 10:48:05
2831
原创 前端面试——CSS篇
01-css盒模型box-sizing：padding-box（包含padding和content）、border-box（IE盒模型）、content-box（标准盒模型）CSS中盒模型分为IE盒模型和标准盒模型：二者主要区别是width的包含范围IE盒模型的width表示content+padding+border这三部分的宽度标准盒模型的width只是content部分的宽度02-BFC（块级格式化上下文）块级格式化上下文，是一个独立的渲染区域，并且有一定的渲染规则，约束
2021-11-14 20:47:03
432
原创 前端面试——HTML篇
01-href和src的区别请求资源类型不同：href表示超文本引用，用来建立当前元素和文档之间的连接，如: link、a请求src资源时会将其指向的资源下载并应用到文档中，如script、img、iframe作用结果不同：href用于在当前文档和引用资源之间确立联系src用于替换当前内容浏览器解析方式不同：用href引入，浏览器会识别为css文件，会并行下载资源并且不会停止对当前文档的处理（因此建议css使用link加载）使用src，浏览器解析到src时会暂停其他资源的下载和处
2021-11-14 20:42:44
885
原创 JS实现瀑布流布局
瀑布流布局的特点：各元素等宽不等高大概效果如下：分析通过定位布局先确定在浏览器显示区域内，一行能放多少列图片获取页面的宽度pageWidth（做兼容）图片盒子宽度itemWidth间隙gap列数：column=pageWidth/(itemWidth+gap)先排第一行当盒子索引小于列数column的时候，就排在第一行确定在第一行后，动态设置left的值,top值为0left=i*(itemWidth+gap)第一行排好之后，因为第二行需要考虑top值，将
2021-05-18 17:39:58
459
1
原创 数组扁平化的四种方法
文章目录数组扁平化数组扁平化的四种方法数组自带的flat方法利用正则函数递归使用reduce数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr=[1,[2,[3,4]]]=>[1,2,3,4]数组扁平化的四种方法数组自带的flat方法const arr=[1,[2,[3,4]]];console.log(arr.flat(Infinity));// [1, 2, 3, 4]利用正则先使用JSON.stringify(arr)将
2021-05-16 15:50:53
511
原创 reduce方法详解（含数组扁平化、数组去重）
文章目录参数应用场景数组求和reduce实现数组扁平化统计数组中元素出现的次数reduce数组去重参数arr.reduce(callback(prev,cur,index,arr),init);prev：上一次调用时的返回值，或者初始值init(传入init)cur：当前正在处理的数组元素index：和当前正在处理的数组元素一一对应arr：原数组init：初始值，该值也决定了返回值的数据类型常用的参数：prev、cur、init应用场景数组求和、求乘积计算数组中每个元素的出现次
2021-05-16 15:44:17
419
原创 JS的事件循环机制-event-loop
文章目录JS运行机制event-loopJS运行机制1、谈谈JS的运行机制JS是单线程的，因为js离不开用户的操作，和用途有关例如：操作页面上的dom元素，假设js是多线程，一个线程是删除dom，一个线程是增加dom，这样就不知道该以哪个线程为主了2、JS语言的特点？单线程、解释性语言event-loop事件循环机制 由三部分组成：调用栈、微任务队列（微队列）、消息队列（宏队列）event-loop开始的时候，会从全局一行一行地执行，会压入到调用栈中，被压入的函数被
2021-05-15 09:22:23
205
原创 JS防抖和节流
文章目录情景借助underscore实现防抖（debounce）应用场景基本实现立即执行返回值和取消操作节流(throttle)应用场景使用时间戳完成节流函数({leading:true,trailing:false})使用定时器完成节流函数（{leading:false,trailing:true}）合并、处理第三个参数函数防抖和节流：解决频繁性的事件触发，实现前端页面性能优化。情景<body> <div class="box"></div> &l
2021-05-13 20:07:45
200
2
原创 Promise面试题——宏队列和微队列
宏队列和微队列JS中用来存储待执行回调函数的队列包含两个不同的特定的队列宏队列：用来保存待执行的宏任务（回调），如：定时器回调、dom事件回调、ajax回调微队列：用来保存待执行的微任务（回调），如：promise的回调、MutationServer的回调js首先必须执行完所有的初始化同步代码每次准备取出第一个宏任务执行前，都要先将所有的微任务一个接一个地取出来执行分析输出结果：setTimeout(()=>{ console.log('0');},0);n
2021-05-11 11:10:28
427
原创 手写Promise核心
文章目录起步构建then()、链式调用then中回调的返回值类型代码优化、返回约束静态resolve()和reject()all(promises)race()注意异步操作和处理异常起步构建状态、值、executor、resolve、reject由于状态只改变一次，所以在resolve和reject改变状态之前要先判断当前是否为pending状态。注意处理异常：如在executor中调用resolve或reject的时候传入未定义变量。因此需要在executor外层加上try-catch捕获异常。
2021-05-10 19:45:03
138
原创 react表单全选、取消全选、反选
需要实现的功能：点击全选，把所有选项选中或者取消勾选如果全选之后，取消勾选其中一个或多个，则把全选也取消勾选如果所有选项都选中的话，那么把全选也选中下面用两种方法实现：借助jquery在react项目中使用jquery要先安装jquery并引入$yarn add jqueryimport $ from 'jquery';代码如下：import React,{Component} from 'react';import $ from 'jquery';class FormSe
2021-04-05 11:16:28
1316
原创 原始包装类型、单例内置对象
文章目录原始包装类型BooleanNumbertoFixed()toPrecision()、toExponential()isInteger()与安全整数String字符串操作方法字符串位置方法字符串包含方法trim()去掉两端空格repeat() 复制字符串padStart()、padEnd() 填充字符字符串迭代与解构toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()字符串模式匹配方法localeCompare() 比较
2021-03-30 09:36:32
266
原创 跨域问题相关
文章目录跨域问题解决跨域的三种方法1、跨源资源共享(CORS)JSONPreact脚手架配置代理(proxy)第一种配置代理的方法第二种配置代理的方式跨域问题通过xhr进行ajax通信的一个主要限制是跨院安全策略。默认情况下，xhr只能访问与发起请求的页面在同一个域内的资源。这个安全策略可以防止某些恶意行为。解决跨域的三种方法我们在5000端口开启一个服务，需要做的是跨域请求服务端返回的数据。sever1.js如下const express=require('express');const
2021-03-11 22:44:11
1431
5
原创 apply、call、bind改变this指向
apply和call改变this指向apply和call方法也是函数的调用方式apply和call如果没有传入参数，或者是传入的null，那么该方法的函数对象中的this就是默认的windowapply和call传入参数的写法不一样，但是效果一样 function add(x,y){ console.log('result: '+(x+y)+this); } add(1,2);//result: 3[object Window] add.apply();//result: Na
2021-03-05 22:23:16
231
原创 构造函数、实例对象、原型对象
文章目录构造函数与实例对象之间的关系原型简单的原型写法原型添加方法、属性解决数据共享问题原型中的方法相互访问实例对象使用属性和方法的层层搜索为内置对象添加原型方法原型链改变原型的指向原型最终指向构造函数与实例对象之间的关系1、实例对象是通过构造函数来创建的——创建的过程叫实例化2、如何判断对象是不是这个数据类型？1)对象 instanceof 构造函数的名字（更常用）2)通过构造器的方式：实例对象.构造器==构造函数的名字 console.dir(obj);//console.dir显示对象的结
2021-03-05 20:49:02
1487
原创 JS创建对象的四种方式
对象：特指某个事物，具有属性和方法创建对象：实例化一个对象的同时对其属性进行初始化1、字面量创建对象var obj1={ name:"amethyst", color:"blueviolet", code(){ console.log('love coding'); }}console.log(obj1.color);//bluevioletobj1.code();//love coding调用系统的构造函数创建对象var obj2=new
2021-03-05 09:21:03
3489
7
原创 使用React-Redux编写TodoList
准备工作TodoList组件import React,{Component, Fragment} from 'react';import 'antd/dist/antd.css';import { Input,Button,List } from 'antd';import { UserOutlined } from '@ant-design/icons';class TodoList extends Component{ render(){ return (
2021-02-20 12:02:31
193
原创 利用Redux-Saga中间件实现ajax数据请求
Redux中间件redux中间件作用于action与store之间其实就是对store的dispatch方法做一个升级引入中间件之后，如果dispatch的参数是一个对象，它会直接将对象传递给store,如果参数是一个函数，那么dispatch会让这个函数先执行完毕，需要调用store的时候再用函数调用storeRedux-thunk vs Redux-Sagaredux-thunk的思路是将异步请求放在action中去实现，而redux-saga是将异步请求抽取出来单独放在一个文件里，相对来说
2021-02-19 23:24:00
234
原创 利用Redux-thunk中间件实现ajax数据请求&Redux的使用
准备工作在index.js中创建storeimport {createStore} from 'redux';import reducer from './reducer';const store=createStore(reducer);export default store;store中最原始的数据此时的TodoList如下：服务端返回一个数组：[‘Amethyst’,‘Lecheng’,‘Forever’]const express=require('express')
2021-02-19 19:01:15
169
原创 React中的虚拟DOM&Diff算法
文章目录虚拟DOM概念如何重新渲染页面优点虚拟DOM中的Diff算法Diff算法特点key值的引入虚拟DOM概念虚拟DOM其实就是一个JS对象，用它来描述真实的DOM如何重新渲染页面数据发生变化，如：<div id='root'> <span>hello world</span></div>变为：<div id='root'> <span>hello Amethsyt~</span>&l
2021-02-16 00:31:33
170
原创 react组件之间的传值
分享一个很可爱的图hhh~react具有单向数据流的特点，子组件只能使用父组件所传的值但不能修改。父组件通过属性向子组件传值，子组件通过方法反过来去调用父组件的数据，最终相当于是父组件自己修改的数据例：实现一个TodoList的删除item功能父组件TodoList.jsimport React,{Component, Fragment} from 'react';import TodoItem from './TodoItem';class TodoList extends Compon
2021-02-15 14:01:41
353
原创 正则表达式
文章目录元字符（限定符）示例创建正则表达式对象正则表达式其他方法的使用match()replace()exec（str）ES9正则扩展命名捕获分组正则断言dotAll模式ES11-String.prototype.matchAll元字符（限定符）元字符含义.除了\n以外的任意一个单个字符[]范围()分组，提升优先级|或者*0-多次+1-多次?0-1次{0,}*{1,}+{0,1}?\d数字\D非
2021-02-11 16:26:26
144
2
原创 async和await结合读取多个文件
现有三个md文件如下：part1.mdpart2.md鱼遇.md需求：读取以上三个文件的内容并输出。首先，回顾一下用Promise的then链式调用读取多个文件是如何实现的呢？代码如下：//promise的then链式调用实现//引入fs模块const fs=require('fs');const p=new Promise((resolve,reject)=>{ fs.readFile('./part1.md',(err,data)=>{ i
2021-02-10 16:36:45
412
1
原创 配置React项目的webpack
src文件夹index.html基础配置安装webpack-dev-server、html-webpack-plugin、react、react-dom（react相关的包不加-D）、babel-loader、babel-core(注意版本兼容问题)package.json配置webpack.config.js，安装@babel/preset-react和@babel/preset-envconst HtmlWebpackPlugin=require('html-webpack-p
2021-02-04 23:02:00
299
原创 webpack开发和生产环境配置
首先完成webpack基础配置创建webpack.dev.config.js和webpack.prod.js文件后配置package.json如下：安装依赖包：html-webpack-plugin、css-loader、style-loader、less-loader、file-loader(图片相关)、CleanWebpackPlugin(清理上一次的记录)、MiniCssExtractPlugin(抽离css文件)我的src文件夹内容如下：index.htmlindex.cssi.
2021-02-04 20:36:38
193
4
原创 关于webpack-dev-server和webpack4.x配置热更新&jsonp无刷新
学webpack以来折腾最久的一次bug…安装webpack-dev-server（在此之前要先完成webpack基本配置，不再赘述）yarn add webpack-dev-server -D此时出现警告如下：原因是chokidar 2和fsevents 1版本过低，node.js版本在14以上时将会报此错，接下来，用npm upgrade升级（先要保证安装了npm upgrade）npm-check 检查更新:npm install -g npm-checknpm-upgrade
2021-02-03 19:51:41
457
6
原创 苏宁案例(rem适配)—zepto&Swiper应用
文章目录less适配Zepto轮播图（zepto实现）Swiper轮播图（Swiper实现）less适配less&rem适配方案ZeptoZepto.js.api中文版Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api注意：有些操作除了zepto.min.js还需引入其他文件此处用到zepto的selector.js(扩展选择器)、fx.js(animate函数)、touch.js(手势—swipeLeft、swipeRight)
2021-01-28 18:34:57
214
原创 less&rem适配方案
文章目录less基本语法less浏览器端的使用remrem的认识移动端适配方案——rem适配用less适配各类设备（改变html的字体大小，@media）less基本语法变量、mixin、嵌套(注意&:hover、.@{var})、导入less浏览器端的使用1. 浏览器不识别less代码，必须先解析为css代码2. 引入less文件需要加上type="text/less"3. less.watch();无刷新预览新样式 有延迟4. 以http形式打开网页（不支持file）&
2021-01-28 17:48:47
321
原创 微金所案例总结——Bootstrap应用&模板引擎的使用
文章目录自定义字体图标(@font-face)Vertical-align复习模板引擎动态添加轮播图需求分析ui框架&模板引擎转JSON格式数据获取轮播图数据（ajax）根据数据动态渲染模板引擎在html中的使用（注意text/template）测试功能 resize-页面尺寸发生改变移动端手势切换动态设置元素宽度（解决换行问题）&IScroll实现区域滑动优化（做数据缓存）Bootstrap工具提示（要初始化）自定义字体图标(@font-face)@font-face { /*
2021-01-28 16:20:01
607
2
原创 响应式布局&Bootstrap&writing-mode
文章目录响应式布局响应式原理媒体查询BootstrapBootstrap中文文档基本模板响应式布局容器：.container流式布局容器： .container-fluidnormalize和reset栅格系统响应式栅格系统栅格系统的扩展（嵌套、偏移offset、排序pull,push）内容的显示和隐藏(visible、hidden)writing-mode复习响应式布局简言之，就是一个网站能够兼容多个终端，在新建网站上普遍采用响应式开发响应式原理媒体查询/** 响应式容器：* 1、在超小屏
2021-01-22 23:07:27
258
原创 C3_animation复习
animation的属性&动画的添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /* * 必须要有animation-name和animation-duration * * animati
2021-01-21 23:32:22
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人