面试内容
1.你对于electron的理解
这个问题回答得不是很好，当时就简单的介绍了一下electron，甚至面试官问了用了哪个版本都答不上来，个人只是简单的介绍了一下electron，还有electron-vue。
个人觉得可以从下面的几个方面回答：
- electron版本——1.7.9
- 官方文档上对electron的理解
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。
electron是一个程序库。electron是可重用的代码，不需要你自己编写，只需要使用它并在它基础上建立你的项目
重要性：通常情况下，我们构造不同的操作系统的桌面应用就需要通过其原生编程语言实现。这意味着有三个团队写了三个版本的应用程序。而使用electron可以一步到位，而且可以使用web编程语言编写
怎么实现：electron结合了chromium开源浏览器和带有一系列原生操作系统函数（打开文件对话框、通知、图标等等）的自定义API的node.js
- 特点：
使用node。除了Node自带的完整API，还可以使用超过300000个已经被编写好并托管于npm上的模块
支持最新版的chrome
- 两重要模块
IPCMain和IPCRenderer（进程之间的通信）
- 介绍electron-vue
该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。
2.移动端项目的布局
回答了一下响应式布局相关。
- meta
- 百分比
- rem布局
- @media screen and (max-device-width:400px)
3.rem相关
- 定义：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
- em是相对于父元素的字体单位大小
- rem能够等比例适配所有屏幕
通过设置HTML标签的大小即可设置
CSS
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
JavaScript
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
rem自适应布局的回顾总结
4.vue的双向数据绑定(画图)
自己说得不是很好，就单纯的说了Object.defineProperty(),画图的时候很懵逼。
参考：https://segmentfault.com/a/1190000006599500
5.vue的生命周期
6.如果给你设置的话，你还会在这个基础之上添加哪些生命周期
讲了一个nextTick类似的功能
7.实现垂直方向的居中
经常性问题，不累赘介绍
8.canvas画画，放大，倾斜，动画
- 画画自己答了通过监听鼠标事件进行
- 后面三个自己回答了transform和animation
参考：
http://blog.csdn.net/github_38927899/article/details/77433979
9.手写实现一个计算器的功能cal(12).add(1).del(3).mul(6)
使用原型的方法
Number.prototype.add=function(num){
return this+num;
}
Number.prototype.reduce=function(num){
return this-num;
}
Number(10).add(2).reduce(4)
使用链式调用方法：
10.在项目中，你遇到哪些问题，怎么解决的呢
11.你对闭包的理解
就回答了闭包的定义以及它的作用。
总结:
1.项目总结不够
2.基础不扎实
其他同学面试经验：
第一题链接
https://leetcode.com/problems/first-bad-version/description/