sqwu-CSDN博客

原创【面试】整理了一些常考的前端面试题，以及实际被问到的问题

XSS是指跨站脚本攻击，用户注入恶意代码，浏览器和服务器没有对用户输入的内容进行过滤，导致用户注入的脚本嵌入到了页面中。XSS攻击分类○反射型攻击者构造一个有恶意代码的url链接诱导用户点击，服务器收到这个url对应的请求读取出其中的参数然后没有做过滤就拼接到html页面发送给浏览器，浏览器解析执行○存储型攻击者将带有恶意代码的内容发送给服务器(如表单提交)，服务器没有过滤就将数据存到数据库，下次在请求这个页面的时候服务器从数据库中读取出内容拼接到html上，浏览器解析之后执行。...

2022-07-28 11:13:01 364 1

转载【Sleep】JavaScript有什么方法可以实现sleep睡眠函数

sleep函数的作用是让线程休眠，等到指定时间再重新唤起，起到延时的效果。由于Javascript是单线程的，没有内置的sleep函数，所以要使用一些方法来模拟。通过伪死循环来阻止代码执行缺点：以上代码不会让线程休眠，而是通过高负荷计算使CPU无暇处理其他任务；这样会导致sleep过程中其他所有的任务都被暂停，包括DOM的渲染。方法2和方法3如果有多个sleep只能嵌套，如:使用async/await可以实现多个sleep不用嵌套调用...

2022-06-14 14:47:54 1258 1

原创【TS】项目中常用到的类型声明

注意属性的顺序：只读类型 -> 必选属性 -> 可选属性 -> 不确定属性接口继承使用泛型声明对象结构（常用）第二种形式：使用泛型Array对象数组已知长度和数组各项值类型的数组（严格的数组）也可以使用类似枚举的方法，将状态都列出来type:可以给基础类型，也可以给对象用于对象时，不同的属性之间要逗号隔开类型别名和{}中间有等号不能用extends继承class只能给对象类名和{}中间没有等号可以使用extends...

2022-06-06 17:03:44 720

原创【小程序】mpvue数据变化了视图没更新

踩了个小坑，一模一样的代码在h5没有问题，在小程序中出现数据变化视图没更新的问题。问题要改变深层对象里的某个属性，发现即使用了$set，视图也没有更新。改变属性的代码：handleCollapse(item, index) { // show取反 item.show = !item.show this.$set(this.detail.drugTips, index, item)}解决借助computed，监听对象的属性，界面上读取computed的属性。computed:.

2022-05-30 14:43:56 438

原创【Git】团队合作常用的git指令

1.代码合并后删除本地关联远程的分支通常是在本地且一个分支进行开发，最后提PR合并到主分支，一般选择合并后删除自己的分支，合并成功后，本地的分支还存在，并且关联着一个不存在的远程地址，可以用下面的指令将这个关联关系删掉// 查看分支情况git remote show origin// 删除远程已经删除的分支git remote prune origin之后在将本地的分支删掉2.暂存stash本地的修改有时候代码写到一半，需要先合并主分支上的代码，总不能直接丢掉本地的修改，所以要先

2022-04-29 15:49:15 175

原创【vite】vite项目从0开始配置eslint

🌵 vite创建的项目默认没有eslint，下面开始从0开始配置。

2022-04-24 16:39:58 8010

原创【小程序】支付宝小程序自定义下拉刷新组件

🌾用支付宝原生框架写一个下拉刷新组件。

2022-04-21 14:48:14 1503

原创【vue3】使用pinia替代vuex

💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。

2022-04-18 18:01:15 2927

原创【面试】前端路由hash和history的区别

🍊 梳理下hash/history两种路由模式的区别。1. 前端路由的由来说前端路由由来之前，先看下后端路由：后端路由：在前后端不分离的时代，路由都是通过服务端指定的，服务端根据客户端发来的HTTP请求，将返回的数据于模板引擎响应结果结合后进行渲染，将渲染完毕的页面发送给客户端。优点：SEO友好，爬虫爬取到的页面就是最终的渲染结果。缺点：每次发起请求都要刷新页面，用户体验不好，服务器压力大。SPASPA是单页面应用Single Page web Application的.

2022-04-13 11:29:44 5314 1

原创【JS】字符串的常用方法及slice/substr/substring的区别

🌿 总结JS中字符串的常用方法，以及容易混淆的substr、substring和slice之间的区别。先准备一些测试字符串const str1 = 'abc'const str2 = '123'const str = 'hello world'const strA = 'Hello World'（1）转换1.toLocaleLowerCase()字符串转小写strA.toLowerCase() // hello world2.toUpperCase()转大写str..

2022-04-11 17:39:35 601

原创【vue3】使用vite搭建的项目需要安装的插件/配置

项目基于vite+ts+vant+axios1.创建项目项目名称是myProjectvue create myProject2.vetur报错调整由于vue3引入组件后不用在components中声明，vetur插件会报错解决办法：vscode设置 -》搜索vetur -》找到下面这个选项，把他关掉。然后重新打开文件，发现没有报错了3.vite2使用eslint校验安装eslint执行命令npx eslint --init，按照以下选项配置依赖，会顺带下载四个依赖下面

2022-04-11 10:31:44 4177

原创【React】组件实例的三大属性——ref

1.字符串形式的refclass Demo extends React.Component { // 自定义函数要用箭头函数,才能拿到正确的this showDlg = () => { const input = this.refs.input1 alert(input.value) } showDlg2 = () => { const input = this.refs.input2 alert(input.value) } rend

2022-03-01 10:46:41 382

原创【React】组件实例的三大属性——props

props和state的区别porps：父组件向子组件传递的参数，用于组件之间的通信，值不可变state：组件内部的状态，值可变1.props的用法class Person extends React.Component { render() { const { name, age, sex } = this.props return ( <ul> <li>姓名：{name}</li> <li&

2022-02-28 18:55:10 347

原创【React】组件实例的三大属性——state

1.正常的state写法（有constructor）// 1.创建组件class Weather extends React.Component { constructor(props) { super(props) // 初始化状态 this.state = { isHot: false, wind: '微风' } // 解决changeWeather中this的指向问题 this.changeWeather = this.c

2022-02-28 18:20:01 330

原创【小程序】支付宝小程序自定义头部

支付宝小程序自定义头部1.修改当前页面的main.json{ "transparentTitle": "auto", "titlePenetrate":"YES"}transparentTitle：标题栏透明设置，可选值：always一直透明；auto滑动自适应；none不透明，默认值。titlePenetrate：是否允许标题点击穿透，可选值：YES 允许；NO 不允许，默认值。2.修改全局app.json的windows"window": { "transpa

2022-02-17 16:37:56 1806

原创【小程序】使用支付宝原生开发需要注意哪些

1.使用MinuU框架1.全局安装MiniUnpm i miniu -g2.创建文件夹，cmdnpx create-miniu-app3.在vscode打开项目，看md4.授权详见https://opendocs.alipay.com/mini/01l9vi#3.4%E3%80%81%E7%99%BB%E5%BD%95支付宝小程序原生开发注意：1.使用自定义组件，要在当前页面的json文件中声明组件{ "usingComponents": { "g-layou

2022-01-19 16:57:08 983

原创【Taro】Taro创建项目，解决html标签在小程序端无法显示的问题

1.创建项目taro init htmlTest选择项目配置，然后等待下载完成2.配置及运行项目（以微信小程序为例）1.运行项目// 启动微信小程序npm run dev:weapp可以试着在index.vue中加一个html标签，然后启动项目，可以发现小程序默认是无法展示html标签的，并且在调试器的控制台有警告。这个问题在后面会解决[WXML Runtime warning] ./base.wxmlTemplate tmpl_0_div not found.2.配置（1）

2021-12-20 10:30:57 6094 5

原创【个人笔记】修改input光标颜色、svg颜色..

记录今天解决的几个小问题1.修改input输入框的光标颜色修改输入框样式的caret-color属性，例子修改的是vant的输入框，原生input道理一样.ques-input {// van-field组件/deep/.van-field__value { caret-color: #0099BE; // 输入框光标颜色 } }2.svg添加color属性不能覆盖默认的颜色找到svg文件，将fill属性值改为fill="currentColor"...

2021-11-17 14:48:24 871

原创【个人笔记】DNS基本原理和名词解释

DNS：Domain Name System域名系统，在TCP/IP网络中有非常重要的地位，能够提供域名与IP地址的解析服务。1.分层由顶层到下层，分为：根域/顶级域/二级域/子域2.结构：DNS是一个分布式数据库，命名系统采用层次的逻辑结构，如同一颗倒置的树，这个逻辑的树形结构称为命名空间。3.根域：就是一个.点，一般在域名最后面还有一层根域，通常是被省略了，例如：百度的完整域名是www.baidu.com.4.顶级域：全球共有13台根域服务器，美国10台，另外3台分别在英国/瑞士/日本

2021-11-15 18:39:18 1393

原创【个人笔记】解决van-uploader只能上传图片的问题

问题：使用van-uploader组件做上传附件功能，在电脑端可以有效控制允许上传的文件类型，但是在移动端，发现只能上传图片类型。排查：找到node-modules下的vant文件夹，在dist目录找到uploader，可以看到accept字段的默认值是image/*（其实官方文档也有写啦–），所以我们在调用的时候试试给accept传个空值<van-uploader class="upload-btn" multiple :after-read="handl

2021-11-03 17:55:53 5493 9

原创【webpack】webpack开发热更新，引入vue

webpack-dev-server开发热更新安装[email protected] install [email protected] -D在webpack.config.js添加配置项devServer// 配置webpack-dev-server devServer: { // 端口号 port: 8088, // 自动打开浏览器 open: true },执行命令：npx webpack-dev

2021-10-05 19:45:00 305

原创【webpack】使用webpack打包图片文件、打包时生成单独的css文件

使用webpack打包图片文件在scr目录下创建image文件夹，并且添加几张图片在main.js使用import方式引入所有图片，并且append到app节点下// 引入图片资源import i1 from './image/image1.png'import i2 from './image/image2.png'// 创建图片对象let img1 = document.createElement('img')img1.src = i1let img2 = document.cr

2021-10-03 23:29:22 1489

原创【个人笔记】解决fixed布局，安卓软键盘会顶起底部固定的按钮的问题

1.问题fixed布局的tab栏在安卓浏览器上，聚焦在输入框时，弹出的输入框会将tab栏顶到输入框上方，挡住页面。fixed定位的tab栏出现的键盘将tab栏顶到页面中间2.思路监听键盘弹出的事件…也就是监听页面的可见高度clientHeight先保存页面最初的可见高度，然后监听高度变化（resize），当新的高度小于原来的高度时，判断是键盘弹出键盘弹出时将tab栏隐藏起来实现效果代码如下，在全局（app.vue）添加mounted() { window.addEv

2021-10-02 23:15:08 3349

原创【个人笔记】记录被navigateTo和redirectTo坑到的一天

如图Error: framework error: can not find page: pages/messageRemind/pages/messageDetail/main when execute navigateTo for url pages/messageDetail/main要进行页面跳转，可以发现它报错了，一直拼接了当前的路由，代码长这样：my.navigateTo({ url:'pages/messageDetail/main' })解决注意看，pages前面没有加/，说明

2021-09-16 16:39:55 726

原创【webpack】入门 - 使用webpack进行工程化开发

文章目录使用webpack进行工程化开发使用webpack打包文件使用webpack自动生成html文件使用webpack打包css文件使用webpack进行工程化开发1.检查本地安装的版本webpack -v2.在本地全局安装（指定版本）// 安装核心库npm install webpack@4 -g// 安装工具npm install webpack-cli@3 -g3.在当前项目安装webpack在当前项目里初始化一个包的描述文件npm init -y再安装webp

2021-09-14 13:33:02 266

原创【面试】new原理、箭头函数和普通函数区别

常考面试题箭头函数与普通函数的区别new原理

2021-09-13 18:00:58 983

原创【ES6】4.函数的扩展

文章目录1.函数参数的默认值（1）函数默认值与解构赋值结合使用（2）默认参数的位置（3）函数的length属性（4）严格模式问题2.rest参数3.name属性4.箭头函数5.尾调用优化6.尾递归7.函数参数的尾逗号8.Function.prototype.toString()9.catch参数可省略1.函数参数的默认值函数的参数允许带有默认值，参数变量是默认声明的，无需使用let或const再次声明。// 无需使用let或const声明function f(x = 1, y = 2) { ..

2021-09-13 17:06:29 70

原创【ES6】3.数值的扩展

目录1.二进制和八进制表示法2.Number.isFinite() Number.isNaN()方法Number.isFinite()Number.isNaN()3.Number.parseInt() Number.parseFloat()4.Number.isInteger()Number.isInteger()5.Number.EPSILON()6.安全整数和Number.isSafeInteger()Number.isSafeInteger()7.Math对象的扩展Math.trunc()Math

2021-09-13 15:42:07 99

原创【vue3】VUE3初体验

VUE3初体验目录VUE3初体验（一）新特性1.setup2.ref3.reactive扩展4.computed属性5.watch函数6.watchEffect7.生命周期8.hook函数9.toRef和toRefs10.shallowRef和shallowReactive11.readonly和shallowReadonly12.roRow和markRow13.customRef14.响应式数据的判断（二）新组件1.Fragment（片段-多根节点）2.teleport（传送）3.Suspense（包裹

2021-08-30 11:07:07 314

原创【个人笔记】解决vue使用ueditor上传图片没反应或不显示

1.定义全局变量，存放上传图片的接口地址比如可以创建一个config目录，在目录下创建一个api.js,定义全局变量并抛出export default { ueditorUploadUrl: (CONFIG.base || process.env.VUE_APP_BASE_API) + '/file/upload', // 富文本上传地址}2.修改单文件上传方法打开ueditor.all.js，找到单文件上传方法。1.先修改请求方法，大约在24572行，注释的是原来的代码代码：var

2021-07-16 18:44:44 3552 1

原创【Mockjs】Vue中使用Mockjs，语法规范，常用方法

2021-06-28 23:40:43 460 5

原创【JS】防抖和节流函数

目录1.区别2.代码1.防抖（1）普通防抖（2）立即执行防抖（3）普通版和立即执行版结合2.节流（1）时间戳版（2）定时器版1.区别防抖：n秒后再执行，如果在n秒内被重复触发，则重新计时节流：在n秒内只执行一次，重复触发只有一次有效2.代码先准备几个盒子用来测试<div id="box1" class="box1">普通防抖</div><div id="box2" class="box2">立即执行防抖</div><div id="box

2021-05-07 09:43:33 140 4

原创【面试】单线程、同步异步、宏任务和微任务

目录1.为什么JavaScript是单线程？2.任务队列3.事件和回调函数4.Event Loop5.定时器6.如何实现异步编程1.回调函数2.事件监听3.发布/订阅4.Promises对象7.宏任务和微任务1.宏任务2.微任务3.事件循环机制1.为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途就是与用户交互，以及操作DOM。这决定了它只能是

2021-04-30 15:45:44 203 3

原创【JS】数组去重的四种方法

目录1.ES6的Set方法2.循环比较法3.对象法4.正则法1.ES6的Set方法此方法需要考虑兼容性let arr = [12, 20, 13, 13, 12, 5, 20]let res = []res = [...new Set(arr)]// 或者// res = Array.from(new Set(arr)) // [12, 20, 13, 5]2.循环比较法取出某一项，那后一项与之对比let arr = [12, 20, 13, 13, 12, 5, 20]// 第一种

2021-04-12 11:39:44 150

原创 vue li快速定位功能

1.功能描述如图，监听输入框输入的内容，自动定位到第一个匹配的内容2.完整代码<template> <div> <el-input v-model="searchVal" placeholder="输入内容快速定位" class="anchor-input" clearable @input="searchValIpt" /> <div class="list"> <ul> <li v-

2021-03-29 16:45:48 584

原创 vue el-checkbox按下shift键实现批量选择数据

1.先看下效果2.代码分析1.添加html代码，先将列表写出来<el-button @click="checkAll(true)">全选</el-button> <el-button @click="checkAll(false)">全不选</el-button> <el-button @click="checkInvert">反选</el-button><el-checkbox-group v-model="se

2021-03-24 17:53:07 3144

原创【ES6】2.字符串、正则

目录1.字符串的扩展1.字符的Unicode表示法2.字符串的遍历3.模板字符串4.模板标签2.字符串新增的方法1.String.fromCodePoint()2.String.raw()3.repeat() 重复字符串方法4.includes()5.startsWidth()6.endsWidth()7.padStart() padEnd()8.trimStart() trimEnd()9.replaceAll()3.正则的扩展1.正则表达式的修饰符1.i修饰符2.g修饰符3.m修饰符4.y修饰符（e

2021-03-11 14:17:33 304

plop-template vue自动新建项目文件

el-table如何删掉空数据的单元格？