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.-]+).taobao.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.-]+).taobao.com([/w .-]*)*/?$/;
if(reg.exec(href)) {
return true;
} else {
return window.confirm("非本地站点,是否继续?");
}
};
}(href);
}
})();
(function() {
var b = document.body;
var reg = /^(https?://)?([da-z.-]+).taobao.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.-]+).taobao.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="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="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="80%;">
<table style="border-collapse:collapse;">
<tr>
<th style="border:1px solid black; 250px; height:40px;">我是标题一</th>
<th style="border:1px solid black; 90px; height:40px;">标题二</th>
<th style="border:1px solid black; 90px; height:40px;">三</th>
</tr>
<t>
<td style="border:1px solid black; 250px; height:40px;">内容</td>
<td style="border:1px solid black; 250px; height:40px;">内容</td>
<td style="border:1px solid black; 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="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="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="80%;">
<table style="border-collapse:collapse;">
<tr>
<th style="border:1px solid black; 250px; height:40px;">我是标题一</th>
<th style="border:1px solid black; 90px; height:40px;">标题二</th>
<th style="border:1px solid black; 90px; height:40px;">三</th>
</tr>
<t>
<td style="border:1px solid black; 250px; height:40px;">内容</td>
<td style="border:1px solid black; 250px; height:40px;">内容</td>
<td style="border:1px solid black; 250px; height:40px;">内容</td>
</tr>
</table>
</div>
</div>
</body>
</html>
11、个人的github地址