2014阿里巴巴前端在线笔试题及自己所做解答
2014-04-25 14:31
399 查看
前时间参加了阿里巴巴的在线笔试，100分钟10题，现在讲题目和自己的解答贴出来，大家一起讨论讨论。
1.
我的解答：
我的解答：输出值“goodbye Jack”，因为javascript里面变量声明提前，所以局部变量name声明提前，但是赋值在后面，所以typeof为undefined。
3.
我的解答：
我的解答：
我的解答：
我的解答：
解答：
解答：
解答：前端工程化就是在前端开发过程中，使用一些集成的项目，尽量让前端代码得到可复用性和模块化
前端工程化在近几年有了飞速的发展，实现工程化的关键在于seajs，是淘宝前端玉伯的结果，这是一个令广大前端欣喜的项目。
在我的项目开发过程中jQuery Bootstrap都发挥过巨大作用。
当然前端工程化也会带来页面性能方面的影响，模块化打包部署也会带来极大的不方便。
可以优化的环节：优化浏览器兼容性问题；优化页面效果的制作，使代码更加优雅；优化后期模块化管理
10.
解答：1.先将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替
<img src="images/placeholder.png" lazy-src="images/realimg.jpg" />
2.页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当
图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。
3.当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。
4.当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。
上面有些题目也是考试结束后我上网查找以及和同学讨论得出的，不值大家还有没有更合适的解答，或者我有出错的地方，希望能留言和我讨论，大家一起学习。
1.
我的解答：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tab切换效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.tab1 {
width: 401px;
border-top: #ccc solid 1px;
border-bottom: #cccccc solid 1px;
margin: 50px auto 0 auto;
}
.menu {
height: 28px;
border-right: #ccc solid 1px;
font-size: 14px;
}
.menu li {
float: left;
width: 99px;
text-align: center;
line-height: 28px;
height: 28px;
cursor: pointer;
border-left: #ccc solid 1px;
border-bottom: #ccc solid 1px;
color: #666;
overflow: hidden;
background: #E0E2EB;
}
.menu li.off {
background: #fff;
color: #336699;
font-weight: bold;
border-bottom: none;
}
.menudiv {
height: 200px;
border-left: #cccccc solid 1px;
border-right: #cccccc solid 1px;
border-top: 0;
background: #fefefe
}
.menudiv div {
padding: 15px;
line-height: 28px;
}
</style>
<script>
var cursel_0;
function setTab(name, cursel) {
cursel_0 = cursel;
for (var i = 1; i <= 3; i++) {
var menu = document.getElementById(name + i);
var menudiv = document.getElementById("con_" + name + "_" + i);
if (i == cursel) {
menu.className = "off";
menudiv.style.display = "block";
document.cookie="tab="+i;
}
else {
menu.className = "";
menudiv.style.display = "none";
}
}
}
window.onload = function() {
var cookiestr=document.cookie;
if(cookiestr == ""){
setTab('one', 1);
}else{
var tabdata=cookiestr.split("=");
var index=tabdata[1];
setTab('one', index);
}
}
</script>
</head>
<body>
<!-- tab标签代码begin -->
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)" onmouseover="setTab('one',1)">Tab1</li>
<li id="one2" onclick="setTab('one',2)" onmouseover="setTab('one',2)">Tab2</li>
<li id="one3" onclick="setTab('one',3)" onmouseover="setTab('one',3)">Tab3</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">内容1</div>
<div id="con_one_2" style="display:none;">内容2</div>
<div id="con_one_3" style="display:none;">内容3</div>
</div>
</div>
<!-- tab标签代码end -->
</body>
</html>2.我的解答：输出值“goodbye Jack”，因为javascript里面变量声明提前，所以局部变量name声明提前，但是赋值在后面，所以typeof为undefined。
3.
我的解答：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.tips{
border:solid 1px #99FFCC;
height:30px;
line-height:30px;
width:250px;
text-align:center;
}
.tipspan{
color:#00C;
}
</style>
<body>
<div class="tips" id="tips">
商铺装修新功能上线！<span class="tipspan" onclick="tipsClick();">我知道了</span>
</div>
</body>
</html>
<script type="text/javascript">
function tipsClick(){
var tips=document.getElementById("tips");
tips.style.display="none";
var mydate=new Date();
var year=mydate.getFullYear();
var month=mydate.getMonth();
var day=mydate.getDate();
var newday=day+1;
var mynewdate=new Date(year,month,newday,0,0,0);
document.cookie="known=yes;expire="+mynewdate.toGMTString();
}
function hasclick(){
var tips=document.getElementById("tips");
var strCookie=document.cookie;
var arrCookie=strCookie.split(";");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if("known" == arr[0]){
tips.style.display="none";
break;
}
}
}
window.onload=hasclick();
</script>4.我的解答：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script language="javascript">
function len(str){
var l=0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>255)
l+=2;
else
l++;
}
return l;
}
function countChar(textareaName,spanName1,spanName2)
{
var textvalue=document.getElementById(textareaName).value;
var txetlen=len(textvalue);
document.getElementById(spanName2).innerHTML = txetlen;
document.getElementById(spanName1).innerHTML = 30 - txetlen;
}
</script>
</head>
<body>
<textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter","hasinput");' onkeyup='countChar("status","counter","hasinput");'></textarea>
长度为：<span id="hasinput">30</span>不超过30
还可以可以输入<span id="counter">30</span>字<br/>
</body>
</html>5.我的解答：
function intercept(object, check) {
Object.getOwnPropertyNames(object).forEach(function (property) {
var original = object[property];
if (typeof original === 'function' && property.substr(0, 4) === "post") {
if (check) {
original.call(object, property);
}
}
});
}6.我的解答：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
table{
border:solid #03C 1px;
padding:0;
margin:0;
border-collapse:collapse;
}
table td{
border-bottom:solid #03C 1px;
border-left:solid #03C 1px;
padding:0;
margin:0;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
function compare(x,y){
if(x["name"]>y["name"]) return 1;
if(x["name"]==y["name"]) return 0;
if(x["name"]<y["name"]) return -1;
}
var data=[
{name : 'taobao',
telphone : 'somenumber',
address : 'someplace',
intro : 'somewords'
},
{name : 'alibaba',
telphone : 'somenumber',
address : 'someplace',
intro : 'somewords'
}
];
var newdata=data.sort(compare);
document.write("<table boeder='1px'><caption>data</caption>");
document.write("<tr>");
for(var m in newdata[0]){
document.write("<td>"+m+"</td>");
}
document.write("</tr>");
for(var i in newdata){
document.write("<tr>");
for(var j in newdata[i]){
document.write("<td>"+newdata[i][j]+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</html>7.解答：
<script type="text/javascript">
function parseQueryString(url){
var params = {};
var lab1=url.indexOf(":",0);
var scheme=url.substring(0,lab1);
var slash=url.substr(lab1+1,2);
lab2=lab1+3;
var lab3=url.indexOf(":",lab2);
var host=url.substring(lab2,lab3);
var lab4=url.indexOf("/",lab3);
var port=url.substring(lab3+1,lab4);
var lab5=url.indexOf("?",lab4);
var path=url.substring(lab4,lab5);
var lab6=url.indexOf("#",lab5);
var query=url.substring(lab5+1,lab6);
var hash=url.substring(lab6+1,url.lengt);
params["scheme"]=scheme;
params["slash"]=slash;
params["host"]=host;
params["port"]=port;
params["path"]=path;
params["query"]=query;
params["hash"]=hash;
return params;
}
var url = "http://localhost:80801/search1?q=1s#filter1";
var ps = parseQueryString(url);
for(var i in ps){
document.write(i+":"+ps[i]+"<br>");
}
</script>8.解答：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评分展示</title>
<style type="text/css">
.vote-star{
display:inline-block;
margin-right:6px;
width:85px;
height:17px;
overflow:hidden;
vertical-align:middle;
background:url(star.gif) repeat-x 0 -17px;
}
.vote-star i{
display:inline-block;
height:17px;
background:url(star.gif) repeat-x 0 0;}
</style>
</head>
<body>
<!--
星级评分使用方法：
<span class="vote-star"><i style="width:40%"></i></span>
通过调节i的width，来显示不同的评分，100%代表5分，40%代表2分，10%代表0.5分
-->
<div class="star">
<span class="vote-star"><i style="width:40%"></i></span>
<br /><br />
<span class="vote-star"><i style="width:70%"></i></span>
</div>
</body>
</html>9.解答：前端工程化就是在前端开发过程中，使用一些集成的项目，尽量让前端代码得到可复用性和模块化
前端工程化在近几年有了飞速的发展，实现工程化的关键在于seajs，是淘宝前端玉伯的结果，这是一个令广大前端欣喜的项目。
在我的项目开发过程中jQuery Bootstrap都发挥过巨大作用。
当然前端工程化也会带来页面性能方面的影响，模块化打包部署也会带来极大的不方便。
可以优化的环节：优化浏览器兼容性问题；优化页面效果的制作，使代码更加优雅；优化后期模块化管理
10.
解答：1.先将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替
<img src="images/placeholder.png" lazy-src="images/realimg.jpg" />
2.页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当
图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。
3.当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。
4.当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。
上面有些题目也是考试结束后我上网查找以及和同学讨论得出的，不值大家还有没有更合适的解答，或者我有出错的地方，希望能留言和我讨论，大家一起学习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 几个DataSet数据导出到XML Word Excel TXT HTML的函数
- js中获得当前时间是年份和月份
- 常用控件js示例
- 假如没有人再用IE6，谁会很开心，不过我先报名了
- node.js v0.10.26 下 express4.0.0 安装
- JQuery 知识点
- html 5 input标签的属性
- Remove Nth Node From End of List
- JSP web.xml <jsp-config>标签使用详解
- 实用技巧：使用 jQuery 异步加载 JavaScript 脚本
- extjs grid滚动条问题
- 8个惊艳的 HTML5 和 JavaScript 特效
- 35个让人惊讶的 CSS3 动画效果演示
- SharedPreferences
- CSS 特殊选择符
- css常见问题小结
- jQuery 插件开发——GridData（表格）
- jquery $(document).ready() 与window.onload的区别
- 用js实现css3效果的圆角方法
- Javascript 检查字符串是否是数字的几种方法