前端笔试题总结
1、异步执行函数
实现函数asyncEach，依次执行函数func1,func2,func3的异步控制
function func1(){
setTimeout(function(){console.log("func1")},Math.random()*1000)
}
function func2(){
setTimeout(function(){console.log("func2")},Math.random()*1000)
}
function func3(){
setTimeout(function(){console.log("func3")},Math.random()*1000)
}
asynEach(func1,func2,func3);
//输出结果:
func1
func2
func3
代码实现
var asyncGuid = 0, sto = window.setTimeout;
window.setTimeout = function(fn) {
sto(fn, asyncGuid++);
}
function asynEach() {
[].slice.call(arguments).forEach(function(v) {
setTimeout(v);
});
}
function func1(){
setTimeout(function(){console.log("func1")},Math.random()*1000)
}
function func2(){
setTimeout(function(){console.log("func2")},Math.random()*1000)
}
function func3(){
setTimeout(function(){console.log("func3")},Math.random()*1000)
}
asynEach(func1,func2,func3);
2、事件管理器
实现事件管理器EventManager，实现sub/pub机制，一个事件可以被多个订阅，每个订阅能依次收到事件消息，参考用例：
EventManager.register("event1",function(){
console.log("event1 triggerd");
})
EventManager.register("event1",function(){
console.log("event1_1 triggerd");
})
EventManager.register("event2",function(){
console.log("event2 triggerd");
})
EventManager.triggerd("event1");
EventManager.triggerd("event2");
//输出结果是：
event1 triggerd
event1_1 triggerd
event2 triggerd
3、对比字符串的差异
实现函数diff，对比两个字符串str1和str2的差异，并列出一行为单位的添删的改动项
str1="dbccdef";
str2="abcdefg";
输出str2相对str1的变动，位置计数从0开始：
0:modify:d:a
2:delete:c
7:add:g
4、红楼梦
给出一张包含100个词的词库列表word_list(字符串数组)，实现stat函数的统计《红楼梦》book_str(字符串)中出现的次数。
如果没有词库的情况下，查找使用频率最高的100个词，该怎么做？
5、在最新的chrome上实现如下需求，某些jsAPI想不起来可以用伪代码
原有HTML：
<button type="button" id="block">方块</button> <button type="button" id="circle">正圆</button> <script> //实现代码 </script>
需求：
实现一个画圆的类，方块类和正圆类继承画圆类。需要达到以下效果：
1）点击方块按钮，每在屏幕空白处点击鼠标，就在屏幕上生成一个100px的黑色方块，方块的中心坐标位于鼠标点击时候的坐标处，点击方块会console.log("Hello! I am block").
2) 点击正圆按钮，每在屏幕空白处点击鼠标，就在屏幕上生成一个100px的黑色正圆，正圆的中心坐标位于鼠标点击时候的坐标处，点击方块会console.log("Hello! I am circle"),再次点击会console.log("Goodby!")并以1秒的时间透明度渐变为0，然后消失。
6、利用原生的js实现一个事件绑定函数on,事件解绑函数off。方法原型描述如下
/**
*@desc 绑定事件处理函数，当handler为空时解锁
*@param (HTMLElement) target DOM元素
*@param (String) eventName 事件类型名
*@param (Function) handler 事件处理函数
**/
function on(target,eventName,handler){
//todo
}
/**
*@desc 解绑事件处理函数，当handler为空时解锁通过on绑定到同一元素同一事件类型的所有处理函数
*@param (HTMLElement) target DOM元素
*@param (String) eventName 事件类型名
*@param (Function) handler 事件处理函数
**/
function on(target,eventName,handler){
//todo
}
要求：
1>利用on给元素绑定事件时，要考虑调用on给同一个元素的相同事件类型绑定多个不同的事件处理函数，可能引起性能问题
2>给off()函数传递的handler为空时，要解绑之前通过on给元素绑定到同一事件类型的所有事件处理函数。
7、用原生的js实现对象的克隆
/*克隆对象*/
function concat(obj){
if(obj instanceof Object){
if(Object.create!=undefined){
return Object.create(obj); //html5规范中新增Object.create（）方法
}else{
var F = function(){
}
F.prototype = obj;
return new F();
}
}else{
return -1;
}
}
var A = {
"name":"zhangtaifeng",
"age":"21"
}
var B = concat(A);
/*************对象B的原型是A*************/
B.job = "qianduankaifa";
alert(B.name);
对象B通过concat方法克隆了一个对象A（）
