https://github.com/voxtobox/vue-scroll-stop
こちらのライブラリのソースコードについて理解できない箇所が一点あります。
https://github.com/voxtobox/vue-scroll-stop/blob/master/src/vue-scroll-stop.js
js
1// vue-scroll-stop.js 2 3const onScrolling = function(e) { 4 const { 5 clientHeight: height, // ←ここと 6 clientWidth: width, // ←ここ 7 scrollHeight, 8 scrollWidth, 9 scrollTop, 10 scrollLeft 11 } = elem; 12 let { deltaY = 0 , deltaX = 0 } = getDeltas(e); 13 14 15 if (Math.abs(deltaY) > Math.abs(deltaX)) { 16 if ( 17 (modifiers.v || !modifiers.h) && 18 ((deltaY >= 0 && (scrollHeight - scrollTop) === height) || 19 (deltaY <= 0 && scrollTop === 0)) 20 ) { 21 e.preventDefault(); 22 } 23 } else { 24 if ( 25 (modifiers.h || !modifiers.v) && 26 ((deltaX >= 0 && (scrollWidth - scrollLeft) === width) || 27 (deltaX <= 0 && scrollLeft === 0)) 28 ) { 29 e.preventDefault(); 30 } 31 } 32};
それが上記関数なのですが、
const {
clientHeight: height,
clientWidth: width,
scrollHeight,
scrollWidth,
scrollTop,
scrollLeft
} = elem;
特にここのheight、widthというところがどうゆうことなのか分かりません。
この書き方はes6の書き方ですよね...。
elemがclientWidthとか、clientHeightとかを持つオブジェクトなので、上のような書き方でそれぞれの変数に、オブジェクトのそれぞれの階層の部分だけ入ってくれるわけですよね。
const {
clientHeight,
clientWidth,
scrollHeight,
scrollWidth,
scrollTop,
scrollLeft
} = elem;
これなら分かるのですが...。
heightとかwidthは変数で、初期値みたいな定義ができるのかなって最初思いました。
つまりclientHeightとかclientWidthとかのプロパティがelemに存在しない時はheightとかwidthという変数を代入するみたいな。
ただ、そうだとしてもそれらの変数の定義が見当たらないし、これはどうゆうことなのでしょうか。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/05/22 00:44