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分，两天充实而又紧张的学习结束了，下周见！