面试 | roastwind

##1.目前前端标配的两个领域:
Angular和React
开发中有没有不懂的地方,一定要及时去问,不要等到开发完成后才发现需求不对。做过的程序,要自己检查一遍。

##2.js中数据类型:
###2.1.Number类型的两个特殊值:
1.NaN:非数字类型
2.Infinity:无穷大

Number.POSITIVE_INFINITY

###2.2.数据类型有哪些:
1.布尔、数值、字符串、对象、null、undefined 2.又分成【原始类型】(primitive)和【合成类型】(complex)

1.Number(null) == 0,null转换为数字时为0;
2.null作为函数的参数,表示该函数的参数不是对象;null作为原型链的终点;
3.undefined一个变量声明,未定义时;函数参数未传值时;对象没有赋值的属性;函数没有返回结果时;
4.null一个值被定义了,定义成”null”,undefined一个值未被定义,objA.valueA = null是合理,objA.undefined不合理;
5.来源:null与undefined的区别

##3.js中闭包:
3.1.示例demo:

setTimeOut(function(){
	console.log(0);	
}, 0);
console.log(1);
setTimeout(function(){
	console.log(2);
}, 0);

3.2.示例demo

var arr = [];
for(var i = 0;i < 10;i++){
	arr.push(function(){
		console.log(i);
	});
}

ps:1.输出1、0、2,0和2不是同时输出的;
     2.setTimeout只是将事件插入“任务队列”,若第二个参数小于4ms,将会自动增加(参考JavaScript运行机制详解:再谈EventLoop)
     3.闭包是有权访问另外一个函数作用域的变量的函数(参考从作用域链谈闭包)
     4.从setTimeout谈JavaScript运行机制

##4.js继承 1.声明一个obj，怎么继承它？

var a = {h: 123};

1.原型链指向:

var a = {h: 123};
var b = {w: 33};
b.\_\_proto\_\_ = a;
console.log(b.h);

2.Object.create显式指向

var a = {h: 123};
var b = {w: 33};
var b = Object.create(a.prototype);
console.log(b.h);

2.new执行了哪些操作?

var B = function(){};
var c = new B();

1.把c的原型链指向的B的prototype属性

var B = function(){};
var c = new B();
console.log(c.__proto__ === B.prototype); // true
// new所做的事情:
var obj = {};
obj.__proto__= fn.prototype;
fn.call(obj);

3.new Object与Object.create区别?

object.create会继承（新创建对象的__proto__会指向第一个参数的prototype属性）,new Object则不会

var a = {x:1};
var b = Object.create(a);
console.log(b);//输出：{};
console.log(b.\_\_proto\_\_);//输出：{x:1}

var b =new object(a)
connsole.log(b);//输出：{x:1}
congsole.log(b.\_\_proto\_\_);//输出：{}

4.Object.create用法:

Object.create(Object.prototype, {a: 13});

5.Object.create定义:

if (!Object.create) {
	Object.create = function (o) {
		function F() {}  //定义了一个隐式的构造函数
		F.prototype = o;
		return new F();  //其实还是通过new来实现的
	};
}

参考来源:
1.js原型链new与Object.create()区别,
2.js原型链和Object的create方法

##5.js跨域问题 1.浏览器的同源策略,jsonp利用script在浏览器执行的原理,在客户端定义相同名字的函数,就可以拿到不同域的数据
2.cors(cross orgin resource sharing),有些老浏览器不支持(比如Opera Mini)
3.还有一种解决方案,就是客户端访问服务端,吧要跨域的url发给服务端,由服务端通过httpClient来访问跨域资源,请求到结果后再返回客户端。 4.同域名下的不同子域名, 设置document.domain后, 子窗口中可以通过window.parent访问父窗口的变量参考博客(深入剖析jsonp原理)

##6.简单rem的处理 1.js处理代码如下:

(function(doc, win){
	var docEle = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function(){
			var clientWidth = docEle.clientWidth;
			if(!clientWidth) return;
			docEle.style.fontSize = 20 * clientWidth / 750 + 'px';
		}
	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1.这种写法是750px的设计稿,1rem = 20px;
2.浏览器默认的字体都是16px,即:1em:16px,计算不方便,所以有默认的设置如下:
html{ font-size: 62.5%; /* 10/16\*100 = 62.5% \*/}
使用示例:
body{ font-size: 1.4rem; /\* 1.4\*10px=14px \*/}
h1{ font-size: 2.4rem; /\* 2.4\*10px = 24px */}
3.参考来源: webapp自适应方案总结 4.手机meta设置:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

5.flex盒子模型?box-sizeing: border-box;作用?

##7.给一个数,每3位加一个“,”,代码如下:

var splitNum = function(num){
	var numStr = num + '',
		numResult = '';
	for(var i = numStr.length-1;i >= 0;i--){
		numResult = (i != 0 && i % 3 == 0) ? (','+numStr[i]+numResult) : numStr[i]+numResult;
	}
	return numResult;
};
console.log(splitNum(123456));

##8.委托的原理:

// 获取父节点，并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的处理过程在这里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

1.通过冒泡的原理，来捕获当前的对象是否是所要绑定事件的对象

##9.形参和实参获取方式

var func = function(arg1, arg2){
	var arg = arguments;
	console.log('形参个数: ' + arg.callee.length);
	console.log('实参个数: ' + arg.length);
}
func(1);

1.callee在ECMAScript标准规范中规定它所代表当前正在执行的函数
2.caller是非标准的，但大多数浏览器都实现了它个属性它指代调用当前正在执行的函数的函数通过caller属性可以访问调用堆栈。

prefetch和preload相关

============NodeJS篇章=============

10.常见的http状态码

200: 成功
304: 已缓存
404: 找不见
500: 服务器错误
503: 服务不可用
504: 服务超时

http状态码大全

11.哪些方法可以隐藏元素

display:none
visibility:hidden
opacity:0

1.export和module.export区别

每个js文件一创建，都有一个var exports = module.exports = {};，使exports和module.exports都指向一个空对象。
module是全局内置对象，exports是被var创建的局部对象。
module.exports和exports所指向的内存地址相同

ps:

1.NodeJS全局变量有global(类似浏览器中的window),module,process,console,Buffer,exports

参考文献：

1.cnode解释
2.cnode第二个解释
3.信鑫解释
4.csdn解释

2.mongodb和mongoose的区别：

mongodb每查询一次，需要打开一次连接；而mongoose不需要
schema

============CSS篇章=============

1.垂直居中的几种方式

flex

.parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -width/2;
	margin-top: -height/2;
}

tabel-cell

.parent {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

搞定vertical-align不起作用的疑难杂症