百度ife前端2015春task练习记录01

所有代码可以在我的Github中找到，记录从task002开始。

判断各种数据类型

要求

// 判断arr是否为一个数组，返回一个bool值
function isArray(arr) {
    // your implement
}

// 判断fn是否为一个函数，返回一个bool值
function isFunction(fn) {
    // your implement
}

思路

最开始使用typeof()方法，然后发现在判断array时返回是object，与判断对象类型时重合。在查阅资料后，使用了一种更为通用的方法。

实现

function getVarType(data) {
    if (data === undefined) {
        return 'Undefined';
    }
    if (data === null) {
        return 'Null';
    }
    return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
};

function isArray(arr) {
    if (getVarType(arr) == 'array') {
        return true;
    } else return false;
}

function isFunction(fn) {
    if (getVarType(fn) == 'function') {
        return true;
    } else return false;
}

补充

除此之外，还有instanceof和constructor等方法
typeof()方法，对于基本类型的判断十分有用。

typeof(123);//"number"
typeof("123");//"string"
typeof(false);//"boolean"
typeof(undefined);//"undefined"

//注意null和function得到的值
typeof(null);//"object"
typeof(function(){});//"function"

上面给出了所有使用typeof()比较特殊的结果，除此之外，所用的引用类型使用该方法得出的结果都是object
而instanceof适用于判断引用类型。
MDN中这样描述：

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

并且看定义的语法是这样的：

object instanceof constructor

即是说，instanceof左边的，是一个对象，而右边必须是一个构造函数。如果左边是一个基本类型，那不管右边是什么，返回的一定是false。
那么这个就可以用来判断引用类型了，例如

var arr = [1,2,3];
var date = new Date();
arr instanceof Array;//true
date instanceof Date;//true

//这里自定义一个构造函数
function Person(){}
var franose = new Person();
franose instanceof Person;//true;

深度克隆

要求

// 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
// 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等
function cloneObject(src) {
    // your implement
}

// 测试用例：
var srcObj = {
    a: 1,
    b: {
        b1: ["hello", "hi"],
        b2: "JavaScript"
    }
};
var abObj = srcObj;
var tarObj = cloneObject(srcObj);

srcObj.a = 2;
srcObj.b.b1[0] = "Hello";

console.log(abObj.a);
console.log(abObj.b.b1[0]);

console.log(tarObj.a);      // 1
console.log(tarObj.b.b1[0]);    // "hello"

思路

首先对判断参数类型，对于类型String, Boolean, Number，只需要新建一个变量，并将参数的值赋值给新建的变量即可；对于类型Data, Array, Object则要分情况。
Data()：new一个Date对象，使用getTime()方法得到原对象的值，再使用setTime()给新建的对象赋值。
Array()：new一个Array对象，使用for循环对原数组遍历，再依次赋值到新建的Array对象中。
Object()：new一个对象，对对象中的属性遍历，使用递归对属性进行赋值，多层属性也可以使用递归解决。

实现

function cloneObject(data) {
    var objectType = getVarType(data);
    //the object for cloning is native object
    if (objectType == "null" || objectType == "undefined") {
        return data;
    }

    if (objectType == "string" || objectType == "number" || objectType == "boolean") {
        var copy = data;
        return copy;
    } else if (objectType == "date") {
        var copy = new Date();
        copy.setTime(data.getTime());
        return copy;
    } else if (objectType == "array") {
        var copy = [];
        for (var i = 0; i < data.length; i++) {
            copy[i] = cloneObject(data[i]);
        }
        return copy;
    } else if (objectType == "object") {
        var copy = {};
        for (var attr in data) {
            if (data.hasOwnProperty(attr)) {
                copy[attr] = cloneObject(data[attr]);
            }
        }
        return copy;
    }
}

补充

数组去重

要求

// 对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组
function uniqArray(arr) {
    // your implement
}

// 使用示例
var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
console.log(b); // [1, 3, 5, 7]

思路

一开始的思路是先new一个数组，对原数组遍历，使用indexOf()函数，若新数组中没有当前遍历到的元素，则push到数组中去。

实现

function uniqArray(arr) {
    var uniqarr = [];
    for (i = 0; i < arr.length; i++) {
        if (uniqarr.indexOf(arr[i]) == -1) {
            uniqarr.push(arr[i]);
        }

    }
    return uniqarr;
}

补充

正则表达式

要求

// 对字符串头尾进行空格字符的去除、包括全角半角空格、Tab等
//返回一个字符串
// 尝试使用一行简洁的正则表达式完成该题目
function trim(str) {
    // your implement
}

// 使用示例
var str = '   hi!  ';
str = trim(str);
console.log(str); // 'hi!'

// 判断是否为邮箱地址
function isEmail(emailStr) {
    // your implement
}

// 判断是否为手机号
function isMobilePhone(phone) {
    // your implement
}

思路

这俩要求不在一起，但都是使用正则表达式实现的，所以就放在了一起。
1. 首先是去掉一个字符串开头和结尾的表格，刚开始看错题了，以为就是去掉空格，这样给出的示例是能通过了，但是实现还是不对，于是用到了正则表达式里的分组，将字符串分为开头的空格、结尾的空格以及中间的任意字符三组，最后结果取第二个分组即中间的任意字符即可。
最开始正则式是这样写的(^\s*)(.*)(\s*$)，但这里有个问题是开头的空格能够去掉了，结尾的空格却去不掉。因为对第二个分组中的正则式而言，匹配到任意字符串，即紧接在它之后的任意个空格也算在了里面，这样就不会匹配第三个分组的正则式。
所以在最后这里还用到了一个正则表达式中的向前匹配，正则表达式改为(^\s*)(.*)(?=\S\s*$)，即在匹配空格时还要查看前面的字符是否为非空字符。
但是这样的问题是结尾的空格的前一个字符也被当做第三组里的了，尝试了几次发现这样的思路没法实现，于是查了一下jq源码，发现用一个或者运算符就可以搞定。
于是最后的正则式定为^\s+|\s+$
2. 这个比较简单，网上类似的表达式很多，随便写了一下，匹配不太严格，但是基本能符合要求。

实现

    function trim(str) {
        var reg = /^\s+|\s+$/g;
        return str.replace(reg, "");
    }

// 判断是否为邮箱地址
function isEmail(emailStr) {
    var reg = /^[a-zA-z0-9_\.-]+@[a-zA-z0-9\.-]+\.[a-z]{2,6}$/g;
    if (reg.test(emailStr) == true) {
        return true;
    } else return false;
}

// 判断是否为手机号
function isMobilePhone(phone) {
    var reg = /^1[34578]\d{9}$/g;
    if (reg.test(phone) == true) {
        return true;
    } else return false;
}

补充

暂无

数组和对象遍历

要求

// 实现一个遍历数组的方法，针对数组中每一个元素执行fn函数
//并将数组索引和元素作为参数传递
function each(arr, fn) {
    // your implement
}

// 其中fn函数可以接受两个参数：item和index

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item, index) {
    console.log(index + ': ' + item)
}
each(arr, output);  // 0:java, 1:c, 2:php, 3:html

// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {}

// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3

思路

对于数组，最开始用的是for..in...，后来看见review中说不要用for...in...，就改了一下。
其他也没啥难度，直接看代码吧。

实现

function each(arr, fn) {
    for(var i = 0, length1 = arr.length; i < length1; i++){
        fn(arr[i], i);
    }
}

// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {
    var length = 0;
    for (item in obj) {
        length += 1;
    }
    return length;
}

补充

在review里看到说for(;;)循环有两种形式，for(var i = 0, len = arr.length; i < len; i++)和 for(var i = 0; i < arr.length; i++)，建议使用前一种。
这两者区别在第一种只调用了一次arr.length方法，而第二种在每一次循环时都调用了arr.length，很明显第一种的执行更快一些。
为什么数组不要用for...in... ，首先它遍历的时候顺序是不确定的；其次对象属性的enumerable 为false 的话，该对象在for...in... 中就不会出现；最后for...in... 受原型链的影响，如果该对象的原型链中有该对象没有的属性的话，for...in... 也会遍历到。
对于for...in... 受原型链影响这点，如果不想遍历到原型链中的属性，可以加一个hasOwnProperty 的判断。
```
for (i in obj) {
 if (obj.hasOwnProperty(i)){
   console_log(i);
}
}
```

DOM操作

要求

// 实现一个简单的Query
function $(selector) {

}
// 可以通过id获取DOM对象，通过#标示，例如
$("#adom"); // 返回id为adom的DOM对象

// 可以通过tagName获取DOM对象，例如
$("a"); // 返回第一个<a>对象

// 可以通过样式名称获取DOM对象，例如
$(".classa"); // 返回第一个样式定义包含classa的对象

// 可以通过attribute匹配获取DOM对象，例如
$("[data-log]"); // 返回第一个包含属性data-log的对象

$("[data-time=2015]"); // 返回第一个包含属性data-time且值为2015的对象

// 可以通过简单的组合提高查询便利性，例如
$("#adom .classa"); // 返回id为adom的DOM所包含的所有子节点中，第一个样式定义包含classa的对象

思路

这一题花费的时间比较久。

第一种思路是直接在$()中判断是否有空格，然后再分情况查询。单独查询的话比较好实现，但在组合查询中遇到了麻烦。直接写的话比较麻烦几乎是把几种情况都再写了一遍；使用递归的话因为返回的值不是数组，效果并不理想。于是放弃。
第二种思路是不再判断是否包含空格，而是直接使用split(" ")分成数组，使用for循环挨个查询。但在组合查询这一情况时想不到好的解决办法，还是放弃了。

最后搜索了一下别人的答案，综合了一下各种思路，个人感觉这种最好理解实现起来也比较方便：
首先实现domQuery函数，这个函数直接返回查询到的结果，而不是数组中的第一个对象，然后再$()中再查询到第一个对象。
在domQuery(selector,root)中有两个参数，其中root就是考虑到组合查询的情况，在传入的selector有两个的情况下，第一个selector查询到的元素作为第二个子selector的root来进行查询。

实现

domQuery函数

function domQuery(selector, root) {
    var text;
    var elements = [];
    //if root is not defined, root = document
    if (!root) {
        root = document;
    }
    if (selector.charAt(0) === "#") {
        text = selector.replace(/^\#/, "");
        elements = document.getElementById(text);
    } else if (selector.charAt(0) === ".") {
        text = selector.replace(/^\./, "");
        elements = root.getElementsByClassName(text);
    } else if ((selector.charAt(0) === "[") && (selector.charAt(selector.length - 1) === "]")) {
        //get all the elements
        var eles = root.getElementsByTagName("*");
        //delete "[" and "]"
        selector = selector.replace(/^\[/, "");
        selector = selector.replace(/\]$/, "");

        var texts = selector.split("=");
        var attr = texts[0];
        var value = texts[1];
        //有属性值的情况
        if (texts[1]) {
            for (var i = 0, length1 = eles.length; i < length1; i++) {
                if (eles[i].hasAttribute(attr)) {
                    if (eles[i].getAttribute(attr) === value) {
                        elements = eles[i];
                    }
                }
            }
        }
        //没有属性值
        else {
            for (var i = 0, length1 = eles.length; i < length1; i++) {
                if (eles[i].hasAttribute(attr)) {
                    elements = eles[i];
                }
            }
        }
    } else {
        elements = root.getElementsByTagName(selector);
    }
    return elements;
}

2.$() 函数

function $(selector) {
    //multiple queries
    var result = [];
    if (selector.indexOf(" ") !== -1) {
        //split selector by space
        var selectors = selector.split(" ");
        parents = domQuery(selectors[0]);
        for (var i = 1, length1 = selectors.length; i < length1; i++) {
            if (parents.length) {
                parents = domQuery(selectors[i], parents[0]);
            } else {
                parents = domQuery(selectors[i], parents);
            }
        }
        result = parents;
    }
    //single query
    else {
        var result = domQuery(selector, document);

    }
    if (result.length) {
        return result[0];
    } else {
        return result;
    }
}

补充

代码逻辑

重点说明一下$()中的组合查询的逻辑

    if (selector.indexOf(" ") !== -1) {
        //split selector by space
        var selectors = selector.split(" ");
        parents = domQuery(selectors[0]);
        for (var i = 1, length1 = selectors.length; i < length1; i++) {
            if (parents.length) {
                parents = domQuery(selectors[i], parents[0]);
            } else {
                parents = domQuery(selectors[i], parents);
            }
        }
        result = parents;
    }

parents = domQuery(selectors[0])获得最开始的root根节点，然后开始for循环，每一次循环domQuery得到的值都作为下一次循环的根节点，从而达到组合查询的目的；
这里有个问题是getElementById和getElementsByClassName、getElementsByTagName等方法不同在于getElementById返回单个元素，其他方法返回的则是数组，这就造成了处理上的困难；
if (parents.length)就用于判断当前得到的结果是否为数组，如果是，则只取数组的第一个元素；
但这样的查询其实是不全面的，只能查询到返回数组的第一个中是否包含所查询元素，如果是第二个或者第三个包含，那么是查询不到的。
现在所能做到的，要么查询传进来的参数只有2个；若要查询多个，则像上面所说的那样无法查询除第一个以外的元素是否包含。

如何改进还在摸索中

补充发现

如果组合中第二个selector为id，即类似$(".a #b")这种情况是不行的。会报root.getElementById is not a function错误。
在Chrome控制台也实验了一下，getElementById方法只能用于document。

猜测了一下，大概是因为id是唯一的，并不需要多一个子集去筛选？

DOM事件

要求

// 给一个element绑定一个针对event事件的响应
//响应函数为listener
function addEvent(element, event, listener) {
    // your implement
}

// 移除element对象对于event事件发生时执行listener的响应
function removeEvent(element, event, listener) {
    // your implement
}

// 实现对click事件的绑定
function addClickEvent(element, listener) {
    // your implement
}

// 实现对于按Enter键时的事件绑定
function addEnterEvent(element, listener) {
    // your implement
}

// 事件代理
function delegateEvent(element, tag, eventName, listener) {
    // your implement
}

$.delegate = delegateEvent;

// 使用示例
// 还是上面那段HTML，实现对list这个ul里面所有li的click事件进行响应
$.delegate($("#list"), "li", "click", clickHandle);

//函数封装
$.on(selector, event, listener) {
    // your implement
}

$.click(selector, listener) {
    // your implement
}

$.un(selector, event, listener) {
    // your implement
}

$.delegate(selector, tag, event, listener) {
    // your implement
}

// 使用示例：
$.click("[data-log]", logListener);
$.delegate('#list', "li", "click", liClicker);

思路

一开始其实没太懂这个要求，尝试写了一下也不尽人意，于是搜索了一下其他人的方法，才发现其实是很简单的一个问题自己想复杂了，直接使用js中提供的addEventListener方法就可以实现，接下来的几个方法同理
弄懂了事件代理的原理后就很简单，将事件绑定到元素上一级的element中，在点击时判断是否节点名nodeName等于tag，是的话就执行listener函数。
封装没什么好说的，不过element换成了selector，那么利用之前实现的$()把element变成$(selector)就没问题了。

实现

// 给一个element绑定一个针对event事件的响应，响应函数为listener
function addEvent(element, event, listener) {
    if (element.addEventListener) {
        element.addEventListener(event, listener, false)
    }
}

// 移除element对象对于event事件发生时执行listener的响应
function removeEvent(element, event, listener) {
    if (element.removeEventListener) { //标准
        element.removeEventListener(event, listener, false);
    }
}
// 实现对click事件的绑定
function addClickEvent(element, listener) {
    addEvent(element, 'click', listener);
}

// 实现对于按Enter键时的事件绑定
function addEnterEvent(element, listener) {
    addEvent(element, "keydown", function(e) {
        if (e.keyCode === 13) {
            listener();
        }
    });
}

function delegateEvent(element, tag, eventName, listener) {
    $.eventName(element, function(e) {
        var e = e || window.event;　　　　
        var target = e.target || e.srcElement;　　　　
        if (target.nodeName.toLowerCase() === tag) {
            //?????
            listener.call(target, e);　　　　
        }
    });
}

//函数封装
$.on = function(selector, event, listener) {
    return addEvent($(selector), event, listener);
};

$.un = function(selector, event, listener) {
    return removeEvent($(selector), event, listener);
};

$.click = function(selector, listener) {
    return addClickEvent($(selector), listener);
};

$.enter = function(selector, listener) {
    return addEnterEvent($(selector), listener);
};

$.delegate = function(selector, tag, event, listener) {
    return delegateEvent($(selector), tag, eventName, listener);
};

补充

暂无

BOM

要求

// 判断是否为IE浏览器，返回-1或者版本号
function isIE() {
    // your implement
}

// 设置cookie
function setCookie(cookieName, cookieValue, expiredays) {
    // your implement
}

// 获取cookie值
function getCookie(cookieName) {
    // your implement
}

思路

本来想用navigator判断浏览器是否为IE的，但是看到说navigator的信息有误导性，然后搜了一下发现还有用ActiveXObject检测的。MSDN里面这么描述的:
此对象为 Microsoft 扩展，仅在 Internet Explorer 中受支持，在 Windows 8.x 应用商店应用中不受支持。
那么只要检测是否存在ActiveXObject对象就可以知道是否为IE浏览器。
接着是检查版本，在自己电脑上试了一下，IE版本是11，userAgent信息：
“Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko”
而IE10（不包括）之前的IE的userAgent信息格式：
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
分两种情况，一个正则式就可以搞定。
设置cookie和获取cookie在W3C里直接就给了方法了，也没啥难理解的点，就了解一下cookie了。

实现

function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
        var version = getIEVersion();
        return version;
    } else {
        return -1;
    }
}

function getIEVersion () {
    var reg = /(Trident.*rv\:|MSIE\s)((\d+)\.0)/;
    var uaString = navigator.userAgent;
    var versionMatch = uaString.match(reg);
    if (versionMatch) {
        return versionMatch[3];
    }
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return "";
}

补充

暂无

AJAX

要求

function ajax(url, options) {
    // your implement
}

// 使用示例：
ajax(
    'http://localhost:8080/server/ajaxtest', 
    {
        data: {
            name: 'simon',
            password: '123456'
        },
        onsuccess: function (responseText, xhr) {
            console.log(responseText);
        }
    }
);

options是一个对象，里面可以包括的参数为：

type: post或者get，可以有一个默认值
data: 发送的数据，为一个键值对象或者为一个用&连接的赋值字符串
onsuccess: 成功时的调用函数
onfail: 失败时的调用函数

思路

这个也没啥好说的，了解一下xhr对象就能写了。

实现

function ajax(url, options) {
    //新建一个XHR对象
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //若没有设置type，则默认为get

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        options.onsuccess();
    } else {
        options.onfail();
    }
    type = options.type || get;
    xmlhttp.open(type, url, true);
    if (type === "get") {
        xmlhttp.send();
    } else {
        xmlhttp.send(options.data);
    }
}

补充

这里补充一下readyState和status的几种状态

属性	描述
readyState	0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

原文链接：https://blog.csdn.net/xinluo3710/article/details/77892957