【前端】常见问题汇总

2024-04-17 20:52

本文主要是介绍【前端】常见问题汇总,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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>

这篇关于【前端】常见问题汇总的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912821

相关文章

HTML5 Mobile Upload

HTML5移动端图片上传并前端预览 用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。 核心代码: $('input[type=file]').change(function(){

html5 progress元素

progress元素是HTML5中新增的状态交互元素,用来表示页面中某个任务完成的进度,IDL定义如下: interface HTMLProgressElement : HTMLElement {attribute double value;attribute double max;readonly attribute double position;readonly attribut

HTML5上传图片base64编码显示缩略图

<li><label for="username">营业执照</label><a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span><input type="file" capture="camera"/>添加图片</a><a class="cert-arrow-ri

jQuery插件 笔记

//闭包限定命名空间(function ($) {//默认参数var defaluts = {foreground: 'red',background: 'yellow'};$.fn.extend({"highLight": function (options) {var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖

uni-app获取手机通讯录(基于HTML5+)

官方API:https://www.html5plus.org/doc/zh_cn/contacts.html   话不多说,直接上代码 contacts.vue <template><view><button type="primary" @tap="getContacts">获取联系人</button><block v-for="(item,index) in list" :k

好用的vue富文本编辑器记录

vue-quill-editor https://github.com/surmon-china/vue-quill-editor https://www.npmjs.com/package/vue-quill-editor https://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传) *默认上传图片为base64编吗

vuex重点笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简

vue 电脑端调摄像头拍照,canvas转base64,base64转图片文件并上传到服务器

VUE(用了iview):  <template><div id='cameraUpload'><Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'><FormItem label='照片' prop='photo'><div v-if="member.phot

Vue数组改变,视图不更新解决方案

列表渲染 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 this.$forceUpdate() // 强制刷新 Vue.set(Array,index,