由于有3,4个客户说偶尔打开某个组件时会有卡顿现象，所以仔细看了下代码
这是keyup事件上绑定的代码
chooseLensSpec: function (event) {
let num = this.input_num_limit($(event.target).val(), {
int: 4,
dec: 0
})
if (num === '' && this.pageType === 'inventoryCheck') {
num = '0'
}
$(event.target).val(num)
let that = this.lens.chosenLists
if ((num > 0 && this.pageType === 'order') || ((num > 0 || num === '0') && this.pageType === 'inventoryCheck')) {
let hasSame = false
for (let i = 0; i < that.length; i++) {
if (that[i].sph === $(event.target).parents('.sph-row').attr('degree') &&
that[i].cyl === $(event.target).parents('.cyl-col').attr('degree')) {
that[i].count = num
hasSame = true
}
}
if (!hasSame) {
that.push({
id: this.id,
sph: $(event.target).parents('.sph-row').attr('degree').toString(),
cyl: $(event.target).parents('.cyl-col').attr('degree').toString(),
count: num,
bizStock: $(event.target).parents('.cyl-col').find('.bizstock').html()
})
}
} else {
$(event.target).parent('.cyl-col').removeClass('chosen')
for (let i = 0; i < that.length; i++) {
if (that[i].sph === $(event.target).parents('.sph-row').attr('degree') &&
that[i].cyl === $(event.target).parents('.cyl-col').attr('degree')
) {
that[i].count = num
}
}
}
}
当选择数量多的时候 每次keyup都会循环一遍40长度以上的数组,遂改之,改为缓存对象索引,以下为修改以后的代码
chooseLensSpec: function (event,sph,cyl) {
//设置索引
let currentClickIdx = `${sph}-${cyl}`
let num = this.input_num_limit($(event.target).val(), {
int: 4,
dec: 0
})
if (num === '' && this.pageType === 'inventoryCheck') {
num = '0'
}
$(event.target).val(num)
let that = this.lens.chosenTempObj
if(!isNaN(num) && Number(num)!==0){
that[currentClickIdx] = {
id: this.id,
sph: $(event.target).parents('.sph-row').attr('degree').toString(),
cyl: $(event.target).parents('.cyl-col').attr('degree').toString(),
count: num,
bizStock: $(event.target).parents('.cyl-col').find('.bizstock').html()
}
}
else{
delete that[currentClickIdx]
}
},
改完之后发现还是有客户电脑内存占用过高，遂发现点击事件触发DOM操作过多引起的:
selectLensSpec: function (event,sph,cyl) {
if(!this.enableSelectLen){
return
}
this.enableSelectLen = false
var obj = {}
//设置索引
let currentClickIdx = `${sph}-${cyl}`
// this.$nextTick(()=>{
if (!$(event.target).hasClass('cyl-col')) {
obj = $(event.target).parents('.cyl-col')
} else {
obj = $(event.target)
}
obj.toggleClass('chosen')
if (obj.hasClass('chosen')) {
let type = this.orderType
if (this.autoFillInventoryNumber && (type === 'STOCK_RETREAT' || type === 'INVENTORY_OUT') && Number(obj.find('.bizstock').text()) > 0) {
obj.find('.spec-text').val(obj.find('.bizstock').text()).focus().select()
} else {
obj.find('.spec-text').val('1').focus().select()
}
} else {
obj.find('.spec-text').val('')
}
let count = obj.find('.spec-text').val()
this.lens.chosenTempObj[currentClickIdx] = {
detailId: obj.data('detailid') ? obj.data('detailid').toString() : null,
id: this.id,
sph: obj.parents('.sph-row').attr('degree').toString(),
cyl: obj.attr('degree').toString(),
count: count,
bizStock: obj.find('.bizstock').html()
}
this.enableSelectLen = true
// })
},
重构代价过大,最后决定不改
ps:老项目jquery转vue是真的烦。。。好多坑 以后少在vue中用jquery