00:00
哈喽,各位小伙伴大家好,我是上硅谷前端讲师任平老师。这次给大家带来的是继HLCSSJS之后的上优选PC端项。在上次课程当中,咱们已经实现了路径导航的结构布局。本次课程咱们需要将路径导航中的数据,让它实现成动态的数据。好,咱们找到咱们的动态数据,在date.js文件当中。把他拉到一边。观察一下。此时啊,现在在这个文件当中呢,是一个变量当中的一个定义,而这个变量它是一个对象。里边有三组的建职队。咱们现在要用的呢,是第一组pass这样的一个建筑队,把它展开。观察它后面的键值啊,是一个对象,在对象当中每一个元素都是A对象。
01:09
诶,数组当中嵌套对象好来看一下,那么前面三个对象里边都有两个建制,对,一个是title,一个是ul,而最后一个只有title,原因是因为咱们最后一个A它是一个纯文本,不需要ul。好了,想要实现咱们动态的一个渲染功能,首先要做的就是把你的文件引入进来。找到咱们杠body之前把它放到这里,Script标签S2C,对好路径GS下的date.gs。咱们呢,在JS目录下再单纯新建一个,给它起个名叫做index点儿JS。
02:03
诶,后续所有的功能呢,咱们都单独的放到index这个文件里边。引入。此时的引入啊,它就会产生一个先后顺序问题,到底我要先引入的是date,还是先引入的是index,那么你就得要来想一个问题,你后面的文件是不是需要前面文件先加载完成之后诶才能使用,如果是这样子,那么咱们就必须要先引用的是date.gs再引用的是index.gs。因为啊,Index点儿JS文件里边是不是要需要good date这个对象下里边pass数据。是好,那么就需要把数据的这个文件先引入,然后再引入咱们自己的文件。好了,文件引入的顺序大家也需要注意一下。
03:05
打开咱们的index。此时呢,我把它放到中间的位置啊。来大家想一下啊,我呀把这个文件放到了最后。原因就是在想呢,我呢需要让页面当中啊,所有的倒元素都加载完了之后,再来实现我的index的文件。这句话映射了一句代码是不是就应该为window.onload等于谁啊,Function?诶,window.onload不知道大家还有没有印象啊,来,我把这句话呢给你打上一行注释,它的作用就是需要将什么所有的倒母元素对象以及相关的资源全部。
04:06
都加载完毕之后,再来实现的事件函数,诶,再来实践的事件函数好。首先啊,第一步。你是不是得需要当前这个元素的div?这个div啊,咱们给它刚才起了一个名称,是不是叫做NAV。Pass。对吧,诶现在这里边的数据啊,其实你可以把它注释掉了。诶,可以把它注释掉了啊,一会儿啊,咱们需要做的首先先找到这个NAV pass的元素,再来把date.gs下good date里边past这个数组给它找到。先找数据,找元素。
05:02
找到了数据,找到了元素之后,我就需要来针对根据数据的多少。动态来进行创建咱们的A标签以及咱们的I标签,只不过最后一条怎么着了,只创建A,不创建I。来,咱们把对应的思路给大家写一下。思路啊。首先,第一步先干什么?先获取路径导航的页面元素。当然咱们这个元素呢,叫做NAV pass。诶,你先把这个一会儿要渲染的这个元素啊,先找到元素,找到了之后再来干什么,获取所需要的数据。那么这个数据在date.js文件下面的good date。
06:05
点儿什么,Pass。诶,因为它是一个对象对吧,所以咱们需要这个good date.pass后面的这个数组,嗯,元素有了,数据有了,那么第三步。由于数据。是需要动态产生的。啊,数据是动态产生的,只不过咱们现在这里边是几条啊,是四条,有可能根据后续的一个需求往里边来补充,有可能五条六条,也有可能是两条三条都有可能啊数据是动态产生的,那么相应的诶不是这个啊,那么相应的倒母元素也应该是什么动态产生的。A、动态产生的。
07:03
好,我把这个往这边拉一下啊,先关掉,把这个也关掉。好,那么现在动物元素是动态产生的的含义是啥呀?含义需要。创建倒元素。哎,这句话的含义就是需要咱们一会儿来根据你数据的一个多少。根据数据的。数量来进行创建倒元素。诶,根据数量的多少来进行创建倒元素好了,在最后啊再便利数据。创建倒母元素的最后一条,只创建什么A标签,而不创建I标签。
08:04
这就是咱们整体的一个思路。好了,根据当前的这个思路啊,咱们来做一下第一步获取。页面导航的元素对象。找吧。此时呢,咱们把这个页面让它跑起来。好,点击这个位置右键检查,在这儿有一个NAV pass,右侧呢,有当前NAV pass整体的一个样式路径,咱们把它拷过来。在JS里边咱们去定一个变量叫y NAV pass等于document.corry select,当然这个位置啊,你可以使用get I们的bodyd啊,我在这儿呢,就使用的是cor selector都是可以的。获取完元素之后,一定要想着干什么呀,去获取打印一下,看看你有没有拿到它。
09:08
控制台,好,此时这条数据里边的NAV元素是不是拿到了,对吗?嗯,拿到了之后好把它删掉,接着往下第二步干啥呀,获取数据。啊,获取数据where一个变量,比如说我就叫做pass,等于。诶,不是这个啊,找到咱们date.js这个文件,Good date.pass。同样的道理,Cancel点儿log,打印一下咱们的数据是不是拿到了。发现数据里边是不是有0123,诶四条数据对吧?嗯,数据有了之后啊,我就得来观察一下。他说,由于数据是动态产生的,所以对应的DOM元素也应该是动态产生的,好。
10:06
你现在的这条数据,它是不是一个数组对吗?同志们,哎,它既然是数组的话,那我需要有一条数据就有一个有一个A,有一条数据就有一个I,有一个A。那么现在我有四条数据,我是不是得要遍历这个数组,然后根据它的长度来进行创建我的A和创建我的I呢?嗯,没问题啊,来第三个。遍历数据。便利数据啊,负循环。Were I等于零,I小于pass,点上lengths,然后I加加好,那么在这个便利的里面怎么着了?咱们是不是说根据它的数量来创建对应的元素?
11:05
写上第四个创建A标签。玩一个a node创建元素是不是等于document.create element?诶,当然这个方法的话非常接地气啊,Create叫创建,Element叫元素,创建元素好,在这写上A。来继续,A里边咱们观察一下结构,把它拉过来。此时A当中啊,是不是有它的属性,还有它的值对吗?点诶,它的her等于每一条数据当中的URL,而且还有它的这个inner test等于pass每一条儿数据。
12:01
诶把它删一下啊,每一条数据点开头。啊,点上抬头好了,那么现在这个A搞定了之后,紧接着下一个创建I标签。不一个I啊,I know的,一定要注意的是I know的,为啥呀?因为如果你有这一个I的话,跟上方的这个I它就变量重名了啊,一定要注意这个变量重名的问题,document.create element把I加进去。然后啊,这个I当中的值呢,很简单,就是一个斜杠。啊,就是一个斜杠,把这个A也写完了,A也写完了,那下一个步骤。啊,下一个步骤咱们需要让他来进行追加。让NAV pass元素来追加A和IA,我把这个点开啊,让它去追加,那么NAV pass点什么?A pen child把你刚刚创建的这个A。
13:17
和这个I都给它追进来,好,那么现在追进来之后啊,咱们现在页面结构呢,已经实现了。但是你观察一下此时。来检查。最后一个有斜杠不说,然后最后一个里边是不是还有一个her,它里边没有值啊为安find怎么办?做判断A做判断在这啊加上一个if说如果这个I它要循环到了整体长度减一最后一条的话,我只需要怎么着。只需要创建A,而且没有her属性。
14:06
否则,如果你没有到达最后一条,我该怎么创建,该怎么追加,是不是这些事都要去做呀?对吗?把这个A。诶搬过来,然后呢,把her删掉,让他把这个A做一个追加。好了,然后再看一下这个结构吧,当前啊,这是超链接超链接超链接最后一个输入文本对吗?诶,只不过人家这个her呢,写的是三个井号,没有关系啊,没有关系。这样啊,咱们就实现了路径导航的数据动态渲染功能。
我来说两句