为什么这样就能将数据传给右侧详情列表了?

来源:1-6 详情页-右侧数据渲染(3)

weixin_慕前端6235132

2020-08-08 14:56:46

http://img.mukewang.com/climg/5f2e4c6b09a6820706800133.jpg

写回答

3回答

好帮手慕久久

2020-08-08

同学你好,问题解答如下:

1. window.Right.refreshright.js这个文件中,暴露到全局中的一个方法(right.js就对应右侧解结构),位置如下 (注意图中的注释)

http://img.mukewang.com/climg/5f2e766509a4211e12650382.jpg

这种写法就类似于下面的形式:

http://img.mukewang.com/climg/5f2e7676091abef011160478.jpg

所以调用“window.Right.refresh”的时候,实际执行的就是init方法,同学敲一下上面的例子,试试。

其中refresh只是我们起的一个属性名,你也可以换成其他的名字,因为window.Right的值是一个对象对象要有属性和值,所以我们写了一个refresh,来当属性init这个方法的属性名:

http://img.mukewang.com/climg/5f2e76c809ad7b6504810111.jpg

2. 上面讲解了调用window.Right.refresh方法,实际执行的是 right.js中的init方法,而init方法中,我们定义了参数data:

http://img.mukewang.com/climg/5f2e76f20972dcd507980390.jpg

所以“window.Right.refresh(   $target.data('itemData')  ”中的$target.data('itemData')就对应着上图中的data,这样就把数据(参数)传给了init方法,从而传到了右侧,就相当于下面的形式:

http://img.mukewang.com/climg/5f2e7725095da84707030412.jpg

http://img.mukewang.com/climg/5f2e77e10975d8eb03850151.jpg

同学仔细读一下老师的讲解,然后将代码敲一遍,看看打印结果,理解一下。

祝学习愉快!

0

weixin_慕前端6235132

提问者

2020-08-08

这个refresh是干嘛的?

0

好帮手慕久久

2020-08-08

同学你好,问题解答如下:

“window.Right.refresh”是一个方法,它是right.js中暴露到全局的,如下:

http://img.mukewang.com/climg/5f2e6495091d0aa507320367.jpg

调用“window.Right.refresh”时,就是执行right.js中的init方法,所以“window.Right.refresh($target.data('itemData'))”中的参数“$target.data('itemData')”就会对应传到right.js中的init方法中。

由于“$target.data('itemData')”是点击的那个“left-item”上面的数据(左侧的left-item),因此就把左侧的数据传到了右侧。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

0
heixin_慕前端6235132
h ①不理解在调用window.Right.refresh的时候,为什么会执行right.js中的init? ②left.js文件中的参数$target.data("itemData")怎么莫名地成为了right.js文件中init的参数?
h020-08-08
共2条回复

0 学习 · 6815 问题

查看课程