Because there are three or four clients say there will be Caton phenomenon occasionally open a component, so carefully read the code
This is keyup code to bind the event
chooseLensSpec: function (event) {
let num = this.input_num_limit($(event.target).val(), {
int: 4,
dec: 0
})
if (num === '' && this.pageType === 'inventoryCheck') {
a = '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
}
}
}
}
When the selected number of cycles will again each time keyup 40 length above the array, then corrections, to cache object index , the following modification codes for subsequent
chooseLensSpec: function (event,sph,cyl) {
// set index
let currentClickIdx = `${sph}-${cyl}`
let num = this.input_num_limit($(event.target).val(), {
int: 4,
dec: 0
})
if (num === '' && this.pageType === 'inventoryCheck') {
a = '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]
}
},
After he was found to have a client computer memory usage is too high , then discovered the click event triggers DOM excessive operation caused by:
selectLensSpec: function (event,sph,cyl) {
if(!this.enableSelectLen){
return
}
this.enableSelectLen = false
var obj = {}
// set index
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] = {
DETAILED: obj.data ( 'Details')? obj.data ( 'Details'). toString () of zero,
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
// })
},
The cost of reconstruction is too large, the final decision does not change
ps: old project jquery turn vue is really annoying. . . After a lot of small pits in vue with jquery