00:00
在上次课程当中啊,我们已经实现了商品参数整体的页面布局搭建。本次课程呢,咱们需要将这些商品参数的数据,让它实现成动态的渲染。那老师为什么我们要这么去做呢?诶,我又得要先去布局,然后布完局之后还得把它放到JS里边重新再进行渲染,你说我为什么要这样来回折腾呢?原因啊,是因为咱们现在所写的还是一个单纯一个商品的详情页面数据。那你想一想,每次我再点击京东,点击淘宝,那么每一个商品它的详情位置的数据是一样的吗?这个位置的数据能是一样的吗?肯定不是啊。左侧现在还只是一个iPhone手机,那右侧肯定是关于iPhone手机的数据,那如果左侧它是一个女装,那右侧是不是就关于女装当前的一些介绍,那这肯定就不再是什么选择颜色,内存容量啊,就是一些什么尺码啊,一些什么颜色呀。
01:16
等等关于当前这个商品应该有的参数吧。是不是,哎,那你想一想,你是不是应该提前把这个结构先搭建出来,然后再看当前这是一个什么样的数据,那数据里边是不是都应该有它对应的一个参数,参数是什么,我是不是还得在这显示什么呀?现在大家应该明白了吧,为什么我要费劲巴拉的先把结构写好,然后再给它重新渲染,目的就在于这儿了。诶,没有办法啊,没有办法,因为这是咱们动态数据必须要走的这样的一个步骤。
02:00
嗯,好了,当前呢,这也是一个独立的功能,在咱们的JS文件里边把它打开。把前面写好的呢,咱们都给它合起来,诶不知不觉啊,咱们已经走过了这么多的函数了啊,不知道有没有小伙伴一直是不是真的跟到了现在,嗯。来加上一个注释,写好啊,这是商品参数数据的动态渲染。来上一个方法,怎么啊,给它起名就叫做right bottom date。非常好记。把函数调用一下右侧底部的数据,诶,右侧底部的数据来一个。思路吧,嗯,想要完成动态渲染,其实同志们他的思路基本上很固定。
03:01
第一,要么找数据。要么找元素。然后再看数据,它到底是多还是少,如果数据很多,那你记得它一定是以一个什么数组的方式,每一条基本上都是以对象的乘方式来进行呈现的。诶,因为咱们之前见过了images s2C,还有那个pass,是不是都是这样的一个道理。对吗?诶,如果他现在给你的是一个数组,那数组当中无论他是里边有对象也好,还是直接去添加的数据也罢。只要是多条,你就给我记姿,怎么着啊,一定得便利。A,一定得便利啊,For循环。当然除了for循环之外,我多一句啊,那你想一想,咱们是不是还有之前接触到的for each循环?
04:07
嗯,后面呀,我就又尝试着给大家去用这样一个for,因为总用这个for,你一定会对它非常非常的熟悉。当然这个for啊,也是在你学JS的时候,首先要去接触到的第一个循环,很常用,也很重要,嗯,这是咱们对于数据比较多的一个情况。当然如果数量比较少,好,就有点儿像什么,咱们刚才所看到的前面的这个部分的数据。是不是就单纯只是一个对象?只要是一个对象,那里边是不是就是一组兼职队逗号,一组兼职队逗号,一组兼着队逗号,你只需要把每一组键值,对诶前面不是一个键名吗?对吧,后面不是一个键值吗?我要把最后的这个键值给它拿出来,放到我想放的那个位置不就得了吗?
05:05
诶是不是,诶这种单条数据的话还是非常处理的,咱们现在遇见的是什么,是多条数据,所以多条数据的一个渲染思路基本都是一致的,来吧,记录一下。第一,找什么?找咱们right bottom的元素对象,你说老师为啥不找DL呢?那你得给我想一想了啊,咱们啊,现在的这个数据在哪了?是不是在人家的这个数组里边。看到了没?诶是在人家这个数组里面,你发现了吗?数组当中是不是恰好有这四个元素。是不是符合咱们刚才所说到的多条数据,那也就是说我有一个元素,那我对应是不是就应该有一个DL。
06:04
有DL里边是不是就应该有我的DT,还有什么我的DD呀?对吗?有一条我就有DD,有一条我有DL,对应的DT和DD,有一条我就有的DL,有一条我就有的DL,以此类推。所以DL这个元素,它一定是什么动态创建的。它的动态创建的原因就是要根据你当前这个数组它元素的一个个数。好了,在这第二条。查找数据,哪里的数据date.js下,诶这个呢,咱们得点的有点多啊。Good date点儿找到咱们的good detail。
07:04
点,还得找到它里边的这个数组。嗯,找到这个数据好,第三由于数据是一个数组。需要怎么着啊,诶便利。有一条。啊,或者叫做有一个元素,则需要有一个动态的DL元素对象,当然在DL里边是不是应该包含着咱们的DT和DD?对吗?嗯,当然前面你先找元素对象和先找数据,他俩先找谁都是可以的,嗯,来第一个,咱们习惯于先找元素对象啊。查找元素对象。来吧,咱们找到当前的这个页面,给它跑起来。
08:01
在这个位置呢,点击检查找到出。嗯,他没有啊,没有关系,咱们在这自己给他补一下。What?出re等于document,点上cor selector,诶,在这儿加上一个点。舒适、软。嗯,然后元素拿完了之后,一定要想着干啥呀,输出,嗯,都能听到你们跟我一块儿去说答案的这种快感啊。来,咱们俩在这去看一下这个元素拿到没,拿到了对吗?嗯,元素答完了之后,紧接着第二步。查找数据。我把这个数组拿过来,Y变量等于good date,一路点下去,诶,这就是为什么之前我在思路当中提前写好了的原因啊。
09:04
来,咱们把这个数据也给它打印一下,看一看有没有拿到,拿到了没拿到了对吗?嗯,元素也有了,数据也有了,第三步该怎么着了,该循环了。循环数据,当然这个位置啊,我还是用一个负循环啊,咱们YI等于零,然后I小于数组的长度A加加。写进去之后,怎么说有一个元素啊,我就需要去创建一个动态的DL,所以第四步创建。DL元素对象。Dl node等于document点上啊,这个correct element,诶说习惯了啊,然后在这写上DL,好,那么现在这个元素有了之后,别着急,你这个DL里边是不是还有DT和DD呢,对吗?我还得把DT也创建出来,来接着写第五个创建DT元素对象,嗯。
10:19
一个dt no等于document,点上这个。Element。Dt no的点来我们观察一下里边是不是只有值啊,嗯,没有别的啊,那咱们inner text就可以了,等于数组里边每一条的什么呢?看一下咱们每一条当中是不是title表示的是前面的这些文字对吧?嗯,点上title好。那么咱们DL有了,DT也有了,紧接着我是不是可以让它DL来追加咱们的DT了呢?嗯,DL.end。
11:08
把咱们写好的DT给它追进去,但是别忘了DL是不是也是动态产生的,前面的choose rap还没用上呢,啊,在循环里边第七步。让咱们choose rap去追加DL。点上a child,把dl no给它追进去,当然前面咱们所写的这些布局还有没有必要留着呀?诶,其实没多大必要了,你可以都给它删掉了。嗯,你说老师好不容易写的,我都删了,我肝疼,哎,你胃疼也没有也没有用啊,还得删啊,甭管你哪疼咱们都得要删啊,好,那么在这咱们写好了之后。来,咱们去观察一下啊,内容前面的标题是不是就已经出来了,对吧?好还剩什么,是不是右侧咱们DD里边的元素,再看一下DD元素好似是不是又是一个对象当中。
12:14
兼职为一个数组啊。那只要是数组,我是不是还得尝试着去做遍历啊,哎,所以它比较麻烦,比较麻烦好。在咱们choose rap去追加DL之前,嗯,在这咱们去干什么呢?去让它便利,所以在这我把它这个序号稍微调整一下啊,嗯。便利咱们的地地。元素。啊,当然这个呢,咱们说的再准确一点,应该是它里边。The date。诶,因为我为了要得到很多的DD对吗?嗯,For循环外边已经有I变量了,注意一下变量的使用,Y一个勾等于零,然后勾小于。
13:10
咱们当前这个数组。嗯,点上date。点上lance。然后勾下架。诶,在这个循环里边啊,我需要来进行创建我的DD,嗯,创建DD元素。Were DD no等于document,点上correct element,诶,这回我没说秃噜嘴啊,这写上DD。那么弟弟node呢?点上in the test等于当前这个对象,点上date里边每一条。里边的谁呀?是不是为tap呀,对吗?嗯,好了,那DD写好了之后,是不是还得让DL来追加。
14:07
DD,嗯,所以为什么我要把最后一行压轴的诶,在它前面去写啊,DL1定要先追加DT,然后再去追加DD啊,点a pen child,把你创建的DD node给它放进去。好了,此时咱们给他干没了,嗯,咱们看一下啊,他说这里边有一个烂死,那有可能是我写岔头了啊。OK,那么在这啊,咱们啊,刚刚写的时候,咱们犯了一丢丢的小问题啊,哪的问题呢,咱们来看一下这查找的数据是什么呀。是不是整个数组啊,对吗?那数组我直接去点date。能要得到吗?要不到是不是咱们还差了一圈内部的一个下标循环呢?啊,所以在这得加个什么诶,加一个中括号,哎,当然底下获取数据也得加中括号,哎嗯,再看一下此时现在的这个数据,咱们是不是就已经给它渲染出来呀,嗯。
15:17
来,你想要确定它是不是真的没有问题怎么办?去改数据,诶去改数据,比如说我这写上一个金色一,这是不是就变成了金色一,嗯,诶把这个数据就可以还原了啊,所以啊,咱们现在在进行动态渲染的时候,咱们的思路就是主要为三点找元素。这是一个,然后找数据两个,第三再看数据,基本上这样的数据,它都是一个多条的数据啊,只要是多条,你肯定离不开for循环,或者是for each循环。啊,然后在这个循环当中去做你需要创建的元素对象,把该创建的创建好,把里边的属性或者是值都给它添加进去,该让谁追加去让谁追加,但是一定要注意一下它的执行顺序,此时如果我要是把这句话放到for循环之后,行不行呢?行就变成什么了,先追加DD,再追加DT,好,我在这给大家去试验一下。
16:25
好,放后面。它的结构是不是就变了,你说老师我原来写的布局没问题啊,诶不要怀疑你自己啊,CSS是没有问题的,只不过你现在这么写,先怎么着了,执行DD了,再去执行DT,结构就会发生变化了,嗯,所以这咱们必须让它先执行DT的追加,再去便利执行咱们DD的追加,都追加好了,都组装完毕的DL最终给谁呀,给到数。诶,这就是咱们整体商品参数数据的动态渲染。
我来说两句