学习任务来自:百度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;
// }
}
}