Living
Chaplin

Wayne Zheng

百度ife-util.js

2015-06-12 23:45

学习任务来自:百度ife前端技术学院

任务二

trim

正确的实现:

问题:应该用字符来代替 ,chrome下\s可以匹配全角空格,但是考虑兼容的话,需要加上\uFEFF\xA0,去掉BOM头和全角空格。

function trim(str) {

  // 此处 \\s 等是为了去除带转义字符的字符串,如 '  \s 19   '
  var re = new RegExp('(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+\x24)', 'g');
  return String.prototype.trim ? str.trim() : str.replace(re, '');
  
  // MDN 的做法
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
  // return String.prototype.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
}

注意

  • \xa0 表示不换行的空格
  • \u3000 表示中文全角空格
  • \x24 表示$

isEmail

我的实现:

function isEmail(emailStr) {
  if (typeof emailStr ==='string') {
    var re = /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
    return re.test(emailStr);
  }
}

问题:无法识别lj.meng@s.baidu.com这种类型的邮箱

更好的实现:

function isEmail(emailStr) {
  if (typeof emailStr ==='string') {
    var re = /^([\w_\.\-\+])+\@([\w\-]+\.)+([\w]{2,10})+$/;
    return re.test(emailStr);
  }
}

问题:邮箱因为格式太多,并不是单单一个正则表达式就可以搞定的

isPlain 判断对象是否为字面量对象

字面量对象:简单来说,就是该对象由 {} 或者 new Objcet 形式创建

实现方法:

/**
 * 判断一个对象是不是字面量对象,即判断这个对象是不是由{}或者new Object类似方式创建
 *
 * 事实上来说,在Javascript语言中,任何判断都一定会有漏洞,因此本方法只针对一些最常用的情况进行了判断
 * 
 * @return {Boolean}
 */
function isPlain(obj){
  var hasOwnProperty = Object.prototype.hasOwnProperty,
    key;

  // 排除IE下的COM对象返回Object的问题
  // 所有字面量对象都有 isPrototypeOf 这个属性
  if (!obj 
    || Object.prototype.toString.call(obj) !== '[object Object]' 
    || !obj.nodeType
    || !('isPrototypeOf' in obj)
    ) {
    return false;
  }

  // 判断new fun()自定义对象的情况
  // constructor不是继承自原型链的
  // 并且原型中有isPrototypeOf方法才是Object
  if (obj.constructor && !hasOwnProperty.call(obj, 'constructor') && !hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  //判断有继承的情况
  //如果有一项是继承过来的,那么一定不是字面量Object
  //OwnProperty会首先被遍历,为了加速遍历过程,直接看最后一项
  for(key in obj){}

  return key === undefined || hasOwnProperty.call(obj, key);
}

任务三

$.on

$.on = function (element, event, listener) {
  if (element.nodeType && event) {
    if (element.addEventListener) {
      element.addEventListener(event, listener, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, function() {
        listener.call(element);
      });
    } 
    // 几乎不存在不支持标准的浏览器了
    // else {
    //   element['on' + event] = listener;
    // }
  }
}