Skip to content

Commit a4e9b8e

Browse files
tangbctangbc
committed
Update by cr
1 parent c0f0943 commit a4e9b8e

File tree

3 files changed

+54
-56
lines changed

3 files changed

+54
-56
lines changed

‎dist/index.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,18 @@
5151
var LEADING_BUFFER = 2;
5252

5353
var Virtual = /*#__PURE__*/function () {
54-
function Virtual(param, updateHook) {
54+
function Virtual(param, callUpdate) {
5555
_classCallCheck(this, Virtual);
5656

57-
this.init(param, updateHook);
57+
this.init(param, callUpdate);
5858
}
5959

6060
_createClass(Virtual, [{
6161
key: "init",
62-
value: function init(param, updateHook) {
62+
value: function init(param, callUpdate) {
6363
// param data
6464
this.param = param;
65-
this.updateHook = updateHook; // size data
65+
this.callUpdate = callUpdate; // size data
6666

6767
this.sizes = new Map();
6868
this.firstRangeTotalSize = 0;
@@ -76,7 +76,7 @@
7676

7777
this.range = Object.create(null);
7878

79-
if (this.param) {
79+
if (param) {
8080
this.checkRange(0, param.keeps - 1);
8181
} // benchmark test data
8282
// this.__bsearchCalls = 0
@@ -87,7 +87,7 @@
8787
key: "destroy",
8888
value: function destroy() {
8989
this.init(null, null);
90-
} // return actually render range
90+
} // return current render range
9191

9292
}, {
9393
key: "getRange",
@@ -207,7 +207,7 @@
207207
}
208208

209209
this.checkRange(overs, this.getEndByStart(overs));
210-
} // return the pass overs at current scroll offset
210+
} // return the pass overs according to current scroll offset
211211

212212
}, {
213213
key: "getScrollOvers",
@@ -268,7 +268,8 @@
268268
this.lastCalcIndex = Math.max(this.lastCalcIndex, givenIndex - 1);
269269
this.lastCalcIndex = Math.min(this.lastCalcIndex, this.getLastIndex());
270270
return offset;
271-
}
271+
} // is fixed size type
272+
272273
}, {
273274
key: "isFixedType",
274275
value: function isFixedType() {
@@ -279,7 +280,7 @@
279280
key: "getLastIndex",
280281
value: function getLastIndex() {
281282
return this.param.uniqueIds.length - 1;
282-
} // in some conditions range will break, we need check and correct it
283+
} // in some conditions range is broke, we need correct it
283284
// and then decide whether need update to next range
284285

285286
}, {
@@ -299,7 +300,7 @@
299300
if (this.range.start !== start) {
300301
this.updateRange(start, end);
301302
}
302-
} // call updating to a new range and rerender
303+
} // setting to a new range and rerender
303304

304305
}, {
305306
key: "updateRange",
@@ -308,8 +309,8 @@
308309
this.range.end = end;
309310
this.range.padFront = this.getPadFront();
310311
this.range.padBehind = this.getPadBehind();
311-
this.updateHook(this.getRange());
312-
} // return end base on start when going to a new range
312+
this.callUpdate(this.getRange());
313+
} // return end base on start
313314

314315
}, {
315316
key: "getEndByStart",
@@ -337,7 +338,7 @@
337338

338339
if (this.isFixedType()) {
339340
return (lastIndex - end) * this.fixedSizeValue;
340-
} // if calculated all already, return the exactly offset
341+
} // if it's all calculated, return the exactly offset
341342

342343

343344
if (this.lastCalcIndex === lastIndex) {
@@ -346,7 +347,7 @@
346347
// if not, use a estimated value
347348
return (lastIndex - end) * this.getEstimateSize();
348349
}
349-
} // get estimate size for one item, get from param.size at first range
350+
} // get the item estimate size
350351

351352
}, {
352353
key: "getEstimateSize",
@@ -567,8 +568,7 @@
567568
// string value also use for aria role attribute
568569
FOOTER: 'footer'
569570
};
570-
var NAME = 'virtual-list';
571-
var VirtualList = Vue.component(NAME, {
571+
var VirtualList = Vue.component('virtual-list', {
572572
props: VirtualProps,
573573
data: function data() {
574574
return {
@@ -586,15 +586,15 @@
586586
created: function created() {
587587
this.isHorizontal = this.direction === 'horizontal';
588588
this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop';
589-
this.installVirtual(); // listen item size changing
589+
this.installVirtual(); // listen item size change
590590

591-
this.$on(EVENT_TYPE.ITEM, this.onItemResized); // listen slot size changing
591+
this.$on(EVENT_TYPE.ITEM, this.onItemResized); // listen slot size change
592592

593593
if (this.$slots.header || this.$slots.footer) {
594594
this.$on(EVENT_TYPE.SLOT, this.onSlotResized);
595595
}
596596
},
597-
// set back offset when use keep-alive
597+
// set back offset when awake from keep-alive
598598
activated: function activated() {
599599
this.scrollToOffset(this.virtual.offset);
600600
},
@@ -668,8 +668,7 @@
668668
uniqueIds: this.getUniqueIdFromDataSources()
669669
}, this.onRangeChanged); // sync initial range
670670

671-
this.range = this.virtual.getRange(); // just for debug
672-
// window.virtual = this.virtual
671+
this.range = this.virtual.getRange();
673672
},
674673
getUniqueIdFromDataSources: function getUniqueIdFromDataSources() {
675674
var _this2 = this;
@@ -683,12 +682,12 @@
683682
var root = this.$refs.root;
684683
return root ? Math.ceil(root[this.directionKey]) : 0;
685684
},
686-
// return client viewport size (width or height)
685+
// return client viewport size
687686
getClientSize: function getClientSize() {
688687
var root = this.$refs.root;
689688
return root ? root[this.isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
690689
},
691-
// return all scroll size (width or height)
690+
// return all scroll size
692691
getScrollSize: function getScrollSize() {
693692
var root = this.$refs.root;
694693
return root ? root[this.isHorizontal ? 'scrollWidth' : 'scrollHeight'] : 0;
@@ -738,10 +737,12 @@
738737
}
739738
},
740739
// get the real render slots based on range data
740+
// in-place patch strategy will try to reuse components as possible
741+
// so those components that are reused will not trigger lifecycle mounted
741742
getRenderSlots: function getRenderSlots(h) {
742743
var slots = [];
743-
var start = this.disabled ? 0 : this.range.start;
744-
var end = this.disabled ? this.dataSources.length - 1 : this.range.end;
744+
var start = this.range.start;
745+
var end = this.range.end;
745746

746747
for (var index = start; index <= end; index++) {
747748
var dataSource = this.dataSources[index];
@@ -760,7 +761,7 @@
760761
}
761762
}));
762763
} else {
763-
console.warn("[".concat(NAME, "]: cannot get the index ").concat(index, " from data-sources."));
764+
console.warn("Cannot get the index ".concat(index, " from data-sources."));
764765
}
765766
}
766767

@@ -773,7 +774,7 @@
773774
var _this$$slots = this.$slots,
774775
header = _this$$slots.header,
775776
footer = _this$$slots.footer;
776-
var padding = this.disabled ? 0 : this.isHorizontal ? "0px ".concat(this.range.padBehind, "px 0px ").concat(this.range.padFront, "px") : "".concat(this.range.padFront, "px 0px ").concat(this.range.padBehind, "px");
777+
var padding = this.isHorizontal ? "0px ".concat(this.range.padBehind, "px 0px ").concat(this.range.padFront, "px") : "".concat(this.range.padFront, "px 0px ").concat(this.range.padBehind, "px");
777778
return h(this.rootTag, {
778779
ref: 'root',
779780
on: {

‎src/index.js‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ const SLOT_TYPE = {
1616
FOOTER: 'footer'
1717
}
1818

19-
const NAME = 'virtual-list'
20-
21-
const VirtualList = Vue.component(NAME, {
19+
const VirtualList = Vue.component('virtual-list', {
2220
props: VirtualProps,
2321

2422
data () {
@@ -42,16 +40,16 @@ const VirtualList = Vue.component(NAME, {
4240

4341
this.installVirtual()
4442

45-
// listen item size changing
43+
// listen item size change
4644
this.$on(EVENT_TYPE.ITEM, this.onItemResized)
4745

48-
// listen slot size changing
46+
// listen slot size change
4947
if (this.$slots.header || this.$slots.footer) {
5048
this.$on(EVENT_TYPE.SLOT, this.onSlotResized)
5149
}
5250
},
5351

54-
// set back offset when use keep-alive
52+
// set back offset when awake from keep-alive
5553
activated () {
5654
this.scrollToOffset(this.virtual.offset)
5755
},
@@ -130,9 +128,6 @@ const VirtualList = Vue.component(NAME, {
130128

131129
// sync initial range
132130
this.range = this.virtual.getRange()
133-
134-
// just for debug
135-
// window.virtual = this.virtual
136131
},
137132

138133
getUniqueIdFromDataSources () {
@@ -145,13 +140,13 @@ const VirtualList = Vue.component(NAME, {
145140
return root ? Math.ceil(root[this.directionKey]) : 0
146141
},
147142

148-
// return client viewport size (width or height)
143+
// return client viewport size
149144
getClientSize () {
150145
const { root } = this.$refs
151146
return root ? root[this.isHorizontal ? 'clientWidth' : 'clientHeight'] : 0
152147
},
153148

154-
// return all scroll size (width or height)
149+
// return all scroll size
155150
getScrollSize () {
156151
const { root } = this.$refs
157152
return root ? root[this.isHorizontal ? 'scrollWidth' : 'scrollHeight'] : 0
@@ -207,10 +202,12 @@ const VirtualList = Vue.component(NAME, {
207202
},
208203

209204
// get the real render slots based on range data
205+
// in-place patch strategy will try to reuse components as possible
206+
// so those components that are reused will not trigger lifecycle mounted
210207
getRenderSlots (h) {
211208
const slots = []
212-
const start = this.disabled ? 0 : this.range.start
213-
const end = this.disabled ? this.dataSources.length - 1 : this.range.end
209+
const start = this.range.start
210+
const end = this.range.end
214211
for (let index = start; index <= end; index++) {
215212
const dataSource = this.dataSources[index]
216213
if (dataSource) {
@@ -227,7 +224,7 @@ const VirtualList = Vue.component(NAME, {
227224
}
228225
}))
229226
} else {
230-
console.warn(`[${NAME}]: cannot get the index ${index} from data-sources.`)
227+
console.warn(`Cannot get the index ${index} from data-sources.`)
231228
}
232229
}
233230
return slots
@@ -238,7 +235,7 @@ const VirtualList = Vue.component(NAME, {
238235
// https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
239236
render (h) {
240237
const { header, footer } = this.$slots
241-
const padding = this.disabled ? 0 : this.isHorizontal
238+
const padding = this.isHorizontal
242239
? `0px ${this.range.padBehind}px 0px ${this.range.padFront}px`
243240
: `${this.range.padFront}px 0px ${this.range.padBehind}px`
244241

‎src/virtual.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ const CALC_TYPE = {
1414
const LEADING_BUFFER = 2
1515

1616
export default class Virtual {
17-
constructor (param, updateHook) {
18-
this.init(param, updateHook)
17+
constructor (param, callUpdate) {
18+
this.init(param, callUpdate)
1919
}
2020

21-
init (param, updateHook) {
21+
init (param, callUpdate) {
2222
// param data
2323
this.param = param
24-
this.updateHook = updateHook
24+
this.callUpdate = callUpdate
2525

2626
// size data
2727
this.sizes = new Map()
@@ -37,7 +37,7 @@ export default class Virtual {
3737

3838
// range data
3939
this.range = Object.create(null)
40-
if (this.param) {
40+
if (param) {
4141
this.checkRange(0, param.keeps - 1)
4242
}
4343

@@ -50,7 +50,7 @@ export default class Virtual {
5050
this.init(null, null)
5151
}
5252

53-
// return actually render range
53+
// return current render range
5454
getRange () {
5555
const range = Object.create(null)
5656
range.start = this.range.start
@@ -162,7 +162,7 @@ export default class Virtual {
162162
this.checkRange(overs, this.getEndByStart(overs))
163163
}
164164

165-
// return the pass overs at current scroll offset
165+
// return the pass overs according to current scroll offset
166166
getScrollOvers () {
167167
// if slot header exist, we need subtract its size
168168
const offset = this.offset - this.param.slotHeaderSize
@@ -220,6 +220,7 @@ export default class Virtual {
220220
return offset
221221
}
222222

223+
// is fixed size type
223224
isFixedType () {
224225
return this.calcType === CALC_TYPE.FIXED
225226
}
@@ -229,7 +230,7 @@ export default class Virtual {
229230
return this.param.uniqueIds.length - 1
230231
}
231232

232-
// in some conditions range will break, we need check and correct it
233+
// in some conditions range is broke, we need correct it
233234
// and then decide whether need update to next range
234235
checkRange (start, end) {
235236
const keeps = this.param.keeps
@@ -249,17 +250,16 @@ export default class Virtual {
249250
}
250251
}
251252

252-
// call updating to a new range and rerender
253+
// setting to a new range and rerender
253254
updateRange (start, end) {
254255
this.range.start = start
255256
this.range.end = end
256257
this.range.padFront = this.getPadFront()
257258
this.range.padBehind = this.getPadBehind()
258-
259-
this.updateHook(this.getRange())
259+
this.callUpdate(this.getRange())
260260
}
261261

262-
// return end base on start when going to a new range
262+
// return end base on start
263263
getEndByStart (start) {
264264
const theoryEnd = start + this.param.keeps - 1
265265
const truelyEnd = Math.min(theoryEnd, this.getLastIndex())
@@ -284,7 +284,7 @@ export default class Virtual {
284284
return (lastIndex - end) * this.fixedSizeValue
285285
}
286286

287-
// if calculated all already, return the exactly offset
287+
// if it's all calculated, return the exactly offset
288288
if (this.lastCalcIndex === lastIndex) {
289289
return this.getIndexOffset(lastIndex) - this.getIndexOffset(end)
290290
} else {
@@ -293,7 +293,7 @@ export default class Virtual {
293293
}
294294
}
295295

296-
// get estimate size for one item, get from param.size at first range
296+
// get the item estimate size
297297
getEstimateSize () {
298298
return this.firstRangeAverageSize || this.param.size
299299
}

0 commit comments

Comments
 (0)