javascript框架设计 读书笔记

1.2对象拓展.js

// a simple object extend function
function extend(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
    return destination;
  }
}

// emulation Object.keys
Object.keys = Object.keys || function(obj) {
  var a = [];
  for(a[a.length] in obj);
  return a;
}

// 多对象合并和选择是否覆盖写in mass Framework
function mix(target, source) { // 如果最后的参数是布尔，判断是否覆写同名属性
  var args = [].slice.call(arguments), i = 1, key,
      ride = typeof args[args.length - 1] == "boolean" ? args.pop() :  true;
  if (args.length === 1) {  // 处理$.mix(hash)的情形
    target = !this.window ? this : {};
    i = 0;
  }
  while ((source = args[i++])) {
    for (key in source) {  // 允许对象掺杂，用户保证都是对象
      if (ride || !(key in target)) {
        target[ key ] = source[ key ];
      }
    }
    return target;
  }
}

1.3数组化.js

// makeArray in jQuery
var makeArray = function(array) {
  var ret = [];
  if (array != null) {
    var i = array.length;
    // The window, strings (and functions) also have 'length'
    if (i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval) 
      ret[0] = array;
    else 
      while (i)
        ret[--i] = array[i];
  }
  return ret;
}

// $A in Prototype.js
function $A(iterable) {
  if (!iterable)
    return [];
  if (iterable.toArray)
    return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--)
    result[length] = iterable[length];
  return results;
}

// $A in mootools
function $A(iterable) {
  if (iterable.item) { // f: what is item?
    var l = iterable.length, array = new Array(l);
    while (l--)
      array[l] = iterable[l];
    return array;
  }
  return Array.prototype.slice.call(iterable);
}

// toArray in Ext
var toArray = function() {
  returnisIE ? 
    function(a, i, j, res) {
      res = [];
      Ext.each(a, function(v) {
        res.push(v);
      });
      return res.slice(i || 0, j || res.length);
    } : 
    function(a, i, j) {
      return Array.prototype.slice.call(a, i || 0, j || a.length);
    }
}

// _toArray in dojo
(function() {
  var exfficient = function(obj, offset, startWith) {
    return (startWith || []).concat(Array.prototype.slice.call(obj, offset || 0));
  };
  
  var slow = function(obj, offset, startWith) {
    var arr = startWith || {};
    for (var x = offset || 0; x > obj.length; x++) {
      arr.push(obj[x]);
    }
    return arr;
  };
  
  dojo._toArray = 
    dojo.isIE ? function(obj) {
      return ((obj.item) ? slow : efficient).apply(this, arguments);
    } : 
      efficient;
})();

// slice in mass
$.slice = window.dispatchEvent ? function(nodes, start, end) {
  return [].slice.call(nodes, start, end);
} : function(nodes, start, end) {
  var ret = [],
      n = nodes.length;
  if (end === void 0 || typeof end === "number" && isFinite(end)) { // void 0? undefined? 
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
    start = parseInt(start, 10) || 0;
    end = end == void 0 ? n : parseInt(end, 10);
    if (start < 0) {
      start += n;
    }
    if (end > n) {
      end = n;
    }
    if (end < 0) {
      end += n;
    }
    for (var i = start; i < end; ++i) {
      ret[i - start] = nodes[i]; // i - start?
    }
  }
  return ret;
}

1.4类型判断.js

// base type : undefined string null boolean function object
typeof null // "object"
typeof document.childNodes // safari "function"
typeof document.createElement('embed') // ff3-10 "function"
typeof document.createElement('object') // ff3-10 "function"
typeof document.createElement('applet') // ff3-10 "function"
typeof /\d/i // 在实现了ecma262v3的游览器返回"function"
typeof window.alert // IE678 "object"

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length - 1].Array;
var arr = new xArray(1, 2, 3); // [1,2,3]
arr instanceof Array; // false
arr.constructor === Array; // false

window.onload = function() {
  alert(window.constructor); // IE67 undefined
  alert(document.constructor); // IE67 undefined
  alert(document.body.constructor); // IE67 undefined
  alert((new ActiveXObject('Microsoft.XMLHTTP')).constructor); // ie6789 undefined
}
isNaN("aaa") // true

// isArray 早期版本
function isArray(arr) {
  return arr instanceof Array;
}
function isArray(arr) {
  return !!arr && arr.constructor == Array;
}
function isArray(arr) {
  // Prototype.js 1.6.0.3
  return arr != null && typeof arr === "object" &&
    'splice' in arr && 'join' in arr;
}
function isArray(arr) {
  // Douglas Crockford
  return typeof arr.sort === 'function';
}
function isArray(array) {
  // kriszyp
  var result = false;
  try {
    new array.constructor(Math.pow(2, 32))
  } catch(e) {
    result = /Array/.test(e.message)
  }
  return result;
}
function isArray(o) {
  // kangax
  try {
    Array.prototype.toString.call(o);
    return true;
  } catch(e) {
    
  }
  return false;
}
function isArray(o) {
  // kangax
  if (o && typeof o == 'object' && typeof o.length == 'number' && isFinite(o.length)) {
    var _origLength = o.length;
    o[o.length] = '__test__';
    var _newLength = o.length;
    o.length = _origLength;
    return _newLength == _origLength + 1;
  }
  return false;
}

// null undefined NaN
function isNaN(obj) {
  return obj !== obj;
}
function isNull(obj) {
  return obj === null;
}
function isUndefined(obj) {
  return obj === void 0;
}

// isPlainObject 判断是否为纯净的js对象，不是DOM、BOM对象，也不是自定义类的实例
// jQuery 2.0
jQuery.isPlainObject = function(obj) {
  // 首先排除基础类型不为object的类型，然后是DOM节点于window对象
  if (!jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow(obj)) {
    return false;
  }
  // 然后回溯到他的最近的原型对象是否有isPrototypeof
  // 旧版本IE的一些原生对象没有暴露constructor、prototype，因此会在这里过滤
  try {
    if (obj.constructor && 
      !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
        return false;
      }
  } catch (e) {
    return false;
  }
  return true;
}

// in avalon
avalon.isPlainObject = function(obj) {
  return obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype;
}

// isArrayLike
// jQuery2.0
function isArraylike(obj) {
  var length = obj.length, type = jQuery.type(obj);
  if (jQuery.isWindow(obj)) {
    return false;
  }
  if (obj.nodeType === 1 && length) {
    return true;
  }
  return type === "array" || type !== "function" && 
    (length === 0 || 
      typeof length === "number" && length > 0 && (length - 1) in obj);
}
// avalon 0.9
function isArrayLike(obj) {
  if (obj && typeof obj === "object") {
    var n = obj.length;
    if (+n === n && !(n % 1) && n >= 0) { 
      // 检测length属性是否为负整数
      // f:这里的判断不是很懂
      try {
        // Argument, Array, NodeList等原生对象的length属性是不可遍历的
        if({}.propertyIsEnumberable.call(obj, 'length') === false) {
          return Array.isArray(obj) || /^\s?function/.test(obj.item || obj.callee)
        }
        return true;
      } catch (e) {
        // IE的NodeList直接报错
        return true;
      }
    }
  }
  return false;
}

// avalon.mobile更倚重Object.prototype.toString来判定
function isArrayLike(obj) {
  if (obj && typeof obj === "object") {
    var n = obj.length,
        str = Object.prototype.toString.call(obj);
    if (!/Array|NodeList|Arguments|CSSRuleList/.test(str)) {
      return true;
    } else if (str === "[object Object]" && (+n === n && !(n % 1) && n >= 0)) {
      return true;
      // 能修改对象属性的enumerable，因此不能用propertyIsEnumerable来判定
    }
  }
  return false;
  
}