前端考核试题解答 #2
Description
2015/11/29前端试题答案
一丶基础部分：
HTML CSS
1.请写出HTML页面基本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.请谈谈HTML5语义化的含义，并举例说明常见的带有语义化的标签
有利于在没有css的情况下，更好的提现页面的结构
增加了用户体验
有利于SEO，能够更好的和搜索引擎沟通，有助于爬虫获得有效信息
方便其他设备解析，利于其他人群
便于团队维护开发，语义化更具有可读性。
常见带有语义化的标签<header><footer><article><section><aside><h1> ~ <h6><nav>等
3.谈谈对DTD的理解，如果HTML页面不声明DTD会造成什么后果。
DTD文档类型定义，它表明html问文档的渲染模式会采用哪一种（标准模式，非标准模式，准标准模式），如果忘记书写DTD那么浏览器不能很好的解决
文档的渲染，会出现与w3c标准的不同效果。js也会受到一定的影响，比如页面的根元素会从document转移到document.body
4.写出常用meta标签（字符集声明，渲染控制，视口声明等...不用详细写出，大概意思就可以:
请点击这里，meta标签的详细说明
5.简要描述块级元素和内联元素在表现上的区别（要体现出视觉格式化方面的差异）
块级元素：独占一行，可以包含其他元素 ，宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
内联元素：在同一行上，内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
6.画出基本盒模型图， 写出清除浮动的css代码。
模型略， 清除浮动标准代码。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
7.简述BFC（块级格式化上下文）的布局规则，并写出如何使元素触发BFC
请点击这里，BFC的基本内容及用法
8.根据下列HTML代码，补充CSS使页面达到左栏(aside)宽度(100px)固定，右栏(main)宽度自适应。
查看代码示例-BFC应用
9.根据HTML代码，效果图，完成左栏(100px)，右栏(200px)宽度自适应，中栏宽度固定
查看代码示例-双飞翼布局
javascript部分
1.javascript为弱语言，因此，数据类型的判断就格外重要，请写出isString 和 isArray函数用来判断给定参数是否为字符串和数组
2.根据第二题，你能否给出给出一函数判断所有数据类型。（不能写出程序，简述思路也可，要求说明重要的判断依据）
前两问主要考察队Object.prototype.toString.call()的使用，并且知道单纯的typeof contructor属性是无法起作用的。
详情请参考，具体示例参考：
查看Javascript判断数据类型
3.写出一个函数能够判断给定数组中第二大的数:
function secManNumber(arr) {
return arr.sort(function(a,b){
return b - a;
})[1]
}
4.根据给定HTML，当单击li的时候，能够打印出li中对应的文字。（有困难的可以考虑jquery）
这里给出采用事件监听的方式。仅有当采用事件监听的写法，9题才能成功。
var aimUl = document.querySelector(".item");
aimUl.addEventListener("click", function(event) {
var target = event.target;
if(target.nodeName === "LI") {
console.log(target.textContent);
}
}, false)
5.简述变量提升，函数提升，和闭包的原理和作用。
查看这里 函数变量提升
6.简述this指针，说明this指向的依据。想要改变this指向请问有什么办法？
this根据当前作用域来决定自身的值，一般在对象调用其方法是。 obj.func 那么func中的this就指向obj。
如果你没有明确调用func那么其中的this会指向window对象。改变this可以通过call，apply，bind来改变。
查看这里 this指针
7.简述call和apply的区别和作用：
call和apply都是改变函数执行时this的指向，区别在于参数不同。
查看这里 call和apply
8.定义一个Person类，类成员属性：name， age，成员方法walk； 定义一个Child类，继承Person，Child成员属性为address，成员方法为talk。
if(!Object.create){
Object.create= (function(){
function F(){} //创建中介函数（bridge）
return function(obj) {
if(arguments.length !== 1) {
throw new Error("仅支持一个参数");
}
F.prototype = obj; //原形绑定
return new F(); //返回实例
}
})()
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.walk = function() {
console.log("走路....");
}
function Child(name, age, address) {
Person.call(this, name, age);
this.address = address;
}
Child.prototype = Object.create(Person.prototype);
Child.prototype.talk = function() {
console.log("说话ing.....")
}
9.根据第四题HTML，点击button 向ul中添加新的li内容随意。但是要保证新添加的内容同样可以完成4的动作。
在9的基础上，添加如下函数。
var aimButton = document.querySelector("button");
aimButton.addEventListener("click", function(event){
var newEle = document.createElement("li");
newEle.textContent = "list" + (aimUl.children.length + 1);
aimUl.appendChild(newEle);
}, false)
二丶提高部分：
移动端：
1.略
2.移动端突破了传统的盒模型，采用了许多新的内容。请问：box-sizing属性都有哪儿值，有什么作用。
box-sizing 当值为border-box时，为元素设定的宽度和高度决定元素的边框盒。这样就更加容易设计。
3.请利用flex布局完成HTML部分第9题
查看代码flex布局重构
4.rem是什么有什么作用？
查看这里 利用rem响应式布局
5.略
6.在移动端，通常采用css3动画完成效果。但是普通的动画并不能流畅运行，需要开启GPU渲染。那么css3启动GPU渲染的代码是什么？ 及时开启GPU渲染，由于性能原因，同样会导致页面动画卡顿，那么是哪儿些属性导致了页面的卡顿呢？
添加属性
transfrom: translateZ(0); top,left,right,bottom这些通过position实现移动效果的时候，依然会卡顿。利用transform: translate...替代。
游戏开发：
1.通常js动画采用setInterval setTimeOut 实现。但是这种机制会由于单线程的原因不能及时的实现。于是浏览器引入了帧控制， window.requestAnimationFrame 函数。请利用该函数，实现页面3s完成红色变成绿色。
查看代码-背景渐变
2.实现HTML页面上一个直径为20px的小球，一页面中心为原点，55px 为半径做2s一圈的无限圆周运动
查看代码-圆周运动
3.给定一个canvas标签，实现一函数windowToCanvas(x, y)，判断鼠标在canvas中的坐标
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x : x - bbox.left * (canvas.width / bbox.width),
y : y - bbox.top * (canvas.height / bbox.height)
}
}
4.画图是最基本的功能，请谈谈如何画出1px的直线，说明填充环绕规则是什么
想要画出1cm的线，必须在坐标为.5的位置其实画线，才可以。因为像素不能折半。填充环绕规则：非零环绕准则。
5.给出小球的精灵BallSprite，精灵中保存了（left，top，width，height）属性，请写出函数rectIntersectsRect()判断两个小球是否碰撞。 （碰撞检测方法随意）
ball.rectIntersectsRect = function(obj) {
var thisRight = this.left + obj.width,
objRight = obj.left + obj.width,
thisBottom = this.top + this.height,
nextFrameBottom = thisBottom + this.velocityY / fps;
return thisRight > obj.left &&
this.left < objRight &&
thisBottom < obj.top &&
nextFrameBottom > obj.top;
}
NodeJs：
1.略（自行百度）
2.略
3.根据代码中给出的HTTP服务器，利用cluster模块，简单实现负载均衡，写出完整代码
var cluster=require("cluster");
var http=require("http");
var cpus=require("os").cpus();
if(cluster.isMaster){
console.log("主进程开始启动");
cluster.on("exit",function(worker){
console.log("子进程：worker"+worker.id+"被终止，PID："+worker.process.pid);
cluster.fork();
})
for(var i=0;i<cpus.length;i++) {
cluster.fork();
}
cluster.on('listening', function (worker, address) {
console.log('子进程已经启动：' + ' worker' + worker.id + ',pid:' + worker.process.pid + ', 地址:' + address.address + ":" + address.port);
});
}else if(cluster.isWorker){
console.log("子进程开始 ...worker" + cluster.worker.id);
http.createServer(function (req, res) {
console.log('调用子进程：worker'+cluster.worker.id);
//res.setEncoding('utf8');
res.writeHead(200,{
'Content-Type':'text/plain',
'Cache-Control':'max-age=3600'
});
res.end('正在服务的子进程：worker'+cluster.worker.id+',进程：PID:'+process.pid);
}).listen(4000);
}
4.写出利用express完成一个简单的路由请求代码app.js。（地址：127.0.0.1/， 响应，返回GET或POST参数）
var express = require("express"),
bodyParser = require('body-parser');
app.post("/", function(req, res) {
res.json(req.body);
})
5.利用mongoose创建一个PersonSchema，字段：name（String），年龄：age（Number， min：0 max：150）， 身份证号："idCard" （String 必填 获取方法getIdCard）
var mongoose = require("mongoose");
var PersonSchema = new mongoose.Schema({
"name" : String,
"age" : {
type : Number,
min : 0,
max : 150,
required : true
},
"idCard" : {
type : String,
get : getIdCard,
required : true
}
})
Person