前端面试题

1.实现点击页面内任何元素，alert该元素的元素名

2.给出js异步加载的方案，以及说明原理

3.扩展string方法，使得所有字符串拥有trim方法

4.如何拓展开发JQ插件

 

/**
 * 第一题
 * 一开始的想法是想获取页面所有元素，依次绑定方法，突然又想到那直接绑定在doucument上，利用事件冒泡触发
 */
//考虑兼容问题
function bindEvent(el, event, fn) {
    if (el.addEventListener) {
        el.addEventListener(event, fn);
    } elseif (el.attachEvent) {
        el.attachEvent('on' + event, fn);
    } else {
        el['on' + event] = fn;
    }
}
 
bindEvent(document, 'click', function (e) {
    alert(e.target.nodeName);
});
 
 
 
/**
 * 2.异步加载方案
 * 常用的有ajax以及iframe，其中iframe使用已经越来越少
 */
//iframe通过改变src值可以实现异步加载
//ajax通过核心对象XMLHttpRequest可以实现异步加载
 
 
/**
 * 3.通过String的Prototype可以扩展string的方法
 */
String.prototype.trim = function () {
    return this.replace(/(^s*)|(s*$)/g, '');
};
 
/**
 * 4.如何扩展jq插件
 */
//通过jq的extend方法或直接扩展fn属性
//写法1：
$.fn.extend({
    plugin: function () {
        //通过jq获取到的元素可能有多个，所以使用each可以保证所有元素都实现
        this.each(function () {
            //do something
        });
   
        //返回this保证jq的链式调用
        return this;
    }
});
 
//跟写法1相同
$.fn.plugin = function () {
    this.each(function () {
         //do something
    });
 
    return this;
};

//使用方法：
$("body").plugin();

//写法2
 jQuery.extend({
    alert: function () {
        console.log(this);
    }
});

//写法2例子, 字符串去除头尾空格
jQuery.extend({
    trim: function (str) {
        return str.replace(/(^s*)|(s*$)/g, '');
    }
});


var str = "     i am facial    ";
str = $.trim(str);   //"i am facial"