2013年8月3号和2013年8月4号,JavaScript培训第三周的课程

从一道面试题引发的故事    QQ咨询:1144709265

上午是以复习和巩固前两天的知识点为主。

10点未到,大部分同学已经就坐,大家聊的不亦乐乎,课堂气氛相当活跃啊!

此时,珠峰培训学员中著名的大嘴邹存德发言,要求讲讲他遇到的面试题。拿来一看,果然经典。正好今天的课少个开场白,那就从他提供的面试题里选一个,做为今天上午课程的引子吧。

有N个评委进行打分,求这位选手的平均得分(去掉一个最高分和一个最低分)。

这题的需求便于理解,好把握,逻辑关系不复杂,但涉及到的基础知识点不少。做为基础知识的复习和巩固,真是一道不可多得的好题啊。好,就拿它开场了!

   n个评委打分,鬼也不知道n是多少,那这肯定是不定长度的参数了,那不必写形参,只需用arguments处理一下就好,去掉一个最高分一个最低分,这貌似排序后shift再pop,那正好,把数组就一下子都复习了。

把知识面拓展开,首先这个需要用到类数组,数组类,原型,call或apply方法的应用。代码就一句话,但知道点一把:

Array.prototype.slice.call(arguments,0);

[].slice.call(arguments,0);

这是要干嘛?为什么要这样做?

        为什么要把arguments转换为数组,如果转换为数组,在什么情况下需要转换,Array类有什么优点,call和apply有什么区别,Array.prototype.slice和[].slice有什么联系,等等等等……,这些问题都要讲清楚!!

把arguments排序去掉首尾是比较高效的方法,当然更简捷的方法是取出除首尾之外的中间项。

那问题就出来了,对arguments本身排序就不大合适,最其码会破坏参数原有的顺序。即使是可以对arguments本身进行排序,还要写算法,明显就折腾了,效率明显不如用原生的sort方法来的快捷方便。数组类的最大优势就是提供了很多现成而且高效的方法,所以经常需要把类数组转换为数组。

那这里类数组和把类数组转换为数组,就是第一个重点了。

当然还要重点说清楚call的用法,它和apply的区别,使用原型上的方法,实例中this关键字的问题等等。

然后就扯到数组方法上了,先复习一下sort方法和给sort方法自定义排序规则,然后再去掉首尾项,可以shif和pop,更简捷的代码是这样:a=a.splice(1,a.length-2);通过用到的这几个方法,把常用的更多数组方法都复习一遍,以达到巩固知识点的目的。

在用自定义排序规则的时候,还顺便复习了一下变量的自动类型转换的知识点

然后就是求和了,可能用循环累加是你最容易想到的方法,但不是最简捷的方法,其实还可以样用:eval(a.join("+"));用join方法把数组连成一个以加号拼接的字符串,再用eval方法把字符串解释成表达式,是不是又把eval方法和join方法复习巩固了一遍。

最终的简捷的代码是

function average(){   

  var a=[].slice.call(arguments,0);//把arguments转为数组

  a.sort(function(a,b){      return a-b});//排序

  a=a.splice(1,a.length-2);//去掉最高分和最低分    

  return eval(a.join("+"))/a.length;//先求和再取平均值

}

做题写例子,从来不是教学目的,在实际的例子或项目中,把基础知识理解透彻,并且培养起逻辑思路,才是真正的教学目标。

 

第二个例子,DOM对象的排序和表格排序

在前三周的课程里,数组、DOM和对象类型的理解,绝对是重点要掌握的内容,可以说这是核心基础,所以,需要不断的去复习,巩固,通过应用达到熟练掌握的目标。

对对象类型的数据排序,首先要确定排序的依据是那个属性,然后再能定义排序规则。

对DOM对象排序,首先要理解DOM集合(NodeList)的特点,把DOM集合转换为数组。NodeList是动态的集合,它里面保存的DOM对象是随着文档结构的变化而动态的发生变化(顺序和数量都会变化)。不能人为的控制里面的DOM对象,所以需要将其转换为数组,

var a=[].slice.call(eles,0);

但这个做法在IE6/7里是不行的,要让大家了解IE6/7里DOM操作其实是浏览器借助操作系统来完成的,这样操作会出错,所以在这里就引出了try catch机制(其实就是为了引出这个知识点)

对表格排序,其实主要是为了学习JavaScript对表格操作的一些不同于其它DOM操作知识点。比如tBodies集合,rows集合,cells集合等,当然还有对DOM的移动添加节点方法的复习。

下午:扩展DOM:和盒子模式相关的知识

下午是边讲新知识,边穿插复习原来的知识点。

知识点一大把,和网页元素的高、宽,定位,样式等相关,在讲解过程中逐渐学习判断浏览器类型,兼容性问题解决,用try catch来解决while循环的问题,使用break中止循环,使用continue跳过不必要的循环体等。

function offset(ele){   //精减后的代码

  vart=ele.offsetTop l=ele.offsetLeft p=ele.offsetParent;

  /*while(p){//标准的写法

        t+=p.offsetTop;

        l+=p.offsetLeft;

        p=p.offsetParent;         

  }*/

  while(1){//写一个死循环

        try{//然后等着出错,其实这种写法是为了巩固对trycatch的理解和应用

             t+=p.offsetTop;

             l+=p.offsetLeft;

             p=p.offsetParent;   

        }catch(e){//出了错则执行catch里的代码            

             break;//跳出循环

        }

  }

  return {left:l,top:t}  

}

看大家是不是都很认真
第二天上午:图片加载机制、图片延迟加载

第二天以综合实例为主,在综合的项目中复习和强化老的知识点,掌握新的知识点,并且培养分析问题的能力。

上午的项目是现在流行的图片延迟加载或瀑布流的效果,分成六步,把其中的原理和完整的解决方法一一完成。

1、图片缓存的机制;浏览器常见应答的编码:200,301,304,404等,和对这些错误的调试(调试工具中的“网络”调试应用)

2、Image对象的理解和应用:它的实例对自动对指定在src属性上的资源发起请求,可以用它来实现图片的缓存。

3、理解图片对象上onload,onerror事件的应用。

4、理解图片延迟加载的基本的原理:图片位置<浏览器+滚动条,则加载真正的图片。

5、重点理解:有多个图片的时候,做循环的时候变量冲突。解决这个问题是把变量放在一个函数里,形成一个作用域。

6、技巧:防止重复的下载图片,加一个标识属性。

下午:选项卡组件和深入学习DOM

把原来简单的选项卡做成一个产品级的选项卡组件,以适应不同的工作需求。让同学们了解基本模式的组件(框架)开发的方式:以固定的HTML和CSS结构来安排编程,并且可以实现不同的扩展。

在这个选项卡组件中,让同学们逐渐学会把不同的功能模块分离,并且编写自己的常用工具库:单例模式的DOM方法库。

前三周的学习结束后,会有一个自己的工具库,这个工具库里包含20多个和DOM、BOM操作相关的方法,这个工具库做为对前三周学习的一个总结性项目练习。

布置复习和预习

选项卡和DOM库没有完全讲完,有完整的视频可供系统复习和预习。并且布置下周其它的学习内容的预习。

5:50分,两天充实而又紧张的学习结束了,下周见!