00:00
好嘞,各位同学。那咱们呢,去看一下咱们这个项目已经完成了这样的一个进度。那首先说啊,在上一节课的时候,咱们已经把商品分类的这个三级列表已经给他搞定了。那咱们这里呢,也稍微呢,去说一下子找你。那首先说啊,咱们呢,昨天就做了这几件事,第一个做了一件什么事,是不把咱们的商品分类的三级列表。哎,由静态变为什么呀,变为动态的形式。所以说啊,要向服务器发阿贾克斯对不啊,而且这里一定一定要注意啊,如果说是获取服务器的数据,千万别忘记了要解决代理跨域问题。对不,所以一定要解决跨域问题,而且跨域问题在面试当中经常会问到。
01:04
跨域的解决方案咱学过的不就这几种吗?杰森p cross和谁代理跨域?对不?所以说咱们昨天做的第一件事是拉取服务器的数据,把这些静态的数据变为什么变为动态的,这是第一个。第二个呢,咱们又说了一下谁啊,函数的防抖与节流,对不函数的防抖与节流。那以后再出现什么是防抖,什么是节流,像这类的概念你心中得有了,而且他面试的频率很高。对不啊,就是它。那以及咱们昨天呢,也实现了另外一个很重要的一件事情,就是路由的跳转,以及传参。对不,那咱们的这些参数啊,像商品的名字,以及相应产品的ID,其实这些路由穿参咱已经搞定了。
02:07
但是咱们昨天呢,应该知道的一件事是什么,就是路由的跳转,路由的跳转。对不,那有几种形式,有两种形式,一种是声明式导航。对不,那另外一种是编程式导航。而我们这个商品分类当中采用的是什么呢?采用的是编程式导航。而没有采用声明式导航,为什么?昨天这个现象咱们应该见过,就是你鼠标滑的过快,这个背景颜色跟不上鼠标。对不,那是由于什么?由于声明式导航,它是一个组件,叫谁叫router-link,这可是一个组件了。那组件咱们应该知道。组件其实都是view component类的一个实例。
03:04
对不,咱就假如是它是咱们自己搞的一个组件,对不?那你想想,那当服务器加载完数据,这一下子是不是造出了个成千上万的组建的实力,那上万有点夸张,1000多个是有的。那所以说。不能用它,因为用它很耗内存,相当于一瞬间创建了很多组件的实例,会导致着很耗内存,会导致出现卡顿的现象。虽然说咱们昨天没有选择声明式导航,而选用的是编程式导航。那编程式导航呢,昨天咱们也说了。咱最终的解决方案是什么呢?最终的解决方案是进行事件的委派。对不?那如果说你给每一个A标签都绑定单击事件,那你会发现A标签当一点击它的事件处理函数还是很多。
04:09
从性能角度出发,咱们最终选择的是事件的委派。但是昨天咱们应该知道,事件委派存在着一些你需要解决的问题。不,因为这个div里面的子元素有很多,对不有div有H3有A,对不有D有EM1大堆。那咱们遇见的问题是什么来着?是你怎么就知道你点击的一定是A呢?对不,那以及你怎么就知道你点击的是一级目录还是二级目录还是三级目录呢。对不,所以说咱们昨天利用到了谁,利用到了自定义属性解决这个问题。对不?对吧,所以说呢,老师呢,也给你们敲响了一个警钟,就是咱们这个编程式导航啊,咱们解决这个问题采用也就是说解决啊这个问题,咱们采用的是啥,采用的是自定义属性。
05:13
而自定义属性,咱们应该是在很早很早以前学的,但是你要把它回忆起来。对不,那咱们怎么区分,你点击那个标签一定是A呢?很简单,它只要带自定义属性,被什么什么category name,那这样的标签一定是A标签。因为其他的兄弟姐妹们是没有这个属性。那所以说当咱们一点击进行路由跳转的时候,咱们进行了一个判断。判断什么呢?判断你点击的这个元素是否有category name。那如果有,那你一定点击的是A标签。对不?
06:00
那接下来咱们又是怎么区分一级目录、二级目录、三级目录的A标签呢?采用的还是自定义属性。那给一级目录,咱给人家来了一个叫EID。那二级目录咱给人家来了一个叫做2ID,三级目录咱给他来个3ID。那也就是说,通过category name可以区分开你是不是A标签,通过CATEGORY1、二、三这三个ID可以区分开是一级目录还是二级目录。那以及咱们准备了这个路由跳转之前的这个参数,当一点击的时候进行路由的跳转。所以说昨天咱们做到了这里,到这儿有没有问题,没问题的给老师扣一个六。
我来说两句