整理2

摘要：同理当该元素为时，那么其实际就是。使用处理全部软键盘事件，安卓部分可处理，但可加上的事件监听软键盘的打开与关闭。当调整浏览器窗口大小时，发生事件。移动微信端调整字体，样式乱掉的问题。

一： 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的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*/

看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。

单位 定义 特点
rem font size of the root element 以根元素字体大小为基准
em font size of the element 以父元素字体大小为基准

rem的计算：

细心的同学就会发现了，我们使用rem单位事先需要做的一件事情就是设置根元素的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是固定的： 

高度定死，宽度自适应，元素都采用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自定义事件

       
       增加
       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中

增加
 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

https://www.jianshu.com/p/b76...