2015阿里校园招聘前端在线测验题目
1、JavaScript有哪些方式能解决跨主域问题？
a. document.domain+iframe的设置JavaScript跨域：处于安全方面的考虑，不允许跨域调用其它页面的对象。简单来说，由于JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.a.com域名下的对象 。
b. 动态创建script
c. 利用iframe和location.hash
d. window.name实现的跨域数据传输
e. 使用HTML5 postMessagef. 利用flash
详见：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
2、以下关于Nodejs的说法, 正确的是（ACD）
A: Nodejs是一个Javascript运行环境, 基于chrome V8引擎进行代码解析B: Nodejs自身不是单线程的, 但我们的js代码是在单线程的环境中执行C: 可以使用uncaughtException或者Domain捕获异常, 其中uncaughtException可以保持上下文D: Nodejs高并发特性使其适合I/O密集型的应用
3、关于HTTP返回码的说法，下面哪些是错误的？（AB）
A: 302代表服务器端网页未修改过，客户端可从浏览器缓存中获取内容B: 404代表资源虽然存在，但运行出错C: 503为服务器负载过高不能响应请求D: 传送数据过大可能导致413（请求实体过大）的错误
4.1
说说nodejs的异步I/O是什么。
4.2 面对复杂的业务需求，多次回调的node代码场景，你有什么看法？如何让代码更好阅读和维护。
5、你使用NodeJS编写了一个博客程序并把它部署到了一台linux服务器上，如何确保服务安全稳定地可持续运行呢？（必要部分可以附上代码、命令等）
6、淘宝首页需要实现这样一个功能，对于页面上非taobao.com域名下的链接，在用户点击时，需要在链接处弹出提示框，提示用户此链接非淘宝域名下的链接，并给与用户选择是否继续访问。如果用户确认继续访问，则在新窗口打开链接。请写出对应的代码。
<!
DOCTYPE html
>
< html >
< head >
< meta charset ="utf-8" ></ meta >
< title ></ title >
</ head >
< body >
< a href ="http://www.taobao.com" >taobao.com </ a >
< a href ="http://m.taobao.com" >taobao.com </ a >
< a href ="http://www.baidu.com" >baidu.com </ a >
< script type ="text/javascript" src ="link.js" ></ script >
</ body >
</ html >
< html >
< head >
< meta charset ="utf-8" ></ meta >
< title ></ title >
</ head >
< body >
< a href ="http://www.taobao.com" >taobao.com </ a >
< a href ="http://m.taobao.com" >taobao.com </ a >
< a href ="http://www.baidu.com" >baidu.com </ a >
< script type ="text/javascript" src ="link.js" ></ script >
</ body >
</ html >
//
Method 1 对事件进行处理。这样做的好处是避免了对每一个a标签进行逐个绑定，节省了时间开销，另外代码更简洁。
( function() {
var b = document.body;
var reg = /^(https?:\/\/)?([\da-z\.-]+)\.\btaobao\b\.com([\/\w \.-]*)*\/?$/;
function doClick(event) {
if (event.target.tagName == 'A') {
event.preventDefault();
var href = event.target.href;
if (reg.exec(href)) {
location.href = href;
} else {
if (window.confirm("非本地站点，是否继续？")) {
location.href = href;
}
}
}
}
b.onclick = doClick;
})();
// Method 2
( function() {
var hrefs = document.getElementsByTagName('a');
for( var i=0; i <hrefs.length; i++) {
var href = hrefs[i].getAttribute("href");
hrefs[i].onclick = function(href) {
return function() {
var reg = /^(https?:\/\/)?([\da-z\.-]+)\.\btaobao\b\.com([\/\w \.-]*)*\/?$/;
if(reg.exec(href)) {
return true;
} else {
return window.confirm("非本地站点，是否继续？");
}
};
}(href);
}
})();
( function() {
var b = document.body;
var reg = /^(https?:\/\/)?([\da-z\.-]+)\.\btaobao\b\.com([\/\w \.-]*)*\/?$/;
function doClick(event) {
if (event.target.tagName == 'A') {
event.preventDefault();
var href = event.target.href;
if (reg.exec(href)) {
location.href = href;
} else {
if (window.confirm("非本地站点，是否继续？")) {
location.href = href;
}
}
}
}
b.onclick = doClick;
})();
// Method 2
( function() {
var hrefs = document.getElementsByTagName('a');
for( var i=0; i <hrefs.length; i++) {
var href = hrefs[i].getAttribute("href");
hrefs[i].onclick = function(href) {
return function() {
var reg = /^(https?:\/\/)?([\da-z\.-]+)\.\btaobao\b\.com([\/\w \.-]*)*\/?$/;
if(reg.exec(href)) {
return true;
} else {
return window.confirm("非本地站点，是否继续？");
}
};
}(href);
}
})();
7、编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
/**
* @param selector {String} 传入的CSS选择器。
* @return {Array}
*/
var query = function(selector){
//返回查找到的节点数组
return [];
}
<!
DOCTYPE html
>
< html >
< head >
< title ></ title >
</ head >
< body >
< div class ="test" name ="a" ></ div >
< div class ="test" name ="b" ></ div >
< div class ="test" name ="c" ></ div >
< div class ="test" name ="d" ></ div >
< div class ="test" name ="e" ></ div >
< script type ="text/javascript" >
var query = function(selector) {
var reg_id = /^#[\w]+/;
var reg_class = /^\.[\w]+/;
var elems;
if (document.querySelectorAll) {
return document.querySelectorAll(selector);
}
if (reg_id.test(selector)) {
elems = document.getElementById(selector.slice(1));
} else if (reg_class.test(selector)) {
elems = getElementsByClassName(selector.slice(1));
} else {
elems = document.getElementsByTagName(selector);
}
return elems;
};
function getElementsByClassName(className) {
var arr = document.getElementsByTagName("*"),
result;
for ( var i = 0, len = arr.length; i < len; i++) {
if (arr[i].className.indexOf(className) != -1) {
result.push(arr[i]);
}
}
return result;
}
console.log(query(".test"));
</ script >
</ body >
</ html >
< html >
< head >
< title ></ title >
</ head >
< body >
< div class ="test" name ="a" ></ div >
< div class ="test" name ="b" ></ div >
< div class ="test" name ="c" ></ div >
< div class ="test" name ="d" ></ div >
< div class ="test" name ="e" ></ div >
< script type ="text/javascript" >
var query = function(selector) {
var reg_id = /^#[\w]+/;
var reg_class = /^\.[\w]+/;
var elems;
if (document.querySelectorAll) {
return document.querySelectorAll(selector);
}
if (reg_id.test(selector)) {
elems = document.getElementById(selector.slice(1));
} else if (reg_class.test(selector)) {
elems = getElementsByClassName(selector.slice(1));
} else {
elems = document.getElementsByTagName(selector);
}
return elems;
};
function getElementsByClassName(className) {
var arr = document.getElementsByTagName("*"),
result;
for ( var i = 0, len = arr.length; i < len; i++) {
if (arr[i].className.indexOf(className) != -1) {
result.push(arr[i]);
}
}
return result;
}
console.log(query(".test"));
</ script >
</ body >
</ html >
var query =
function(selector) {
var rId = /^#/;
var rCls = /^\./;
// 标准浏览器
if (window.addEventListener) {
return document.querySelectorAll(selector);
}
// IE
if (rId.test(selector)) {
return document.getElementById(selector.slice(1));
}
if (rCls.test(selector)) {
return getElementsByClass(selector.slice(1));
}
return document.getELementsByTagName(selector);
};
var getElementsByClass = function(searchClass, node, tag) {
var classElements = new Array();
if (node == null)
node = document;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
console.log( true);classElements[j] = els[i];
j++;
}
}
return classElements;
};
var rId = /^#/;
var rCls = /^\./;
// 标准浏览器
if (window.addEventListener) {
return document.querySelectorAll(selector);
}
// IE
if (rId.test(selector)) {
return document.getElementById(selector.slice(1));
}
if (rCls.test(selector)) {
return getElementsByClass(selector.slice(1));
}
return document.getELementsByTagName(selector);
};
var getElementsByClass = function(searchClass, node, tag) {
var classElements = new Array();
if (node == null)
node = document;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
console.log( true);classElements[j] = els[i];
j++;
}
}
return classElements;
};
8、一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. CSS Sprites：将一个网页中涉及的零星图片，整合到一张大图中，然后利用CSS技术展现出来。这样一来，减少了整个页面图片的大小，并且能减少网页http请求次数，从而大大地提高网页的性能。
b. 压缩图片
c. 功能图片优先加载
d. 图片格式优化（JPEG，GIF，和PNG）：对于产品图片质量要求极高，使用JPEG格式，用GIF做动画或是装饰性小图，PNG同时也擅长处理简单地装饰图而只需很小的体积
9、使用 JavaScript 的 Promise 模式实现延迟3秒输出
//
先封装一个返回promise的函数
var Promise = function () {
};
Promise.prototype.then = function (onResolved, onRejected) {
this.onResolved = onResolved;
this.onRejected = onRejected;
return this;
};
Promise.prototype.resolve = function (value) {
this.onResolved(value);
return this;
};
Promise.prototype.reject = function (error) {
this.onRejected(error);
return this;
};
new Promise().then( function(value) {
setTimeout( function() {
console.log(value);
}, 3000);
}, function(error) {
alert("error");
}).resolve("3 sec output.");
var Promise = function () {
};
Promise.prototype.then = function (onResolved, onRejected) {
this.onResolved = onResolved;
this.onRejected = onRejected;
return this;
};
Promise.prototype.resolve = function (value) {
this.onResolved(value);
return this;
};
Promise.prototype.reject = function (error) {
this.onRejected(error);
return this;
};
new Promise().then( function(value) {
setTimeout( function() {
console.log(value);
}, 3000);
}, function(error) {
alert("error");
}).resolve("3 sec output.");
10、实现一个页面
<!
DOCTYPE html
>
< html >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
</ head >
< body style ="width:960px; margin: 20px auto;" >
< div id ="nav" style ="height: 80px;text-align: center;font-size: 3em;border-bottom: solid #DDDDDD;" >阿里巴巴面试题 </ div >
< div id = "Content" >
< div id = "sidebar" style ="width:20%; float: left;" >
< ul >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >前端工程师面试题 </ a ></ li >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >设计师面试题 </ a ></ li >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >java面试题 </ a ></ li >
</ ul >
</ div >
< div id = "main" style ="width:80%;" >
< table style ="border-collapse:collapse;" >
< tr >
< th style ="border:1px solid black; width:250px; height:40px;" >我是标题一 </ th >
< th style ="border:1px solid black; width:90px; height:40px;" >标题二 </ th >
< th style ="border:1px solid black; width:90px; height:40px;" >三 </ th >
</ tr >
< t >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
</ tr >
</ table >
</ div >
</ div >
</ body >
</ html >
< html >
< head >
< title ></ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
</ head >
< body style ="width:960px; margin: 20px auto;" >
< div id ="nav" style ="height: 80px;text-align: center;font-size: 3em;border-bottom: solid #DDDDDD;" >阿里巴巴面试题 </ div >
< div id = "Content" >
< div id = "sidebar" style ="width:20%; float: left;" >
< ul >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >前端工程师面试题 </ a ></ li >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >设计师面试题 </ a ></ li >
< li style ="list-style: none;" >< a href ="" style ="text-decoration: none;" >java面试题 </ a ></ li >
</ ul >
</ div >
< div id = "main" style ="width:80%;" >
< table style ="border-collapse:collapse;" >
< tr >
< th style ="border:1px solid black; width:250px; height:40px;" >我是标题一 </ th >
< th style ="border:1px solid black; width:90px; height:40px;" >标题二 </ th >
< th style ="border:1px solid black; width:90px; height:40px;" >三 </ th >
</ tr >
< t >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
< td style ="border:1px solid black; width:250px; height:40px;" >内容 </ td >
</ tr >
</ table >
</ div >
</ div >
</ body >
</ html >
11、个人的github地址