- 博客(59)
- 收藏
- 关注
RSS订阅
原创 JS中关于函数名与变量名重名、作用域链、预解析的问题
一、预解析1.先说js代码的预解析问题，js和许多其他语言不同，它在执行之前会预解析代码，意思就是变量声明和函数声明提升，值得注意的是函数声明提升比变量声明提升的优先级高，先来看几个例子：console.log(a);//打出的是 undefinedvar a=1;console.log(a);//打出的是 1上面的代码与下面的代码等价：var a;console.log(a);...
2019-04-18 22:08:54
1128
原创 关于css中line-height(行高)设置无效的问题
关于css中line-height(行高)设置无效的问题我们先写下这一串代码：<!DOCTYPE html><html lang="en"><head&amp
2018-09-21 21:33:24
23184
14
原创 关于dom.click()多次调用无效的问题
我想通过多次调用click()函数来模拟点击实现某种效果，但是没有达到预期的效果（我的表现是点击只触发了一次）通过搜索发现，可能是。
2023-09-28 16:02:00
211
原创 Husky + lint-staged + ESlint + Prettier(可选) 实现git增量代码lint校验
Husky + lint-staged + ESlint + Prettier(可选) 实现git增量代码lint校验Husky：一个为 git 客户端增加 hook 的工具，它有一些钩子函数，比如pre-commit、 pre-push等: 一个过滤出 git 代码暂存区文件的工具，在每次提交时只检查本次提交的文件上图的index就表示暂存区，lint-staged 只对暂存区的文件执行一些命令。
2023-05-19 15:59:17
881
原创 css、js的加载是否阻塞DOM的解析与渲染
首先说一下浏览器渲染页面的流程：浏览器内核（渲染进程）拿到静态资源后，渲染大概可以划分成以下几个步骤：解析html构建dom树解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）布局render树（Layout/reflow），负责各元素尺寸、位置的计算绘制render树（paint），绘制页面像素信息浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。从以上步骤可以得出几个结论：1.html和css的
2022-04-29 18:30:00
2563
1
原创 css之width继承
只说两点：一、哪些情况下子元素会继承父元素的width属性？只要子元素是块级元素且不定位、不浮动，都会继承父元素的width属性二、width:100%，是以谁为基准的？对于使用position:relative的子元素或浮动的子元素，其基准点始终是基于其直接父元素而言的，跟其父元素是否有定位无关对于绝对定位position:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言对于使用position:fixed的子元素，其
2022-04-29 11:44:54
1104
原创 js中关于函数参数引用传递的误区
先看一段代码：let a = [1, 2, 3]function fn(b) { b = [4, 5, 6]}fn(a)console.log(a)正确的打印结果应该是 [1,2,3]，函数体中的代码并没有影响到外部变量a我们在学习js的时候经常听到的一句话是 简单类型传值，复杂类型传址，意思是简单类型传递的是变量的值，而复杂类型（引用类型）传递的是变量的地址。这句话其实是错误的，这是为了方便理解才总结出来的，而事实是：ECMAScript中所有函数的参数都是按值传递的在向函数传递引用
2021-12-25 21:06:07
518
原创 一文搞懂useCallback的使用
一、useCallback的作用usecallback不是用来解决组件中有过多内部函数导致的性能问题：1.我们要知道，js创建一个函数的成本是非常小的，这点计算对于计算机来说是小case2.其实使用useCallback会产成额外的性能：对deps的判断3.其实每次组件重新渲染时，都无所谓避免重新创建内部函数，因为即使useCallback的deps没有变，它也会重新创建内部函数作为useCallback的实参那么，它的作用到底是什么？useCallback的作用其实是用来避免子组件不必要的reR
2021-12-11 21:57:59
40135
2
原创 webpack打包优化总结
use tree shaking to delete unused code在webpack.config.js中添加 optimization: { usedExports: true, }可以在打包后的文件中的注释中看到未使用的代码在package.json中添加"sideEffects": false来告知 webpack 它可以安全地删除未用到的 export（如果所有代码都不包含副作用），如果有代码文件是有副作用的，比如polyfill，可以在sideEffects属性设置成一个数组，比..
2021-12-06 16:37:58
409
原创 关于video标签使用的一些总结
问题一：用一个div包住video，div下边缘会出现下缝隙（和img标签一样）解决方案：和img标签一样，设置video为display：block或者设置div的font-size为0问题二：给video标签设置autopaly失效，视频没有自动播放解决方案：在Chrome 66后，浏览器关掉了声音自动播放，也就是说和在桌面版浏览器也将失效（移动端最开始是完全禁止音视频自动播放的，后来有放开），可以在video标签加上muted属性，现在视频是静音自动播放，可以再显示一个打开声音的按钮，提示用户点
2021-09-26 11:18:09
1982
原创 前端场景问题经验总结
一、vue中使用$refs时TS报错比如我们在video标签上使用了ref属性，<video ref='myVideo'></video>当我们用this.$refs.myVideo.xxx时ts会报错没有这个属性或方法解决方案：如果你使用了vue-property-decorator，可以用Ref装饰器解决import { Vue, Component, Ref } from 'vue-property-decorator'@Componentexport d
2021-09-04 21:19:48
492
原创 如何判断H5中是否成功调起应用商店
一、H5页面如何打开本地APP使用scheme协议：直接window.open(schemeUrl)，比如：window.open('market://details?id=xxx') //安卓通用应用市场window.open('https://apps.apple.com/cn/app/idxxxx') //IOS app store同样的，也可以打开其他app，window.open('weixin://xxxxx')scheme协议的格式:[scheme]://[host]/[pat
2021-09-04 20:49:20
872
原创 用express和mockjs实现前端mock serve
本文介绍一种用express和mockjs实现模拟后端接口返回数据的思路，直接上代码：1.在项目根目录新建文件夹：mock2.在mock文件夹下新建mock.js和mockData.js文件3.//mock.jsconst Mock = require('mockjs')const express = require('express')const mockData = require('./mockData')const mockDatas = Object.entries(mockDat
2021-08-22 17:20:21
226
1
原创 使用vscode结合Prettier实现实时对代码进行自动格式化
配置Prettier安装prettier$ yarn add --dev --exact prettier自定义配置，添加.prettierrc.json{ "trailingComma": "all", "singleQuote": true, "bracketSpacing": true, "semi": true, "jsxBracketSameLine": false, "jsxSingleQuote": false}添加vscode配置文件$ touch
2021-08-14 17:11:24
636
1
转载 Use Chrome DevTools Like a Senior Frontend Developer
https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674
2021-01-10 11:56:47
139
原创 关于如何使用css3中的steps完成图片帧动画
前端中的动画效果可以有很多种方法完成，对于一些简单的颜色、大小、长度、位置变化都可以通过transition轻松实现，对于一些复杂的、不规则的动画就要借助图片来完成了。今天介绍一种结合图片和css3中的keyframes和animation实现的复杂动画方法。先看图片和动画效果，实现的原理是通过改变背景图片的位置，从而让人看起来是动画，看一下它的源码：<div class="box"></div>.box { width: 50px; height:
2020-12-29 18:38:34
528
原创 typeScript学习笔记（一）
一、基础类型布尔值、数字、字符串let isDone: boolean = false;let decLiteral: number = 6;let hexLiteral: number = 0xf00d;let name: string = "bob";let sentence: string = `Hello, my name is ${ name }.数组let list: number[] = [1, 2, 3];let list: Array<number>
2020-10-13 13:19:42
360
原创 推荐一些好用的插件，可搭配react使用
react-sortable-hoc作用：可以很简便地对元素进行拖拽用法：import { SortableContainer, SortableElement } from "react-sortable-hoc";import arrayMove from "array-move";const SortableList = SortableContainer(({ children...
2020-03-24 17:45:12
673
转载 Linux面试题史上最全总结
选择题1 在终端下输入mount -a命令的作用是：CA 强制进行磁盘检查B 显示当前挂载的所有磁盘分区的信息C 挂载/etc/fstab文件中的除noauto以外的所有磁盘分区D 以只读方式重新挂载/etc/fstab文件中的所有分区2 当前系统的中断的信息保存在哪一个文件中？AA /proc/interruptsB /var/log/IRQsC /boot/interrupt...
2019-10-08 10:25:42
2763
1
原创 CleanWebpackPlugin is not a constructor 报错原因
关于webpack使用CleanWebpackPlugin插件时报错（CleanWebpackPlugin is not a constructor）原因：今天使用webpack的时候，遇到了一个错误：但是我是按照webpack官网上的写法来使用这个插件的，应该是由于这个插件已经更新了，但是webpack官网上没有及时更新，所以非常坑！错误写法：const CleanWebpackPlu...
2019-09-19 15:41:10
3321
1
原创 ES6入门基础知识
一、let和const1.let在ES5中没有块级作用域这一概念，但在ES6中，新增了let命令，let所声明的变量只在let命令所在的代码块内有效。暂时性死区（TDZ）：let没有变量声明提升，在let命令声明变量之前，该变量都是不可用的不可重复声明：let不允许在相同作用域内，重复声明同一个变量对于for循环的计数器，很适合用let命令:下面的代码如果使用var，最后输出的是10...
2019-08-31 16:18:53
205
原创 js高级进阶知识
一、函数的原型1.创建对象的三种方式：字面量、调用系统的构造函数、自定义构造函数2.工厂模式创建对象： function createObject(name,age) { var obj=new Object(); obj.name=name; obj.age=age; obj.sayHi=function () { c...
2019-06-16 22:39:20
2243
原创 对js基础知识的一些理解
一、js中的数据类型1.简单类型numberstringboolnullundefined2.复杂类型obiect3.对“简单类型传值，复杂类型传址”的理解1.首先理解简单类型和复杂类型的变量如何在内存中存储简单类型的值在栈中存储，即变量名和变量的值都在栈里复杂类型的实例对象在堆中存储，实例对象的地址在栈中存储：即实例对象的变量名在栈中存储，变量名对应的是实例对...
2019-06-16 21:35:10
211
原创 移动web开发-插件&事件篇
前言：本文主要给大家介绍一下移动端常用的事件和插件。一、事件1.触摸事件touch触摸事件是一组事件touchstart ：当手指触摸屏幕的时候触发touchmove ：当手指在屏幕来回的滑动时候触发touchend ： 当手指离开屏幕的时候触发touchcancel ：当被迫终止滑动的时候触发（来电，弹消息）绑定事件由于这是一组有关联的事件，所以绑定事件要...
2019-04-20 20:33:47
369
原创 移动web开发-布局篇
前言：一般来说，一个比较大的网站和平台都有PC端和移动端两个网站点，即要写两套css样式，也有一些公司采用的是响应式布局（本质上也是两套css样式），今天就给大家介绍几种移动端的布局方式。在介绍布局方式之前，先介绍一下视口：viewport，viewport是移动端特有的一个承载网页的虚拟区域，是浏览器承载视口，视口承载网页。我们在head标签内加入<meta name=“viewport...
2019-04-19 21:27:42
1211
原创 Canvas绘图基础知识
一、绘制直线1.准备"画布"，画布默认大小是300px*150px<canvas width="600" height="400" ></canvas><!--注意:对画布设置宽高只能在行内设置，不在css中设置-->2.获取元素并绘制一条简单的直线<script> /*1.获取元素*/ var myCanvas = $(...
2019-04-01 12:51:36
368
原创 关于如何求两个字符串的最大公共子串的问题
此方法对于长度较短的字符串效率较高：#include <stdio.h>#include <string.h>int f(char s1[],char s2[]){ int a[100][100]; int len1 = strlen(s1); int len2 = strlen(s2); int i,j; memset(a,...
2019-03-20 21:44:49
311
原创 蓝桥杯历届试题-合根植物(并查集)
蓝桥杯历届试题-合根植物是一道简单的并查集问题，并查集算法的核心是把两个点连通起来的函数和找到某个点的根节点的函数，本文把这两个函数定义成join()和find();先写出这两个函数的原型：int find(int x){ return a[x]==x?x:a[x]=find(a[x]);//返回节点x的根节点，并且压缩路径}//如果看不懂压缩路径的写法可以看下面这个int...
2019-03-19 20:30:36
497
原创 蓝桥杯历届试题-高僧斗法(博弈论)
蓝桥杯历届试题-高僧斗法是一道尼姆堆博弈论（Nim游戏），本文只对尼姆堆问题进行粗略的解释，不对题目进行讲解，我相信只要搞清楚了尼姆堆这种博弈论问题之后，这道题将会迎刃而解。一般的Nim游戏是这样的：有n个石堆，每堆里有数量一定的石子，两人从其中任意一堆中取任意数量的石子（不能超过这堆石子数的最大值），不能不取，最后某个人取完，所有石堆中的石子数量都为0时，另一个人就为输。这里要先介绍一些概念...
2019-03-19 20:12:45
789
原创 关于如何快速筛选素数的问题
在浏览某位大佬学弟的博客时，看到了一种线性筛选素数的方法，觉得很有用，所以给大家分享出来。这种筛选的方法名叫做埃拉托斯特尼筛法：要得到自然数n以内的全部素数，只需要把不大于根号n的所有素数的倍数剔除，剩下的就是素数。思想：假设全部数均为素数，再通过剔除掉所有合数，剩下的数就为素数。代码如下：#include<bits/stdc++.h>using namespace std;i...
2019-03-19 19:56:34
691
原创 分解质因数算法
众所周知，任何一个数都可以写成若干个素因数相乘，那么如何找到这些素因数呢，可以用到分解质因数算法：#include<bits/stdc++.h>using namespace std;int main(){ int n,i=2; scanf("%d",&n); while(i<=n) { if(n%i==0) ...
2019-03-19 19:45:11
3285
1
原创 2018年蓝桥杯省赛本科B组-全球变暖（水漫金山）
最近在刷蓝桥杯的题，有这样一道题：题目大意你有一张某海域NxN像素的照片，".“表示海洋、”#"表示陆地，如下所示：….##….##……##.…####.…###.…其中"上下左右"四个方向上连在一起的一片陆地组成一座岛屿。例如上图就有2座岛屿。由于全球变暖导致了海面上升，科学家预测未来几十年，岛屿边缘一个像素的范围会被海水淹没。具体来说如果一块陆地像素与海洋相邻(上下左右...
2019-03-14 21:13:51
422
2
原创 关于字符串根据字典序排序的方法
首选你要懂得什么是字典序，如果不懂自行百度，本文不再阐述。字典序排序其实和数组排序是类似的，只需要用到strcmy和strcpy函数，可以用类似于数组冒泡排序的方法完成排序，代码如下：方法一：#include&lt;bits/stdc++.h&gt;using namespace std;char s[105][105];char t[105];int main(){ in...
2019-03-03 21:19:59
12495
7
原创 关于如何用CSS3制作切割轮播图的问题
我们先来看一下切割轮播图的效果：这种切割轮播图非常的炫酷，但是有一个缺点就是只能有四张图片，如果想实现4张图片以上的切割效果就非常的麻烦。本文只阐述四张图片切割图的制作方法。切割轮播图的原理是一个立方体，立方体的四个面各有一张图片，然后让这个立方体绕水平轴旋转就实现了切割轮播图的效果。首先，我们先写好html结构：<div class="view"> <ul&g...
2019-02-28 14:42:36
699
6
原创 关于如何使用CSS3制作立方体的问题
今天给大家带来如何用css3制作立方体效果的案例，话不多说，先上图：先说一下网页当中的数轴，以屏幕的左上方为原点：重点说一下Z轴，Z轴是垂直于屏幕的，比如我们给一个元素加transform属性，transform:translateZ（100px）;从正面看是没有任何变化的。所以我们不能从正面去看，一般我们想看到立方体效果，都要给box加一个三维空间上的旋转：transform: rota...
2019-02-15 22:17:17
401
原创 CSS3-transform二维三维变换和flex伸缩布局
一、transform1.二维变换移动：translate /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态 1.如果只有一个参数就代表x方向 2.如果有两个参数就代表x/y方向*/ /*transform: translate(100px);*/ ...
2019-02-15 21:30:33
835
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人