1.實現(xiàn)三欄布局，兩邊欄位寬度固定，中間欄寬度隨瀏覽器而改變
2.解釋一下css選擇器的權(quán)級 (#id div p > .class id p)
3.使用正則匹配出學號中的年級與學院編號 年級(2014)學院(214)021
4.解釋一下jsonp跨域的原理 (可以給出前后端具體實現(xiàn))
5.實現(xiàn)一個(圓形帶指針)計時表 (帶動畫效果)
6.封裝一個ajax類 (它可以被下面這樣使用)
ajax.get('url', {data: '11'}, function (res) {
// callback
})
ajax.post('url', {data: '11'}, function (res) {
// callback
})
7.實現(xiàn)一個數(shù)組的sort方法(可以傳入一個函數(shù)來改變sort方法的排序規(guī)則)
[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.實現(xiàn)一個sum函數(shù), 能夠?qū)⒁粋€數(shù)組求和(數(shù)組里面還可以包含數(shù)組)
var res = sum([1, 2, [2, 4, 4, [1]]]);
// res 14
9.ES6中新規(guī)范的解決異步的一個方案Promise, 解決了嵌套回調(diào)的問題。它的使用方式大概如下。
請使用我們現(xiàn)有的方法來實現(xiàn)一個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創(chuàng)建一個服務器并監(jiān)聽在1122端口
1.實現(xiàn)三欄布局，兩邊欄位寬度固定，中間欄寬度隨瀏覽器而改變
<!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選擇器的權(quán)級 (#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跨域的原理 (可以給出前后端具體實現(xiàn))
jsonp依靠script標簽的性質(zhì)進行跨域
前端原理：前端向后端發(fā)送一個script的src請求 url里面帶上GET參數(shù) (主要是一個回調(diào)函數(shù)的名稱，后端需要根據(jù)這個名稱來進行數(shù)據(jù)返回)
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參數(shù)中約定好的callback參數(shù)
callback=jsonpCallback
php示例：
$name = $_GET['callback'];
$data = array(1, 2, 3);
$data = json_encode($data);
echo "$name($data)";
隨后前端接受到echo內(nèi)容并執(zhí)行 就拿到了上述$data變量的數(shù)據(jù)
5.實現(xiàn)一個(圓形帶指針)計時表 (帶動畫效果)
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.實現(xiàn)一個數(shù)組的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.實現(xiàn)一個sum函數(shù), 能夠?qū)⒁粋€數(shù)組求和(數(shù)組里面還可以包含數(shù)組)
//這道題主要考一考遞歸
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中新規(guī)范的解決異步的一個方案Promise, 解決了嵌套回調(diào)的問題。它的使用方式大概如下。
請使用我們現(xiàn)有的方法來實現(xiàn)一個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創(chuàng)建一個服務器并監(jiān)聽在1122端口
//Node js的基礎只是
var http = require('http');
http.createServer(function () {
}).listen(1122);