阿里巴巴 2015 暑期实习前端笔试题

摘要：前言上周二在阿里暑期实习的前端笔试那里打了个酱油。当不存在时，将会创建它。要求单击该元素后，提示用户用户名不能为空。要求内边框宽度为，无外边框。要求在前端实现一个根据一批员工，通过查询员工信息的功能。其实是考察的内容。

上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础，但如果之前没有专门写过类似的东西，现想现写的话，一个小时压力还是有些大的（当然了，大神除外）。
下面把题目分享给大家，欢迎大家一起探讨交流，共同进步。
我做了一些，后面的大题肯定有没写完的。稍晚些贴上来吧。

  
下列符合规范的 AMD 模块 ID 有？（单选）

  【A】../../foo/Boo/WoO;

  【B】foo/boo/Woo;

  【C】./foo/boo/woo;

  【D】foo/boo/woo.js;

不知道 AMD 是神马（我的第一反应怎么是做 CPU 和显卡的那个），当时也没仔细谷歌。。看着顺眼随便选了个 【C】
后来找了找，...

  
以下说法正确的有：（单选）

  【A】HTML5 规范中不建议在一个页面中使用多个 h1;

  【B】table 标签是过时的，不建议使用；

  【C】Ajax 请求不可能阻塞 UI 线程；

  【D】在网页首次加载的时候，visibility 值为 hidden 的图片还是会被浏览器请求

应该是D吧。。

javascriptvar a = 0;
function A(){
    this.a = 1; 
    setTimeout(function(){
        this.a = 2;
        try{
            this.b="b";
            throw "";
        }
        catch(e){
            this.b="bb";
        }
    },0);
    this.b="bbb";
}

var aa = new A();

setTimeout(function(){
    console.log(aa.a);
    console.log(window.a);
    console.log(aa.b);
    console.log(window.b)
},0);

  
下面的说法哪些是正确的：

javascriptfunction foo(x){
    x = x || 1;
    console.log(x);
}
foo(2);

javascriptx=1;
if(x===true){
    console.log("Yes");
}
else{
    console.log("No");
}

javascriptvar obj1 = {x:1},
    obj2 = {x:2};
(function(obj2){
    delete obj2.x
})(obj1);
console.log(obj1.x, obj2.x);

javascriptvar x = 1;
setTimeout(function(){
    x = 2;
},0)
console.log(x);

  
下列哪些 web 安全措施用于防御 csrf 攻击：

  【A】http 响应添加 Content-Security-Policy 头部

  【B】表单提交时需带上 token 并在服务器端校验通过才行

  【C】前端对用户输入的内容进行编码

  【D】每次请求的 token 最好都不一样

  【E】禁用 OPTIONS 方法

javascriptvar obj = {
    "1":"a",
    "2":"b",
    "length":2,
    push:Array.prototype.push
}
obj.push("c");

  
浏览器执行以上脚本后，说法正确的是：

  【A】obj 的 length 属性会变为 3;

  【B】obj 的 length 属性不会变;

  【C】obj3 的值是 c;

  【D】obj1 和 2 的值不会发生变化;

  【E】obj2 的值是 c;

  【F】obj3 的值是 undefined;

javascriptfunction ObservedArrayPush() {
  var n = TO_UINT32(this.length);
  var m = %_ArgumentsLength();

  try {
    BeginPerformSplice(this);
    for (var i = 0; i < m; i++) {
      this[i+n] = %_Arguments(i);
    }
    var new_length = n + m;
    this.length = new_length;
  } finally {
    EndPerformSplice(this);
    EnqueueSpliceRecord(this, n, [], m);
  }

  return new_length;
}

// Appends the arguments to the end of the array and returns the new
// length of the array. See ECMA-262, section 15.4.4.7.
function ArrayPush() {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.push");

  if (%IsObserved(this))
    return ObservedArrayPush.apply(this, arguments);

  var array = TO_OBJECT_INLINE(this);
  var n = TO_UINT32(array.length);
  var m = %_ArgumentsLength();

  for (var i = 0; i < m; i++) {
    array[i+n] = %_Arguments(i);
  }

  var new_length = n + m;
  array.length = new_length;
  return new_length;
}

  
push 方法把值添加到数组中。

  push 方法有意具有通用性。该方法和 call() 或 apply() 一起使用时，可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值，则插入的元素索引为 0，包括 length 不存在时。当 length 不存在时，将会创建它。

  唯一的原生类数组（array-like）对象是 Strings，尽管如此，它们并不适用该方法，因为字符串是不可改变的。

  当调用该方法时，新的 length 属性值将被返回。

  
输入你的github、技术博客或微博的网址：

  
不借助第三方库，请编码完成:给一个超链接元素绑定一个鼠标单击的事件。要求单击该元素后，提示用户“用户名不能为空”。注意：请尽可能兼容给多的浏览器

html我是一个超链接

javascriptvar a = document.getElementById("hyper"),
    handler =function(e){
        alert("用户名不能为空");
    }
if (window.addEventListener){
    a.addEventListener("click",handler,false);
}
else if(window.attachEvent){
    a.attachEvent("onclick",handler);
}
else{
    a["onclick"]=handler;
}

  
请使用至少两种方案实现左中右三栏布局，左栏固定宽度 100px，右栏固定宽度 100px，中栏宽度不固定，三栏宽度加起来正好是 100%。

  
使用 HTML、CSS 代码实现一个九宫格的页面布局。要求内边框宽度为 1px，无外边框。

  
请你使用多种方式实现一个 IOS 样式的开关

  
用 JS 来实现一个函数，用来判断一个字符串中出现次数最多的字符，并统计出这个次数

javascript
function judge(str){
    var arr = str.toLowerCase().split("");
    arr.sort();
    var pre = "";
    var max = 1;
    var num = 1;
    var most = "";
    arr.forEach(function(item,index,arr){
        if (index === 0){
            pre = item;
        }
        else{
            if (item === pre){
                num++;
                if (max<=num){
                    max = num;
                    most = item;
                }
            }
            else{
                num = 1;
            }
            pre = item;
        }
    });
    console.log("最多的字符为:" + most +";次数为：" + max);
}

//judge("addqbcabceddqeeffjjjqqqq");

  
给定一个http接口，传入一个员工id，返回员工的详细信息，接口形式为 http://localhost/query?id=。要求在前端实现一个根据一批员工id，通过 ajax 查询员工信息的功能。

html
Here is the data

javascript
var btn = document.getElementById("btn");
btn.onclick = function(){
    var idList=[1,2,3,4,5,6,7,8,9,10],
        ul = document.createElement("ul");
    idList.forEach(function(index,item,array){
        if (XMLHttpRequest){//IE7 之前会不存在的
            var xhr = new XMLHttpRequest(),
                url = "http://localhost:3030/query?id=" + item;
            xhr.open("get", url, true);
            xhr.onreadystatechange = function(){
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    if (xhr.readyState == 4 ){
                        ul.innerHTML += "
" + item + ":" + xhr.responseText +"
";
                    }
                }
                else{
                    console.log("error");
                    console.log(xhr.status);
                }
            };
            xhr.send(null);
        }
    });
    document.getElementById("data").appendChild(ul);
}

javascriptvar express = require("express");
var app = express();

app.get("/query",function(req,res){
  var url = req.url;
  var id = url.substring(url.indexOf("=")+1);
  res.send(id);
});
app.use(express.static(__dirname));
app.listen(3030);