2015阿里校园招聘前端在线测验题目
1、JavaScript有哪些方式能解决跨主域问题？
a. document.domain+iframe的设置
b. 动态创建script
c. 利用iframe和location.hash
d. window.name实现的跨域数据传输
e. 使用HTML5 postMessage
f. 利用flash
JavaScript跨域：处于安全方面的考虑，不允许跨域调用其它页面的对象。简单来说，由于JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.a.com域名下的对象 。

详见：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>
View HTML Code
//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);
    }
})();
View JavaScript Code
 

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>
View Code
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;
    }; 
View Code

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.");
View Code


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>
View HTML Code

 

11、个人的github地址 

 posted on 2014-09-01 16:16  sun_mile_rain  阅读(435)  评论(0)  编辑  收藏  举报