听过的问答

已于 2023-04-24 14:40:10 修改
阅读量1.1k 收藏 22
点赞数 9
文章标签： javascript 前端 vue.js
于 2023-03-02 17:11:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdyydsjjql/article/details/129304922
版权

axios中止所有的网络请求

应用场景：用户频繁切换的时候 请求最后一个数据

  • 使用CancelToken

  • 在axios的请求拦截中，使用store存储每个请求的cancelToken实例

  • 拦截路由，调用cancelToken()方法终止请求

new一个axios.cancelToken里面传一个函数函数接收一个c在外面定义一个变量为null 然后把变量进行赋值c 这个c就是调用取消请求的方法然后直接调用定义的变量就好了

let cancel = null
​
        document.getElementById('btn1') = function () {
            axios({
                url: 'http//',
                cancelToken: new axios.cancelToken(function (c) {
                    cancel = c
                })
            })
                .then(res => {
​
                })
                .catch(err => {
​
                })
        }
        document.getElementById('btn2') = function () {
            cancel()//调用source的方法cancel()
        }

<div>
        <button id="btn1">发送请求</button>
        <button id="btn1">终止请求</button>
    </div>
    <script> 
        const CancelToken=axios.CancelToken//提取axios上的CancelToken
        const source=CancelToken.source()//CancelToken上面有个方法要调用
        
        document.getElementById('btn1')=function(){
            axios({
                url:'http//',
                cancelToken:source.token//需要绑定一个属性 值为source.token
            })
            .then(res=>{
                
            })
            .catch(err=>{
​
            })
        }
        document.getElementById('btn2')=function(){
            source.cancel()//调用source的方法cancel()
        }
    </script>

vuex页面刷新数据丢失问题

1、问题描述： 一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

2、解决思路： 办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

分析：

办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是要讲的重点，办法二和办法一一起使用。

解决vue动态添加路由后刷新页面白屏问题

解决思路：页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了（之前以为，将动态添加的路由存储在了sessionStorage中，就不会vuex刷新数据丢失的影响)，师父解惑：在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（）！！大功告成）

双飞翼布局的实现

一个大盒子包裹三个子盒子分别是中左右，给大盒子设置float: left;左浮动 中间的盒子宽度写100%左右两边各写随意 左边盒子margin-left: -100%; 右边的盒子margin-left: 设置的宽度;

做过移动端的项目吗 移动端项目自适应

1.淘宝无线适配 通过rem相同比例的进行适配

因为rem是基于html font-size的倍数 那么我们只需要设定在不同的宽度的设备上有相同比例的font-size即可那么n个rem在当前设备上的比例应该是一致的

2.响应式布局，通过@media实现一套html适配多套css实现适配 mi低儿

css的媒体监听语法，监听屏幕宽度，如果最大宽度为750px(一般区分是否移动端就按照750划分)
@media screen and (max-width: 750px){
    
}

兼容过浏览器

css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 / -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 / -o- / Opera浏览器(早期) / -ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes css3中的变形（transform）、过渡(transtion)、动画(animation) border-radius 圆角 box-shadow 盒子阴影 flex 弹性布局

react性能优化

react子组件监听父组件传递的值的变化

想让父组件的状态更新的时候。子组件也根据这个状态更新

父组件中

this.state = {    
    checked: false 
}; 
<Checkbox checked={checked}>Checkbox</Checkbox>

子组件中 当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用

componentWillReceiveProps(props) {
    console.log(props)
    this.setState({show: props.checked})
}

大文件上传失败但是有这个需求

分片上传

前端上传大文件时使用 Blob.prototype.slice 将文件切片，并发上传多个切片，最后发送一个合并的请求通知服务端合并切片

服务端接收切片并存储，收到合并请求后使用 fs.appendFileSync 对多个切片进行合并

原生 XMLHttpRequest 的 upload.onprogress 对切片上传进度的监听

使用 Vue 计算属性根据每个切片的进度算出整个文件的上传进度

断点续传

使用 spark-md5 根据文件内容算出文件 hash

通过 hash 可以判断服务端是否已经上传该文件，从而直接提示用户上传成功（秒传）

通过 XMLHttpRequest 的 abort 方法暂停切片的上传

上传前服务端返回已经上传的切片名，前端跳过这些切片的上传

拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕

等待后台返回数据统一渲染

使用v-if来控制 先定义一个变量为false 一个变量内容为空 请求成功后false设置为true 得到的数据进行赋值

ES6新增

  1. let、const

  2. 模板字符串

  3. 箭头函数

  4. 函数参数默认值

  5. 扩展运算符

  6. promise 是es6新提供的类；promise能够更有条理的书写异步任务

  7. 增强对象属性：数组解构、变量互换、属性简写

  8. 类 在ES6标准中提供class关键字来定义类,在写法上更简洁、语义化更强。

9.模块 引入了原生的模块化机制，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输 出的变量。 ES6使用export和import来导出和导入模块。ES6的模块自动开启严格模式。

微信小程序授权登录

1.通过wx.login()获取code值

2.通过后端提供的api接口，使用wx.request把code值发送给后端

3.通过wx.request的success方法，接受到后端返回的自定义登录态，并保存起来，可能别的api接口需要登录态

微信小程序登录的话就是，通过wx.login()获取一个code，五分钟有效，然后通过我们的wx.request()网络请求发送code发送给我们后端，后端会访问微信的接口服务，把我们的appid+appseret sei亏瑞t +code和微信接口服务平台进行一个交换微信返回session_key 塞寻key +openid 哦penID(唯一的)后端处理openid，session_key进行关联产生一个自定义登录态 ，并且返回到我们前端，可以把它存入到setStorage同步缓存，后面发送请求可以方便的获取

微信小程序支付

点击付款=》给后端发送请求=》后端返回数据=》调用微信支付

点击付款=》获取需要付款的相关数据=》发送请求{{}}=》返回数据

wx.requestPayment({
  timeStamp: '',时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间  time丝等up
  nonceStr: '',随机字符串，长度为32个字符以下  no丝死t而
  package: '',统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***  趴给age
  signType: 'MD5',签名算法，应与后台下单时的值一致  谁跟type
  paySign: '',签名，具体见微信支付文档  pay 谁跟
  success (res) { },接口调用成功的回调函数  色个塞丝
  fail (res) { }接口调用失败的回调函数  废噢
})

微信小程序获取用户信息

新增getUserProfile接口 getU则Profai而，可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》

wx.getSetting() get塞挺 说白了，它不会把所有的权限全部列出来，而只是记录一下之前哪些权限授权过，哪些权限拒绝过。那些既没授权也没有拒绝的权限呢，当然，就不出来在列表中了。

增加了wx.getUserProfile之后，小程序将不支持getUserInfo来返回个人的信息以及不会弹窗，即回收该接口的开放能力，得到的用户信息将为匿名信息。故以后的小程序如果要使用用户的昵称、头像等个人信息必须通过wx.getUserProfile方法来返回。开发者如需获取用户身份标识符只需要调用wx.login接口即可。根据自己的实际需求去选择使用哪个接口。

http和https区别

http是以明文传输的超文本传输协议,HTTPS是更具有安全性ssl加密传输协议

token作用

token是服务端生成的一串字符串, 充当客户端进行请求的一个令牌, 当第一次登录后, 服务器生成一个token, 将token返回客户端, 客户端存储token, 客户端只需带上token来请求数据即可, 服务端验证token并返回数据.

token的目的是为了减轻服务器的压力，减少频繁的查询数据库。

在前端请求后台的api接口的时候，为了安全性，一般需要再用户登录成功之后才能发送其他请求。

因此，在用户登录成功之后，后台会返回一个token给前端，这个时候我们就需要把token暂时保存在本地，每次发送请求的时候需要在header里边带token（无需再次带上请求名和密码），这个时候本地的token和后台数据库中的token进行一个验证，如果两者一致，则请求成功，否则失败。

IE盒模型优点：

把盒子设置为IE盒模型，不论内边距距，边框如何改变盒子的真实宽高都不会发生改变。

盒子居中

利用文本水平居中text-align: center和行高line-height进行实现

宏任务和微任务有那些

宏任务：1. script (可以理解为外层同步代码)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）

微任务：1. Promise2.process.nextTick（Node.js） 3. Object.observe（已废弃；Proxy 对象替代）4. MutaionObserver

移动端兼容性处理

防抖和节流以及应用场景

防抖 应用场景：输入框 搜索框搜索输入

节流 比如窗口调整、页面滚动、抢购和疯狂点击等会用到节流。

视频和音频相关的处理

为什么会出现跨域问题

前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题

跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

  1. 同源策略限制以下几种行为：

    1. Cookie、LocalStorage 和 IndexDB 无法读取

    2. DOM 和 Js对象无法获得

    3. AJAX 请求不能发送

为什么const定义的内容不能更改

这是因为const保证的不是变量的值不动，而是变量指向的那个内存地址所保存的数据不能改变。对于基本数据类型，值就保存在变量指向的那个内存地址，所以用const定义的基本数据类型的值是不能改变了，而对于数组和对象，它们属于引用数据类型，变量保存的只是一个指向实际数据的指针，而这个指针指向的内存地址才是真正保存数据的值的地方，所以const只能保证这个指针不能变，但不能保证他所指向的这个内存地址里面的值不能变。 ps:概括一下，基本数据类型，变量直接就保存了内存地址；引用数据类型，变量保存一个指针，指针指向内存地址

const定义的，存放的是一个地址，如果要赋值成其他数据就会在内存中开辟一个新的空间来保存数据，这样是不行的 修改数组的值不会改变指针 数组可以通过下标进行修改数据，不能直接修改

const定义中的不变指的是指向对象的指针不变，因为修改对象中的属性并不会让指向对象的指针发生改变，所以可以改变const定义对象的属性。

箭头函数this指向

但箭头函数的this指向有点特别，它总是指向最近的外层作用域中的this所指对象。这句话明了了

小程序页面滚动的监听

scroll-view中的值e事件e.detail.scrollTop可以获取到滚动的距离

async、await 实现原理

co+generator实现的核心就是next()语法

uniapp支持第三方的微信小程序组件吗

uni-app 开启第三方导航

这里是调用了uni.openLocation(OBJECT)这个API，，它会打开对应内置的地图，你可以试一下。

uni-app 为什么不能用Echarts

display值有那些

display属性的值有：1、none，可隐藏元素；2、block，可将元素设置为块级元素；3、inline，可将元素设置为内联元素；4、inline-block，可将元素设置为行内块元素；5、table，可将元素设置为块元素级的表格；6、table-cell，可将元素设置为表格的单元格；7、table-row，可将元素设置为表格的行；8、flex，可将对象设置为弹性伸缩盒。

forEach和map的区别

共同点：

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

forEach()

没有返回值，返回结果为undefined

map()

有返回值，可以return出来一个length和原数组一致的数组(内容可能包含undefined、null等)

类数组和数组的区别

类数组与数组的区别 相同点：都可用下标访问每个元素，都有length属性。

不同点：数组对象的类型是Array,类数组对象的类型是object，也就是说类数组原型是Object;类数组不具有数组所具有的方法，数组遍历可以用 for in和for循环,类数组只能用for循环遍历。

类数组

  1. 拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;

  2. 不具有数组所具有的方法；

  3. 类数组是一个普通对象，而真实的数组是Array类型。

常见的类数组有: 函数的参数arugments, DOM对象列表(比如通过 document.querySelectorAll 得到的列表)

Array.prototype.slice.call(arrayLike, start); 通过 call 调用数组的 slice 方法来实现转换
​
第二种方法 [...arrayLike]; 展开运算符
​
第三种方法:ES6语法 Array.from();只要有 length 属性的对象，都可以用此方法转换成数组

新建一个长度为100的数组, 并且每一项都是1

fill() 填充
let arr = []
arr.length = 100
​
// 或arr = Array(100)
arr.fill(1)
循环
let arr = []
for(let i = 0; i < 100; i++){
    arr[i] = 1
}

子节点添加margin

这其实是css外边距合并产生的

1、为父元素设置内边距padding。来代替给子元素设置margin-top

2、为父元素添加overflow：hidden；样式即可(完美)

3、为父元素设置边框border（除none以外的属性）

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。

从浏览器地址栏输入 url 到显示页面的步骤

基础版本： 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构 （如 HTML 的 DOM）；

载⼊解析到的资源⽂件，渲染页面，完成。

HTTP缓存

HTTP缓存分为强缓存和协商缓存

强缓存 与强缓存相关的字段有Expires和Cache-control，由于Expires是http1.0，Cache-control是http1.1的所以Cache-control的优先级高。

Expires Expires是存储的时间戳，这就要求服务器和本地浏览器时间要统一。

Cache-control Cache-control里面有如下字段：

  • public 表示任何能被任何对象进行缓存

  • private 仅表示能被客服端缓存

  • no-cache 表示直接进入协商缓存

  • no-store 表示不进行缓存

  • max-age 设置缓存的最大周期，单位为s，超过这个时间会被认为过期

  • s-maxage 覆盖max-age或者Expires头。如果s-maxage未过期，则向代理服务器请求其缓存内容。

  • s-maxage仅在代理服务器中生效，客户端只需要考虑max-age。

    协商缓存

    协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求、下载完整的响应，还是从本地获取缓存的资源

split()定义和用法

split() 方法用于把一个字符串分割成字符串数组。 丝噗嘞t

禺羊狮
关注
  • 9
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值