【前端】常见问题汇总

1. 跳转界面传参值

​ 当传的值中有特殊字符时,需进值加密解密处理

​ 加密 encodeURIComponent() 解密 decodeURIComponent()

2. console.log(“” == 0) 结果为true

问题: var zt = “”; console.log(zt == 0) 结果为true,业务中zt字段值有两种含义(""跟0),会导致判断不准确。

解决:

var zt = "";
1.if(zt == '0')//0加单引号
2.
	if(zt === 0){
		alert(zt)
	}else if(zt === 1){
		alert(zt)
	} //需要注意,如果zt="1"时, zt === 1此时为false。

3. 渲染出的列表,触发事件调用方法时,不要使用索引判断走不同代码逻辑

理由: 列表顺序有可能会发生改变,一旦改变,方法逻辑走向不对,触发bug。

<template>
	<div v-for="(item,index ) in [{isOpen:true,name:'java'},{name:'javascript'},{isOpen:true,name:'python'}] "
    :key="index" @click="toOpen(item,index)"> </div>
</template>
<script>
	export default {
        toOpen(item,index){
            /**
            	反例  一旦列表顺序发生改变,此判断会出现bug
            **/
            if(index == 0 || index == 2) window.open("baidu.com?gjz"+item.name)
            else location.href ="baidu.com?gjz"+item.name
            /**
            	正确判断,使用列表中某个参数进行判断
            **/
            if(item.isOpen) window.open("baidu.com?gjz"+item.name)
            else location.href ="baidu.com?gjz"+item.name
            /**
            	一样的代码量,平常写的时候注意一些,会有效减少bug量
            **/
        }
    }
</script>

4. 常见提示信息场景

​ 1.一般查询接口正常返回数据不要加提示信息

​ 2.一般保存修改删除接口,回调成功要有提示信息,没有提示信息用户以为保存更新不成功,会重复进行点击

​ 3.如保存修改删除成功后,需要跳转其他界面,先提示一下,使用setTimeout延迟一秒后进行跳转界面。

5. js中检测数据类型,比较通用的检测方式

Object.prototype.toString.call('1')
'[object String]'
Object.prototype.toString.call([])
'[object Array]'
Object.prototype.toString.call({})
'[object Object]'
Object.prototype.toString.call(1)
'[object Number]'
Object.prototype.toString.call(null)
'[object Null]'
Object.prototype.toString.call(function(){})
'[object Function]'
Object.prototype.toString.call(undefined)
'[object Undefined]'
/*
	也可以使用instanceof检测数据类型,不过没有这种方式好用便捷
**/

6. 防抖节流

防抖:在一段时间内连续点击触发方法,每次触发会重新计时,最常用场景:在文本框输入值立马去后台查询数据,频繁调用后台造成性能问题,可以使用防抖,在一定时间内只去后台查询一次。( echart图表监听窗口改变重新渲染、滚动事件、滑动事件)

节流:在一段时间内连续点击触发方法,在这段时间内只执行一次,不会去重新计时,最常用场景:去请求接口数据。或者更新数据,可以使用节流,保证在(假设一秒内)只执行一次查询,或者更新操作

演示地址:点这里

<template>
	<div>
    	<button @click="click1">不使用防抖</button>
    	<button @click="click2">使用防抖</button>
		<button  @click="click3">不使用节流</button>
		<button  @click="click4">使用节流</button>
    </div>    
</template>
<script>
	export default {
		methods:{
            click1(){
                console.log("不使用防抖=>",new Date().getTime())
            },
            click2:debounce(function(){
                console.log("使用防抖=>",new Date().getTime())
            }),
            click3(){
                console.log("不使用节流=>",new Date().getTime())
            },
             click4:throttle(
                 function(){
                	console.log("使用节流=>",new Date().getTime())
            	}
             )
        }
	
	}
</script>

相关推荐

  1. 前端常见问题汇总

    2024-04-23 04:38:03       35 阅读
  2. 前端常见安全问题以及解决方案汇总

    2024-04-23 04:38:03       53 阅读
  3. pandas常见问题汇总

    2024-04-23 04:38:03       63 阅读
  4. MySQL常见问题汇总

    2024-04-23 04:38:03       33 阅读
  5. 前端面试常见问题

    2024-04-23 04:38:03       38 阅读
  6. 前端面试问题汇总 - 其他问题

    2024-04-23 04:38:03       42 阅读
  7. 编写代码中常见问题汇总

    2024-04-23 04:38:03       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-23 04:38:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-23 04:38:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-23 04:38:03       82 阅读
  4. Python语言-面向对象

    2024-04-23 04:38:03       91 阅读

热门阅读

  1. 了解监控易(33):工单管理

    2024-04-23 04:38:03       39 阅读
  2. MySQL面试题

    2024-04-23 04:38:03       37 阅读
  3. URL解析

    URL解析

    2024-04-23 04:38:03      38 阅读
  4. MATLAB初学者入门(11)—— 贪心算法

    2024-04-23 04:38:03       41 阅读
  5. Spring Boot 加载本地 JAR 包的技术实践

    2024-04-23 04:38:03       38 阅读