前端考核题目（答案附后）
2016-08-29 本文已影响0人
那只是一股逆流
1.实现三栏布局，两边栏位宽度固定，中间栏宽度随浏览器而改变
2.解释一下css选择器的权级 (#id div p > .class id p)
3.使用正则匹配出学号中的年级与学院编号 年级(2014)学院(214)021
4.解释一下jsonp跨域的原理 (可以给出前后端具体实现)
5.实现一个(圆形带指针)计时表 (带动画效果)
6.封装一个ajax类 (它可以被下面这样使用)
ajax.get('url', {data: '11'}, function (res) {
// callback
})
ajax.post('url', {data: '11'}, function (res) {
// callback
})
7.实现一个数组的sort方法(可以传入一个函数来改变sort方法的排序规则)
[1, 2, 3].sort(function (v1, v2) {
return v2 - v1;
}) // 3 2 1
[{val: 1}, {val: 44}, {val: -1}].sort(function (v1, v2) {
return v1.val - v2-val;
}) // [{val: -1}, {val: 1}, {val: 44}]
8.实现一个sum函数, 能够将一个数组求和(数组里面还可以包含数组)
var res = sum([1, 2, [2, 4, 4, [1]]]);
// res 14
9.ES6中新规范的解决异步的一个方案Promise, 解决了嵌套回调的问题。它的使用方式大概如下。
请使用我们现有的方法来实现一个Promise类
var p = new Promise(function (resolve, rej) {
$.get('xx', function (res) {
resolve(res);
});
});
p.then(function (res) { // JSON {"name": "Y"}
return JSON.parse(res);
}).then(function (obj) { // Object "name: "Y"}
return obj.name
}).then(function (name) { // String "Y"
console.log(name); // Y
}).then(function (data) { // undefined
});
10.使用node创建一个服务器并监听在1122端口
1.实现三栏布局，两边栏位宽度固定，中间栏宽度随浏览器而改变
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
width: 100%;
display: flex;
height: 400px;
}
.box1, .box3 {
width: 100px;
background: red;
}
.box2 {
background: blue;
flex: 1
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.解释一下css选择器的权级 (#id div p > .class id p)
!important > style > id > class > tag > [name='hahaha']
3.使用正则匹配出学号中的年级与学院编号 年级(2014)学院(214)021
var stuId = '2014215033';
var stuIdExp = /^(\d{4})(\d{3})\d{3}$/;
console.log(stuId.match(stuIdExp));
4.解释一下jsonp跨域的原理 (可以给出前后端具体实现)
jsonp依靠script标签的性质进行跨域
前端原理：前端向后端发送一个script的src请求 url里面带上GET参数 (主要是一个回调函数的名称，后端需要根据这个名称来进行数据返回)
function jsonp () {
var el = document.createElement('script');
el.src = 'xxxx/xxx.com/jsonp?callback=jsonpCallback';
document.body.appendChild(el);
}
function jsonpCallback (data) {
console.log(data);
}
后端原理: 后端接受到该请求 获取到GET参数中约定好的callback参数
callback=jsonpCallback
php示例：
$name = $_GET['callback'];
$data = array(1, 2, 3);
$data = json_encode($data);
echo "$name($data)";
随后前端接受到echo内容并执行 就拿到了上述$data变量的数据
5.实现一个(圆形带指针)计时表 (带动画效果)
css3 transfrom
canvas
6.封装一个ajax类
var ajax = (function () {
function a (conf) {
var url = conf.url,
data = conf.data,
method = conf.method,
callback = conf.callback;
var xhr = new XMLHttpRequest();
xhr.open(
method,
method.toUpperCase() === 'GET' ? url + '?' + parseData(data) : url,
true
);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(method.toUpperCase() === 'POST' ? parseData(data) : null);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status <= 304) {
callback(xhr.responseText);
}
}
}
function parseData (data) {
var str = '';
for (var key in data) {
str += key + '=' + data[key] + '&';
}
return str.slice(0, -1);
}
return {
get: function (url, data, callback) {
a({
method: 'GET',
url: url,
data: data,
callback: callback
})
},
post: function (url, data, callback) {
a({
method: 'POST',
url: url,
data: data,
callback: callback
})
},
}
}());
7.实现一个数组的sort方法
//就写个最简单的冒泡吧= =
Array.prototype.s = function (fn) {
for (var i = 0, len = this.length; i < len; i++) {
for (var j = 0; j < len - i; j++) {
if (fn(this[j], this[j + 1]) > 0) {
var temp = this[j];
this[j] = this[j + 1];
this[j + 1] = temp;
}
}
}
}
8.实现一个sum函数, 能够将一个数组求和(数组里面还可以包含数组)
//这道题主要考一考递归
function sum (arr) {
var res = 0;
work(arr);
function work (arr) {
arr.forEach(function (item) {
if (typeof item === 'number') {
res += item;
} else {
work(item);
}
});
}
return res;
}
9.ES6中新规范的解决异步的一个方案Promise, 解决了嵌套回调的问题。它的使用方式大概如下。
请使用我们现有的方法来实现一个Promise类
//超级简易版本（可以考虑考虑当then又返回一个promise对象的时候应该如何处理）
function Promise (fn) {
this.callbackArray = [];
function _resolve (data) {
var pData = data;
this.callbackArray.forEach(function (item) {
pData = item(pData);
}.bind(this));
}
fn(_resolve.bind(this));
}
Promise.prototype.then = function (callback) {
this.callbackArray.push(callback);
return this;
}
10.使用node创建一个服务器并监听在1122端口
//Node js的基础只是
var http = require('http');
http.createServer(function () {
}).listen(1122);
