百度前端技术学院编码挑战（TASK 0002）

TASK 0002 已经发布，初级班的任务时间是从 4 月 24 日至 5 月 7 日，中级班为 4 月 18 日至 4 月 25 日。

TASK 0002 内容：https://github.com/baidu-ife/ife/tree/master/task/task0002

我做的：https://github.com/DIYgod/ife-work/tree/master/task0002

在线 Demo： https://www.anotherhome.net/file/ife/task0002/task0002_1.html

本次任务累计花费时间 17 天（4.19-5.6 ）

下面是我做 TASK 0002 过程中的一些记录。

**1. JavaScript 的性能优化 **（参考 JavaScript 的性能优化：加载和执行）

・Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript，接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。然而这种常规的做法却隐藏着严重的性能问题 —— 脚本会阻塞页面其他资源的下载。因此推荐将所有 < script > 标签尽可能放到 < body > 标签的底部，以尽量减少对整个页面下载的影响。

・由于每个 <script> 标签初始下载时都会阻塞页面渲染，所以减少页面包含的 < script > 标签数量有助于改善这一情况。

・减少 JavaScript 对性能的影响其他方法见参考。

2. == 与 === （参考 Javascript 中双等号 “==” 和三等号 “===” 的区别 JavaScript 里面三个等号和两个等号的区别 JavaScript 编码规范）

==：等于运算，但是不比较值的类型；
===：完全等于运算，不仅比较值，而且还比较值的类型，只有两者一致才为真。

百度 JavaScript 编码规范也规定：在 Equality Expression 中强制使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null。因为使用 === 可以避免等于判断中隐式的类型转换。

3. 类型检测 （参考 JavaScript 编码规范 Javascript 数组类型检测：编写更强壮的 isArray 函数 Javascript 判断函数类型完美解决方案）

通用的简易做法：类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null

// string
typeof variable === 'string'

// number
typeof variable === 'number'

// boolean
typeof variable === 'boolean'

// Function
typeof variable === 'function'

// Object
typeof variable === 'object'

// RegExp
variable instanceof RegExp

// Array
variable instanceof Array

// null
variable === null

// null or undefined
variable == null

// undefined
typeof variable === 'undefined'

判断数组类型：得到对象的字符串表示，然后对比此字符串是否是 '[object Array]'

function isArray(arr) {
    return Object.prototype.toString.call(arr) === '[object Array]';
}

9.20 更新：下面这样也可以

function isArray(arr) {
    return Array.isArray(arr);
}

判断函数类型：首先保证测试的对象存在，并将其序列化成含有 “function” 的字符串，这个是我们检测的基础 (fn.constructor != String,fn.constructor != Array, and fn.constructor != RegExp)。另外，我们需要保证声明的函数不是一个 DOM 节点（fn.nodeName）。然后，我们就可以作 toString 测试。如果我们将一个函数转换成字符串，在一个浏览器中（fn+""）给我们的结果就像这样 “function name (){...}”。现在，判断它是否为函数就很简单，仅仅只需要判断字符串中是否包含单词 “function”。这很神奇，对于任何有问题的函数，在所有浏览器中都能得到我们所需要的结果。这个函数较之于传统的方法，运行速度有些不尽人意，作者（John Resig）建议我们保守使用。

function isFunction(fn) {
        return !!fn
        && !fn.nodeName
        && fn.constructor != String
        && fn.constructor != RegExp
        && fn.constructor != Array
        && /function/i.test(fn + '');
}

9.20 更新：上面那种太麻烦，可以类似 Array 那样判断

function isFunction(fn) {
    return Object.prototype.toString.call(fn) === '[object Function]';
}

复制 Array 的简单做法：

var a1 = [1, 2, 3]
var a2 = a1.slice(0);

4. 类型转换 （参考 JavaScript 编码规范）

number -> string:

num + '';

string -> number:

+str;

var width = '200px';  // 要转换的字符串结尾包含非数字并期望忽略时，使用 parseInt
parseInt(width, 10);

-> boolean:

var num = 3.14;
!!num;

number 去除小数点:

var num = 3.14;
Math.ceil(num);

5. 对有序集合进行遍历时，缓存 length （参考 JavaScript 编码规范）

虽然现代浏览器都对数组长度进行了缓存，但对于一些宿主对象和老旧浏览器的数组对象，在每次 length 访问时会动态计算元素个数，此时缓存 length 能有效提高程序性能。

for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    // ......
}

6. document.body.scrollTop 与 document.documentElement.scrollTop 获取滚动条滚动的距离的坑 （参考 document.body.scrollTop 与 document.documentElement.scrollTop 兼容用 Javascript 获取页面元素的位置火狐、谷歌、IE 关于 document.body.scrollTop 和 document.documentElement.scrollTop 以及值为 0 的问题）

参考阮一峰的教程写了下面一段：

if (document.compatMode == "BackCompat"){
    var elementScrollLeft=document.body.scrollLeft;
} else {
    var elementScrollLeft=document.documentElement.scrollLeft; 
}

没想到遇到了坑，结果 elementScrollLeft 总是 0，调试结果如下：

task0002_1

好坑啊，说好的如果有文档声明（即网页第一句的 docType）的情况下，document.compatMode 的值等于 "CSS1compat"，标准浏览器是只认识 documentElement.scrollTop 的啊。

另外试了一下 IE 和 Firefox，均可认 documentElement.scrollTop，chrome 的错！

还好 document.body.scrollTop 与 document.documentElement.scrollTop 两者有个特点，就是同时只会有一个值生效。比如 document.body.scrollTop 能取到值的时候，document.documentElement.scrollTop 就会始终为 0；反之亦然。所以可以这样写：

var scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;

7. 获取所有 DOM 元素

突然脑洞大开想到的

var ele = document.getElementsByTagName('*');

8. 真假判断

对象总为 true，基础类型看是否为空

!![]    // true
!!{}    // true
!!''    // false
!!0     // false

容易把空数组误以为是 false！

重要的事情要说三遍！

9. 递归获取所有子元素

这个是有问题的，只能获取到下一级的子元素：

var childs = function (element) {
    var allchilds = [];
    var childn = element.childNodes;
    if (childn.length !== 0) {
        for (var i = 0, len = childn.length; i < len; i++) {
            allchilds.push(childn[i]);
            allchilds.concat(childs(childn[i]));
        }
    }
    return allchilds;
}

但如果改成这样就能获取所有子元素了：

var allchilds = [];
var childs = function (element) {
    var childn = element.childNodes;
    if (childn.length !== 0) {
        for (var i = 0, len = childn.length; i < len; i++) {
            allchilds.push(childn[i]);
            allchilds.concat(childs(childn[i]));  //或者 childs(childn[i]);
        }
    }
    return allchilds;
}

~~第一段代码出现问题的原因未知，已经想一晚上了，并无进展。~~

另外调试过程中发现的诡异现象：

task0002_2

解释下：递归调用时返回值 allchilds 是正确的，但返回到上一层时并没有加到上一层的 allchilds 中。

月月告诉我这句话有问题！

allchilds.concat(childs(childn[i]));

w3school 如是说：concat () 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。仅仅会返回被连接数组的一个副本。仅仅会返回被连接数组的一个副本。

一切都说通了。。

所以根本不关 allchilds 声明位置的事，debug 的方向一直都不对，要这样改：

var childs = function (element) {
    var allchilds = [];
    var childn = element.childNodes;
    if (childn.length !== 0) {
        for (var i = 0, len = childn.length; i < len; i++) {
            allchilds.push(childn[i]);
            allchilds = allchilds.concat(childs(childn[i]));
        }
    }
    return allchilds;
}

万万没想到，在月月李胜蛋炒饭的帮助下千辛万苦终于完成了这个小函数。。。

后续：突然想到这样就能轻易获取到

element.getElementsByTagName('*');

已吐血

10. 数组合并 （参考 JavaScript concat () 方法）

重要的事情要另外单独说。因为被坑惨了。

concat () 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

错误用法：

arr1.concat(arr2);

正确用法：

arr1 = arr1.concat(arr2);

11. 事件代理 （参考 javascript 事件代理）

在编程中，如果我们不想或不能够直接操纵目标对象，我们可以利用 delegate 创建一个代理对象来调用目标对象的方法，从而达到操纵目标对象的目的。毋庸置疑，代理对象要拥有目标对象的引用。

~~可以用事件代理的方法来优雅地用一个函数代理另一个函数，比如：~~

var delegate = function (method) {
    return function() {
        return method.apply(null, arguments);
    }
}

var on = delegate(addEvent);
var un = delegate(removeEvent);

~~这样就能优雅地用 on un 函数代理 addEvent removeEvent 函数了。这样实现了目标对象的隐藏，这对于我们保护一些核心对象是非常有用的。~~

我错了，直接这样就行了。。

var on = addEvent;
var un = removeEvent;

12. Object 相关 （参考 js 的 Object 到底是什么呢？）

Array、Boolean、Date、Function、Number 等等对象，其实都是从 Object 来的，它们的祖先都是 Object。它们表现不同的语言特性，比如 Array 有被自动管理的 length 属性，Boolean 只有 true 或 false 取值，Date 表示时间结构，Function 可以被运行，都是它们的原始类型 (valueOf) 赋予它们的能力。

所以有些有趣的东西：

function f() {
    alert('f1');
}
f.c = function() {
    alert('c1');
}

f();
f.c();

可以给函数设置一个也是函数的属性。

13. JavaScript 正则表达式分组 （参考 JavaScript 正则表达式选择、分组和引用）

例：

function getCookie(cookieName) {
    var re = new RegExp(cookieName + '=(.*?)($|;)');
    return re.exec(document.cookie)[1];
}

其中 re.exec (document.cookie) 是一个数组，第一个元素是正则式所有匹配出的字符，第二个元素是匹配的第一个分组，即第一个括号里的内容：(.*?)

分组就就是正则表达式中的子表达式，可以用来获取正则式匹配出的字符串中的特定部分。

9.20 更新：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

var re = new RegExp("\\w+");
var re = /\w+/;

14. JavaScript 跨域 （参考 JavaScript 跨域总结与解决办法）

JavaScript 出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入 iframe 或是 ajax 应用上带来了不少麻烦。

具体限制及解决办法见参考。

15. JavaScript 月份多出一 （参考 JS 中 new Date 怎么就多一个月了？ JavaScript—— 搞甘特图使用 Date 对象时遇到的问题）

task0002_4

明明设置的时 5 月，结果却是 6 月。

实际中，我们数月份不是从 0 开始，但是 JavaScript 却是从 0 开始。JS 中的 0 月是我们的 1 月，JS 中的 1 月是我们的 2 月...

所以设置月份时记得减一，获取月份时记得加一。。

15. 计时器不会阻塞代码执行

task0002_5

我的本意是执行完 a () 再输出 b，没想到 b 先输出了，从这里也可以推测出，计时器并不会阻塞后面语句的执行。

☆ﾐ(o*･ω･)ﾉ完结散花等待 review