1、使用至少两种方法，实现如下布局（box垂直居中于父元素，宽高不固定）？
第一种：
<style>
.container {
display: table;
}
.inner {
display: table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<div class="container">
<div class="inner">
you own content
</div>
</div>
复制代码第二种：
<style>
.container {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="inner">
your own content
</div>
</div>
复制代码第三种：
<style>
.container{
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
}
</style>
<div class="container">
<div class="inner">
this is a box fixed in center of screen<br>The second line
</div>
</div>
复制代码2、px、em、rem有什么区别？
-
px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。 - em表示相对尺寸，其相对于当前对象内文本的
font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。 -
rem也表示相对尺寸，其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size。
3、position有几种取值，每种取值相对于谁来进行定位？
- absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
- fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
- relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中
- sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
4、JavaScript的数据类型有哪些？
- 七种数据类型：
Undefined、Null、Boolean、Number、String、Symbol、Object
5、用new运算符创建一个实例时，经历了哪些步骤？
例子????：
function create() {
// 创建一个空的对象
let obj = new Object()
// 获得构造函数
let Con = [].shift.call(arguments)
// 链接到原型
obj.__proto__ = Con.prototype
// 绑定 this，执行构造函数
let result = Con.apply(obj, arguments)
// 确保 new 出来的是个对象
return typeof result === 'object' ? result : obj
}
复制代码- 创建一个新对象
- 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
- 执行构造函数中的代码（为这个新对象添加属性）
- 返回新对象
6、下面这段代码返回值是什么？
var scope = 'global scope';
function checkScope() {
var scope = 'local scope';
function f() {
return scope;
}
return f;
}
checkScope()(); // local scope
复制代码7、用什么方法可以获得对象的类？写出代码
- Object.prototype.toString.call(对象)
- typeof: typeof 对象 或者 typeof(对象)
8、call()、apply()、bind()方法的作用是什么？什么时候会使用到这些方法？他们之间的区别是什么？
javaScript权威指南上的解释是： call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数。bind() 就是将某个函数绑定到某个对象上。
关于call() 和 apply() 在犀牛书上的解释可能比较生涩难懂，我的理解就是，它们的作用是： 让函数在某个指定的对象下执行。
var obj = {x: 1}
function foo() {console.log(this.x)}
foo.call(obj) // 打印结果：1
复制代码call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。
call()和apply()的区别就在于，两者之间的参数。
call()在第一个参数之后的 后续所有参数就是传入该函数的值。apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。
var obj = {};
function foo(a, b, c) {
console.log(b);
}
foo.call(obj, 1, 2, 3) // 打印结果：2;
复制代码var obj = {};
function foo(a, b, c) {
console.log(b);
}
foo.apply(obj, [1, 2, 3]) // 打印结果：2;
复制代码bind() 方法和前两者不同在于： bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同。
这三个方法的作用都是改变函数的执行上下文！
9、利用正则表达式，写一个字符串转换成驼峰的方法。
function stringToCamelCase(str){
var reg=/-(\w)/g; //子项()表示子项
return str.replace(reg,function($0, $1){
// $0代表正则整体，replace（）方法中的第二个参数若是回调函数，那么这个回调函数中的参数就是匹配成功后的结果
// 若回调函数中有多个参数时，第一个参数代表整个正则匹配结果，第二个参数代表第一个子项
alert($0); // -b
alert($1); // b
return $1.toUpperCase();
});
}
复制代码10、如下代码，控制台会输出什么内容？
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
}, 1000);
})
const promise2 = promise1.then(() => {
throw new Error('error~~~');
});
console.log('promise1', promise1);
console.log('promise2', promise2);
setTimeout(() => {
console.log('promise1', promise1);
console.log('promise2', promise2);
}, 2000);
复制代码promise1 Promise {} promise2 Promise {} promise1 Promise {: "success"} Promise {: Error: error~~~at promise1.then (:8:11)}
11、CommonJS、AMD、CMD的区别？
CommonJS
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中，Node.JS遵循CommonJS的规范
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
var clock = require('clock');
clock.start();
复制代码CommonJS 是同步加载模块
AMD
基于CommonJS规范的nodeJS出来以后，服务端的模块概念已经形成，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。如果将上面的代码运行在客户端浏览器，就会报错。
上面的require方法是同步的。这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"，只能采用"异步加载"。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD出现了，它就主要为前端JS的表现制定规范。
AMD是Asynchronous Module Definition的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
require(['clock'],function(clock){
clock.start();
});
复制代码requireJs就是AMD规范的实现
CMD
CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：
define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});
复制代码AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。
AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
12、MVC、MVP、MVVM的区别？
MVC：
- View接受用户的交互请求
- View将请求转交给Controller
- Controller操作Model进行数据更新
- 数据更新之后，Model通知View数据变化
- View显示更新之后的数据
MVP：
- 各部分之间的通信， 都是双向的。
- View 与 Model 不发生联系， 都通过 Presenter 传递。
- View 非常薄， 不部署任何业务逻辑， 称为 被动视图，Presenter 非常厚， 所有逻辑都部署在那里。
MVVM：
- 各部分之间的通信， 都是双向的。
- View 与 Model 不发生联系， 都通过 ViewModel 传递。
- View 非常薄， 不部署任何业务逻辑， 称为 ViewModel 非常厚， 所有逻辑都部署在那里。
唯一的区别是， 它采用双向数据绑定，(data-binding) ： View 的变动。自动反映在 ViewModel, 反之亦然。 Angular 和 Ember 都采用这种模式
13、简述v-if和v-show的区别？
v-if 是销毁删除节点、并且渲染时不会渲染 v-show是显示隐藏节点、相当于display:none