一： ES6篇
1: 箭头函数
箭头函数就是一种函数的简写形式，
用 => 符号来定义，并且没有自己的this，arguments，super或 new.target。
这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。
2： 异步Promise
比如有若干个任务要执行，先做任务一，成功后再做任务二，任何任务失败则不继续，执行错误处理函数。
要串联执行这样的异步任务。不用promise需要写一层一层的嵌套代码。
(1) 有了promise后，我们只需要简单的写：
job1.then(job2).then(job3).catch(handleError);
// 其中，job1、job2和job3都是Promise对象。
//串行执行若干异步任务
(2) 在我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。还记得Promise对象上有then、catch方法吧？这就是强大之处了，看下面的代码：
function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
return p;
}
runAsync().then(function(data){
console.log(data);
//后面可以用传过来的数据做些其他操作
//......
});
//会在2秒后输出“执行完成”，紧接着输出“随便什么数据”。
(3) 而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。
//例子2：
//异步方法一
function getone(resolve,reject){
setTimeout(function(){
resolve("getone");
},3000)
}
//异步方法二
function gettwo(resolve,reject){
setTimeout(function(){
resolve("gettwo");
},3000)
}
//异步方法三
function getthree(resolve,reject){
setTimeout(function(){
resolve("getthree");
},3000)
}
var result = new Promise(getone)
.then(function(resultone){
console.log('----------one------------');
console.log(resultone);
return new Promise(gettwo);
})
.then(function(resulttwo){
console.log('----------two------------');
console.log(resulttwo);
return new Promise(getthree);
})
.then(function(resultthree){
console.log('-----------three---------');
console.log(resultthree);
})
.catch(function(err){
console.log(err);
})
(4) Promise.all()
Promise.all方法用于请求多个并发接口数据。该方法的作用是将多个Promise对象实例包装，生成并返回一个新的Promise实例。
var p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results); // [1, 2, 3]
});
3：
二： 移动篇
1：移动端rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算
例如：
html{ font-size:16px;}
那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成rem计算上的麻烦和多位小数，所以，我们也可以进行这种方式的初始化根元素：
html{
font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}这样初始化之后，我们来进行rem计算的时候，就会减少许多的麻烦。
或者：
当我们指定一个元素的font-size为2rem的时候，也就说这个元素的字体大小为根元素<html>字体大小的两倍，如果html的font-size为12px，那么这个2rem的元素font-size就是24px。同理当该元素为3rem时，那么其实际font-size就是36px。
html {font-size: 12px;}
h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */
div {width: 20rem;} /* 20 * 12px = 240px*/
html {font-size: 16px;}
h1 { font-size: 2rem; } /* 2 × 16px = 32px */
p { font-size: 1.5rem;} /* 1.5 × 16px = 24px */
div {width: 20rem;} /* 20 * 16px = 320px*/
看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素<html>的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。
单位 定义 特点
rem font size of the root element 以根元素字体大小为基准
em font size of the element 以父元素字体大小为基准
rem的计算：
细心的同学就会发现了，我们使用rem单位事先需要做的一件事情就是设置根元素<html>的font-size，通常有两种做法。
JS计算
通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";
这样iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px。
如果在iphone8（375px）下设置元素font-size为 1.7066rem， 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。
上面的示例是个很简单的例子，感兴趣的同学可以在自己的页面上试一下或者开发者工具下打开 淘宝触屏版，使用rem设置元素的样式，并通过开发者工具切换模拟机型观察页面效果。
也可以用媒体查询：
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
px转rem可以通过工具：
fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader
2：移动端适配的技术方案：
(1) 通过媒体查询的方式即CSS3的meida queries
通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：
@media screen and (max-width: 600px) {
/*当屏幕尺寸小于600px时，应用下面的CSS 样式*/
/*你的css代码*/
}
缺点：代码量比较大，维护不方便
(2) Flex弹性布局
以天猫的实现方式进行说明：
它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 高度定死，宽度自适应，元素都采用px做单位。
(3) rem + viewport 缩放
3: h5兼容安卓和iOS的键盘弹出影响布局的坑
H5输入框在弹起键盘后被遮挡(1) IOS下，点击输入框，获得焦点，键盘会弹起。失去焦点，键盘会关闭是没有问题的。
在安卓下，关闭软键盘时，输入框的焦点 并不会失去。要使用resize。
ios使用focus、blur处理全部软键盘事件，安卓部分可处理，但可加上window的resize事件监听软键盘的打开与关闭。
当调整浏览器窗口大小时，发生 resize 事件。
代码理解：
if判断 (当键盘弹起的时候，固定容器高度。)
4：移动微信端调整字体，样式乱掉的问题。
(1) 可以借助WeixinJSBridge对象来阻止字体大小调整
/ 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
(2) 设置禁止网页字体被放大.
iOS下
对网页的 body 元素设置 -webkit-text-size-adjust: 100% !important;可以覆盖掉微信的 样式。
body {
-webkit-text-size-adjust: 100% ;
}
三： vue篇
1：通过路由传值：
this.$router.push(`/home/${item.id}`);
2： created和mounted区别？
created： 在模板渲染成html或者模板编译进路由前调用created。
即通常初始化某些属性值，然后再渲染成视图。
mounted： 在模板渲染成html后调用。
通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，
比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，
而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，
一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
3：兄弟组件 之间 传值。
(1)通过eventBus
-
一般创建一个evenBus.js
import Vue from 'vue' export default new Vue() //新建vue实例 -
$emit自定义事件
<input type="text" v-model="todoList"> <button class="add" @click='addList'>增加</button> import eventBus from '../assets/evenBus' data(){ return { todoList:'' } }, methods:{ addList:function(){ eventBus.$emit('add',this.todoList) } } -
$on接收事件
import eventBus from '../assets/evenBus' created:function(){ this.acceptList() }, methods:{ acceptList:function(){ eventBus.$on('add',(message)=>{ this.lists.push({ name:message,isFinish:false }) }) } }
(2) vuex
-
创建store对象。
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); var store=new Vuex.Store({ //存储状态 state:{ lists:[ { name:'数学作业',isFinish:false }, { name:'语文作业',isFinish:false }, { name:'化学作业',isFinish:false }, { name:'物理作业',isFinish:false } ] }, //显示的更改state mutation:{}, //过滤state中的数据 getters:{}, //异步操作 actions:{} }); export default store;
2 在组建中引入并使用
在组件A中
<input type="text" v-model="todoList">
<button class="add" @click='addList'>增加</button>
data(){
return {
todoList:''
}
},
store:store,
methods:{
addList:function(){
this.$store.state.lists.push({name:this.todoList,isFinish:false})
}
}3 在组件B中
computed:{
lists:function(){
return this.$store.state.lists
}
},
4 Vue实现数据双向绑定的原理：Object.defineProperty（）
view指的是页面的html和css构成的视图。
model指的是从后端取到的数据模型。
viewmodel 指的是前端开发人员组织生成和维护的视图数据层。这一层包含的是视图行为和数据。
vue通过 Object.defineProperty()来实现数据劫持。
它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举。
这里我们主要先来研究下它对应的两个描述属性get和set
实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据：
view更新data其实可以通过事件监听即可，比如input标签监听 'input' 事件就可以实现了。
所以我们着重来分析下，当数据改变，如何更新视图？
数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。
如何知道数据变了，其实上文我们已经给出答案了，
就是通过Object.defineProperty( )对属性设置一个set函数，
当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。
5:Weex是什么？
(1) Weex是阿里开源的一套构建跨平台的移动框架。
Weex 主要解决了频繁发版和多端研发两大痛点
(2) 如何使用Weex？
- 第1步: 安装node.js
- 第2步: 安装weex-toolkit
- 第2步: 创建.we文件.Weex 程序的文件后缀（扩展名）是.we。
https://blog.csdn.net/yangyan...
四： JS篇
1，JS继承有几种方式？
(1) 构造函数绑定
例子： 现在有两个类构造函数
//动物类
function Animal() {
this.species = "动物";
}
//猫类
function Cat(name, color) {
this.name = name;
this.color = color;
}怎样才能使"猫"继承"动物"的特性呢？
使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：
function Cat(name, color) {
Animal.apply(this, arguments);
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛", "黄色");
alert(cat1.species); // 动物
(2) 原型链继承
即 子构造函数.prototype = new 父构造函数()
function Show(){
this.name="run";
}
function Run(){
this.age="20"; //Run继承了Show,通过原型，形成链条
}
Run.prototype=new Show();
var show=new Run();
console.log('结果', show.name)//结果：run
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。