读vue-0.6-utils.js源码-CSDN博客

typeOf

typeOf: function (obj) {
    return toString.call(obj).slice(8, -1)
}

每个对象都有一个 toString() 方法，当对象被表示为文本值时或者当以期望字符串的方式引用对象时，该方法被自动调用。默认情况下，toString() 方法被每个继承自Object的对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]",其中type是对象类型。

Object.prototype.toString()

也就是说当调用toString方法去转换某个对象时，如果那个对象转换不成字符串就会返回"[object type]"这个，但是由于所有对象都继承自Object，所以默认情况下输出的是"[object object]"，除非你改变toString的指向，也就是我们平时用的call、apply、bind。

我们会发现如果通过数组的toString是可以转换成字符串的，而借用Object的toString就会返回"[object Array]"，我觉得主要还是因为Object里面的toString方法和其他类型的toString方法内部做的是不同的处理，这也就是为什么一定要借用Object里面的toString方法才行。

toText

toText: function (value) {
    return (typeof value === 'string' ||
        typeof value === 'boolean' ||
        (typeof value === 'number' && value == value))
        ? value
        : ''
}

排除NaN value == value，因为NaN不等于NaN，但我觉得作者这段代码写的并不好，一会用===一会又用==并且这里也不涉及隐式转换。

也可以用switch来实现

toText: function (value) {
    switch(typeof value){
      case "string":
      case "boolean":
      case "number":
        return value == value ? value : "";
      default:
        return "";
    }
}

过滤数组重复项

unique: function (arr) {
    var hash = utils.hash(),
        i = arr.length,
        key, res = []
    while (i--) {
        key = arr[i]
        if (hash[key]) continue
        hash[key] = 1
        res.push(key)
    }
    return res
}

他这里是通过对象来实现过滤数组重复项的，因为对象不能有相同的key，作者在代码中经常使用utils.hash()这么一句话，这句话的意思是创建一个空对象，使用的是Object.create(null)，使用这种方法创建对象的好处就是它不会继承任何对象的属性和方法。

除了用作者的这种方式，还可以用Map对象实现

unique: function (arr) {
    var map = new Map(),
        res = [];
    arr.forEach(function(item){
      map.set(item);
    });
    map.forEach(function(item,index){
      res.push(index);
    });
    return res;
}

将字符串转成DOM元素

function toFragment (template) {
    if (typeof template !== 'string') {
        return template
    }
    // 如果是ID选择器则获取元素里面的内容
    if (template.charAt(0) === '#') {
        var templateNode = document.getElementById(template.slice(1))
        // 如果获取不到元素则返回空
        if (!templateNode) return
        template = templateNode.innerHTML
    }
    // 这里创建一个div主要是想借用DOM的innerHTML方法
    var node = document.createElement('div'),
      // 创建一个文档片段，如果这里用createElement来创建元素那么就会多出一个无用的外层标签来。
        frag = document.createDocumentFragment(),
        child
        // 去除空格
    node.innerHTML = template.trim()
    while (child = node.firstChild) {
        frag.appendChild(child)
    }
    return frag
}