JS笔试题（3）【阿里巴巴】

 

1、请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：

 

var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0)? // 输出0

 

答案：

 

function parseQueryString(url){
	var result={};
	var params=url.split("?")[1].split("&");
	for(var i=0,length=params.length;i<length;i++){
		var temp=params[i].split("=");
		result[temp[0]]=temp[1];
	}
	return result;
}

 

2、请编写一个通用的事件注册函数（请看下面的代码）。
function addEvent(element, type, handler)
{
    // 在此输入你的代码，实现预定功能
}
答案：

 

function addEvent(element, type, handler){
    if (element.addEventListener) {
    	element.addEventListener(type,handler,false);
    }else if (element.attachEvent) {
    	element.attachEvent("on"+type,handler);
    }else{
    	element["on"+type]=handler;
    }
}

 

拓展：

 

①获取事件：
getEvent=function(event){
     return event ? event : window.event;
}
②获取Target
 getTarge=function(event){
        return event.target || event.srcElement;
    }
③阻止默认事件
preventDefault=function(event){ 
	if (event.preventDefault){ 
		event.preventDefault(); 
	} else { 
		event.returnValue = false; 
	}
}
④通用移除事件函数
removeHandler=function(element, type, handler){ 
	if (element.removeEventListener){ 
		element.removeEventListener(type, handler, false); 
	} else if (element.detachEvent){ 
		element.detachEvent("on" + type, handler); 
	} else { 
		element["on" + type] = null; 
	} 
}
⑤阻止冒泡：
stopPropagation=function(event){ 
	if (event.stopPropagation){ 
		event.stopPropagation(); 
	} else { 
		event.cancelBubble = true; 
	}
}

 

3、尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：

 

var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }   
    this.waitAndShout = function(){
        //隔五秒钟后执行上面的shout方法
    }
}

 

答案：

 

var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
		console.log(this.msg);
    }   
    this.waitAndShout = function(){
        //隔五秒钟后执行上面的shout方法
		var that=this;
		setTimeout(that.shout,5000);
    }
	return this;
}
var obj=Obj("woshimsg");
obj.waitAndShout();

 

4、下面是个输入框 
当没有获取焦点时，显示灰色的提示信息：  
当用户输入时，隐藏提示文字，且恢复为默认色：
当输入框失去焦点，如果输入为空，需还原提示信息：  
要求： 
a) 写出HTML和CSS代码 
b) 用JavaScript实现功能
答案：

 

CSS：#input{border: 1px solid #ccc;}
HTML：<input type="text" id="input" value="请输入内容">
JS：
window.onload=function(){
	var oInput=document.getElementById("input");
	var value=oInput.value;
	oInput.onfocus=function(){	
		this.value="";
	};
	oInput.onblur=function(){
		if (!this.value) {
			this.value=value;
		}
	};
}

 

5、请根据下面的描述，用JSON语法编写一个对象: “小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名小学老师。” 
var person = ?
答案：

 

var persion={
	name:"小明",
	age:22,
	from:"杭州",
	interests:["看电影","旅游"],
	sisters:[
		{
			name:"小芬",
			age:25,
			job:"护士"
		},
		{
			name:"小芳",
			age:23,
			job:"小学老师"
		}
	]
}

 

6、请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求：
alert(" taobao".trim());     // 输出 "taobao"
alert(" taobao ".trim());    // 输出 "taobao"
答案：

 

String.prototype.trim=function(){
	var reg=/^\s*([a-zA-Z]{1,})\s*$/;
	return this.match(reg)[1];
}
console.log("taobao ".trim());

 

说明：match（）匹配返回的数组中，第一项是原字符串，第二项是操作后的字符串；
7、请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
<div id=”example”>  
    <p class=”slogan”>淘！你喜欢</p>
</div>
答案：

 

window.onload=function(){
	var Div=document.createElement("div");
	Div.setAttribute("id","example");
	var P=document.createElement("p");
	P.className="slogan";
	P.innerHTML="淘！你喜欢";
	Div.appendChild(P);
	document.body.appendChild(Div);
}

 

说明：要注意现将所有要添加的都添加到一个代码片中，最后一次性再添加到body中
createElement（）：创建节点
setAttribute（）：设置属性
appendChild（）：添加子节点
8、根据下图，编写HTML结构。要求：符合xHTML 1.0规范。
图片
答案：

 

<table border="1" cellspacing="0">
	<tbody>
		<tr align="center">
			<td>国家</td>
			<td>网站名</td>
			<td>URL</td>
			<td>Alexa排名</td>
		</tr>
		<tr align="center">
			<td>中国</td>
			<td>淘宝网</td>
			<td>www.taobao.com</td>
			<td>38</td>
		</tr>
		<tr align="center">
			<td rowspan="2">美国</td>
			<td>Ebay</td>
			<td>www.Ebay.com</td>
			<td>22</td>
		</tr>
		<tr align="center">
			<td>Amazon</td>
			<td>www.Amazon.com</td>
			<td>27</td>
		</tr>
		<tr>
			<td colspan="4" align="right">Alexa提供数据</td>
		</tr>
	</tbody>
</table>

 

9、请说明下面各种情况的执行结果，并注明产生对应结果的理由。
function doSomething() {
    alert(this);
}
① element.onclick = doSomething，点击element元素后。 
 ② element.onclick = function() {doSomething()}， 点击element元素后。 
 ③ 直接执行doSomething()。
答案：
①弹出element对象，通过函数赋值方式，this直接指向element对象
②弹出window对象，this是写在doSomething这个函数里面的，而函数的this和谁调用它有关。如果没有对象调用它，那么this是window
③刷新页面弹出window，没有绑定对象的情况下this默认指向window
10、请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。
答案：
HTML注释<!-- -->
JavaScript注释单行//多行/**/
CSS注释/**/
Java注释单行//多行/**/
PHP注释单行//多行/**/
Python注释#
11、阅读以下JavaScript代码：

 

if (window.addEventListener) {
	var addListener = function(el, type, listener, useCapture) {
		el.addEventListener(type, listener, useCapture);
	};
} else if (document.all) {
	addListener = function(el, type, listener) {
		el.attachEvent("on" + type, function() {
			listener.apply(el);
		});
	};
}

 

请阐述 ：
a) 代码的功能; 
b) 代码的优点和缺点; 
c) listener.apply(el) 在此处的作用; 
d) 如果有可改进之处，请给出改进后的代码，并说明理由。
答案：
a）给组件注册事件
b）优点：兼容了IE和W3C；缺点：第二个条件下应该声明var，否则就会变成全局函数
c）作用：绑定listener的作用域为el
d）

 

var addListener = function(el, type, listener, useCapture) {
	if (window.addEventListener) {
		el.addEventListener(type, listener, useCapture);
	}else if (document.all) {
		el.attachEvent("on" + type, function() {
			listener.apply(el);
		});
	}else{
		el["on"+type]=listener;
	}
};

 

12、

 

<div class='mod-spm' data-spmid='123'>
    <div class='child_a'></div>
    <div class='child_b'></div>
    <div class='child_c'></div>
    <div class='child_d'></div>
</div>
<div class='mod-spm' data-spmid='456'>
    <div class='child_a'></div>
    <div class='child_b'></div>
    <div class='child_c'></div>
    <div class='child_d'></div>
</div>
<div class='mod-spm' data-spmid='789'>
    <div class='child_a'></div>
    <div class='child_b'></div>
    <div class='child_c'></div>
    <div class='child_d'></div>
</div>

 

有dom结构如上,请用原生代码（禁用jQuery作答）实现以下功能：
 (a)计算鼠标在mod-spm区域内的停留时长，data-spm不同视为不同区域
 (b)尽量减少性能损耗 
 (c)重复进入计时累加
答案：