- 博客(40)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript实现图片懒加载
什么叫懒加载？懒加载是相对于预加载的一个概念。预加载是在用户查看之前加载数据，等用户查看的时候，能够很快显示。而懒加载是延时加载，就是在用户需要用到的时候再去加载，可以减少请求次数、降低内存消耗。比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。懒加载原理一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是：在图片没.
2021-01-05 16:22:31
230
原创 react项目打包后点击index.html页面出现空白
【问题描述】使用npm run build打包react项目后，index.html页面出现空白【原因】出现该情况可能是因为找不到资源【解决办法】在package.json中配置homepage，然后重新打包即可
2020-12-19 16:27:48
1016
1
原创 leetcode-32. 最长有效括号（JavaScript三种解法）
题目描述给定一个只包含 '(' 和 ')' 的字符串，找出最长的包含有效括号的子串的长度。示例 1:输入: "(()"输出: 2解释: 最长有效括号子串为 "()"示例 2:输入: ")()())"输出: 4解释: 最长有效括号子串为 "()()"方法一：动态规划时间复杂度：O(n) 空间复杂度：O(n)dp[i]代表当前从i开始，自右向左能匹配到的最长有效括号。所以当s[i]为左括号时，dp[i]一定为0。当s[i]为右括号时，dp[i]应该找到与它相匹
2020-12-08 12:07:23
373
原创 react引入装饰符@
create-react-app创建的项目默认不支持修饰符，需要自行配置。安装npm install -D @babel/plugin-proposal-decorators修改package.json"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ], "presets": [ "
2020-12-07 12:48:02
150
原创 解决npm run eject报错
使用create-react-app初始化react项目后，执行npm run eject命令可以暴露隐藏的配置文件但是直接执行会报错，需要在执行前依次执行以下命令git initgit add .git commit -m "Saving before ejecting"最后运行npm run eject命令，就可以在根目录下暴露隐藏的config文件夹。...
2020-12-07 12:43:53
309
原创 react按需引入antd
1. 安装依赖包：npm install babel-plugin-import customize-crareact-rewired--save2. 在项目根目录新建 config-overrides.js 文件，写入以下内容：const { override, fixBabelImports } = require('customize-cra');module.exports = override( fixBabelImports('import', { l...
2020-11-15 09:43:23
134
原创 网络安全：XSS 和 CSRF
一、XSS（跨站脚本攻击）1. 什么是XSS？XSS(Cross-Site Scripting)，跨站脚本攻击是指恶意攻击者往Web页面里插入恶意script代码，当用户浏览该页之时，嵌入其中Web里面的script代码会被执行，从而达到恶意攻击用户的目的。2. XSS攻击分类：（1）反射性：URL参数直接注入<非持久化> 攻击者事先制作好攻击链接, 需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。（2）存储型：存储到
2020-10-25 21:01:54
188
原创 react生命周期
（1）constructor：初始化state（2）getDerivedStateFromProps(nextProps,prevState)：在render前被调用，接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidupdate，可以覆盖componentwillReceiveProps的所有用法注意：getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，...
2020-10-07 21:43:39
72
原创 【react】react中setState的用法
setState的用法在react中，state是不能直接修改的，要用setState，setState的用法有以下两种：用法一：setState(updater[, callback]) updater：函数类型，这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，返回一个更新后的 state 中的状态对象，它会和 state 进行浅合并。 callback： 可选，回调函数。 用法二：setState(stateChange[, callback
2020-10-07 19:46:49
1336
原创 【react】react中ref的使用
ref的作用一句话总结：获取真实DOMRefs 是 React 中引用（references）的简写。可以用于获取一个 DOM 节点或者 React 组件的引用。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。可以用来绑定到 render() 输出的任何组件上。createRef()获取DOM节点引用①在constructor中this.name = React.createRef();②在元素上绑定ref = { this.name }③
2020-10-07 17:04:08
845
原创 【react】react中key值的作用
背景在react开发中，如果要添加多个相同的节点，那一定要为节点添加key值，且key值一定是唯一的。这是因为react利用key来识别组件，它是一种身份标识。有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。如果不添加key值，页面会正常渲染但也会报错，正常渲染是因为react会通过diff算法比较dom的差异，报错是因为这种写法会影响渲染的性能。key值的作用对于同一层级的一组节点，可以通过key值唯一标识它们，提高dom更新效率
2020-10-07 16:28:39
266
原创 【React】HOOK的使用规则
什么是HOOK?我们都知道，在react的函数组件中，是不能维护state的，函数组件也没有生命周期。而HOOK的出现，使得函数组件可以维护state，也可以拥有生命周期。HOOK使用规则（1）只能在函数最外层调用HOOK。不要在循环、条件语句或子函数中调用useState、useEffect等。（2）只能在React函数组件或者自定义HOOK中调用HOOK，不能在其他JavaScript函数中调用。useStateconst [state, setState] = useStat.
2020-10-06 17:50:49
685
原创 前端常见算法题（三）排序
冒泡排序function bubble(arr){ for(let i=0; i<arr.length-1; i++){ for(let j=0; j<arr.length-1-i; j++){ if(arr[j] > arr[j+1]){ let temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } return arr;}插入排序function
2020-09-06 23:17:44
93
原创 前端常见算法题（二）数组去重
要去重的数组：var arr = [1, 2, 3, 4, 4, 5, 5, 6, 7, 8, 8];1、ES6的Set结构set结构类似于数组，但是set中没有重复值var newArr = new Set(arr);arr = Array.from(newArr); //或者arr = [...newArr]2、indexOf()方法var newArr = [];for(let i=0; i<arr.length; i++){ if(newArr.
2020-09-06 22:44:05
97
原创 前端常见算法题（一）数组扁平
数组扁平是指将一个多维数组转化成一位数组，如：[1, 2, [3, 4]] ------> [1, 2, 3, 4]1、ES6数组方法：flat()flat()方法可以将多维数组转换成一位数组，它的参数是转换的维度，在这里我们设为无穷大（Inifity）即可。arr = arr.flat(Inifity);2、toString() + split()toString方法将会返回已扁平的一维数组，注意是字符串，所以需要用split再将字符串转换成数组，最后map对每个元素进行处理。
2020-09-06 21:31:58
153
原创 两边固定中间自适应布局---圣杯布局与双飞翼布局
一、圣杯布局与双飞翼布局区别如果将布局结构拆分成容器、左固定、中适应、右固定四部分，在圣杯布局中，左固定、中适应和右固定三部分都位于容器中；而在双飞翼布局中，只有中适应位于容器中，左固定和右固定两部分位于容器外。在代码中结构如下：圣杯布局<div class="container"> <div class="left"></div> <div class="center"></div> <div
2020-09-06 00:53:43
146
原创 JS跨域常见的三种方法---JSONP、CORS、postMessage
一、JSONP1. JSONP原理：（1）不存在跨域请求限制的标签：img、script、link、iframe、form，JSONP正是利用script标签的该特性实现跨域（2）JSONP利用<script>标签不受跨域请求限制的特性，向服务器发送请求，并且将回调函数传递给服务器；服务器收到请求和函数后，以json格式作为回调函数的参数传递给它，也就是用json数据来填充回调函数，并返回数据到客户端；客户端收到服务器响应后执行回调函数，该回调函数可以用来处理服务器的返回数据。2
2020-08-08 02:14:57
711
原创 a标签不跳转的三种方法
onclick时间返回false<a href="https://www.baidu.com" onclick="return false">a标签不跳转</a>用href伪协议；写法一：最常用的方法，也是最周全的方法，void是一个操作符，void(0)返回undefined，地址不发生跳转。<a href="javaScript:void(0);">a标签不跳转</a>写法二：这种写法跟写法一类似，区别只是执行了一条空的js代码..
2020-08-03 17:47:07
10864
原创 弄懂JS隐式转换规则，一张图就够了（二）
之前我们总结了JS中抽象比较（==）的数据类型转换规则，这一篇我们来讲讲JS加法中的数据转换规则。话不多说，上图当两个不同类型的数据相加时，低层级的数据类型向高层级的数据类型转换，直到+号两边数据类型相同比如最高层级的String与其他任意类型相加时，其他类型都会转换成String，再与之相加。举个例子：String与其他类型相加，其他类型转换成Stringconsole.log(1 + '2' + 1) //121console.log(1 + +'2' + 1) //4c.
2020-08-03 13:55:06
263
原创 backgroung-position属性值
值 描述 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 x% y% 第一个值是水平位置，第二个值是垂直位置。 左
2020-08-02 10:02:45
265
原创 JavaScript中this指向的六种情况
事件绑定：给元素的某个事件行为绑定方法，当事件行为触发，方法执行，方法中的THIS是当前元素本身（IE6~8中基于attachEvent方法实现的DOM2事件绑定，事件触发，方法中的THIS是WINDOW而不是当前元素本身）函数调用：指向widow方法调用：指向调用对象，只需要看函数执行的时候，方法名前面是否有"点",有“点”，“点”前面是谁THIS就是谁，没有“点”THIS就是WINDOW[非严格模式]/UNDEFINDE[严格模式]。apply / call：当用apply和call上下文.
2020-07-30 17:18:53
232
原创 触发回流（reflow）的操作总结
JS更改DOM元素（插入，删除、更新、移动、添加动画等，更改DOM颜色除外） 样式表添加或者删除（add/delete stylesheets） 窗口大小改变（screen change） 字体大小改变（font size change） 激活伪类，如:hover（:hover颜色除外） 改变样式属性（颜色，透明度等除外） 更改元素的className 位置计算（对诸如offsetHeight或getComputedStyle之类的元素进行测量） 修改页面上的内容，例如输入框中的文本、用户输
2020-07-30 16:02:59
1552
原创 弄懂JS隐式转换规则，一张图就够了（一）
当两个不同类型的数据进行抽象比较（==）时，JS会将它们先转换成统一数据类型，低层级的数据类型向高层级的数据类型转换，直到“==”左右两边数据类型相同，然后比较数据的值是否相同。举个例子：数字遇上字符串：字符串→数字1 == '1' //true 数字遇上布尔：布尔→数字 0 == false //true数字遇上对象：对象→数字0 == [0] //true字符串遇上布尔：字符串→数字，布尔→数字"" === false //true"..
2020-07-30 15:32:35
853
1
原创 target中parent、top、self有什么不同
1、parent常用在iframe和frame中的子页面访问父页面中的对象2、top ：一个页面可能会有很多层，top是指最顶层的框架3、self ：是指当前窗口
2020-07-27 14:29:29
717
原创 CSS选择器参考手册
&的作用ul{ background-color: #1111111; &li{ margin-top: 5px; }}& 表示嵌套的上一级，这是sass的语法，代表上一级选择器，解释成CSS代码如下：ul{ background-color: #1111111;}ul li{ margin-top: 5px;}CSS 选择器参考手册 选择器 例子 ..
2020-07-24 11:06:37
74
原创 git常用语句
git常用的语句git clone **.git：拷贝项目到本地 git clone -b **.git 拷贝分支到本地 git init：初始化git仓库 git add文件名：把文件添加到暂存区中 git commit -m "提交信息"：提交暂存区内容到本地仓库 git log：查看版本历史 gitcheckout master：切换到主分支 gitcheckout -b 分支名：切换到分支 git reset head文件名：撤销暂存区 git reset --hea...
2020-07-23 17:55:30
332
原创 css---animation属性+@keyframes属性添加动画
animation属性animation 属性是一个简写属性，用于设置六个动画属性：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动
2020-07-20 17:37:00
619
转载 浏览器缓存机制
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览
2020-07-13 15:08:51
219
转载 JavaScript获取 DOM 元素的方式
一、通过元素类型的方法来操作：document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖id document.getElementsByTagName();//标签名 document.getElementsByClassName();//类名 document.getElementsByName();//name属性值，一般不用 document.querySelector();//css选择符模式，.
2020-07-13 11:44:59
95
转载 HTTP常见状态码
HTTP状态码总的分为五类：1开头：信息状态码2开头：成功状态码3开头：重定向状态码4开头：客户端错误状态码5开头：服务端错误状态码1XX：信息状态码状态码 含义 描述 100 继续 初始的请求已经接受，请客户端继续发送剩余部分 101 切换协议 请求这要求服务器切换协议，服务器已确定切换 2XX：成功状态码状态码 含义 描述 200 成功 服务器已成功处理了请求 201 已创建 ..
2020-07-06 11:21:43
94
原创 react父子组件传值
在开发过程中，经常会遇到父组件和子组件之间相互通信，React子组件和父组件通信包括以下几个方面：父组件向子组件传递属性或方法父组件引用子组件时，可以以属性的形式向子组件传递属性和方法，子组件若要使用父组件传递的值，通需要通过this.props.属性名或者this.props.方法名，下面举例说明：父组件：import Child from './component/child'export default class Parent extends Component{
2020-06-24 16:39:40
108
原创 web移动端适配（二）移动端的3种适配方法
rem：css3的一个相对长度单位。相对于html元素的font-size计算值的倍数。即1rem 等于一倍的html元素的font-size值。一、@media+rem1. @media媒体查询， 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面上述代码中，第一个@media screen and (min-width:350px)表示当移动设备的宽度大于350p.
2020-06-17 16:34:29
885
转载 web移动端适配（一）基本概念
物理 / 设备像素（physical pixel）设备像素被称为物理像素，它是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。可以理解为屏幕上的点，这个是跟硬件有关系，跟Web软件语言没一毛钱关系。你见过霓虹灯吗？LED灯？对！就是那上面一个个会发光的颗粒。分辨率（resolution）这也是一个物理概念，其实就是指一个设备上横竖的点数。比如：一个LED灯上面，横着放3个灯泡，竖着放4个灯泡，那么这.
2020-06-17 15:18:22
212
转载 React路由
安装npm i react-router-dom -S导入import { BrowserRouter as Router, Route, Link } from 'react-router-dom';HashRouter与BrowserRouter<Router> <Route path="/"> <Redirect to="/home" /> </Route> <Route p
2020-06-16 10:14:01
140
原创 react---项目中引入axios
第一步：打开终端，执行如下命令，安装axios：npm install -save axios第二步：在需要引入axios的JS文件中添加以下代码：import axios from 'axios'第三步：建议在 componentDidMount() 生命周期中使用axioscomponentDidMount(){ axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
2020-05-24 21:04:49
481
原创 react---创建react项目
https://blog.csdn.net/weixin_42504145/article/details/82831834
2020-05-24 11:43:40
106
原创 vue项目引入elementUI组件
安装 elementUI打开cmd，输入以下内容npm i element-ui -S引入 elementUI完整引入在 main.js 中添加以下内容：import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);按需引入在 plugin / element.js 中注册用到的组件，例如用到Button、Form、FormIt
2020-05-10 10:27:08
145
原创 vue项目创建、启动、结构说明
创建vue项目打开cmd，进入要创建项目的文件夹(vue_project)，执行如下代码，注意项目名要小写：npm init webpack 项目名然后会有一些选择项：最后就在vue_project文件下，创建了一个名为myproject的vue项目启动vue项目打开cmd，进入项目根目录，也就是 vue_project / myproject，执行如下代码：npm run dev如果出现 npm ERR! missing script: dev 的错误...
2020-05-09 17:57:18
521
原创 Vue：Cannot find element: #demo
Vue：Cannot find element: #demo原因：这是js在html页面头部引入自定义js文件的原因，要最后引入自定义js文件，因为要先有元素id,vue才能获取相应的元素正确代码：<!DOCTYPE html><html><head> <title>vue | 入门</title> <meta cha...
2020-03-29 17:01:44
1637
前端HTML5+CSS+JavaScript学习笔记.docx
2020-05-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人