摘要：同理當(dāng)該元素為時(shí)，那么其實(shí)際就是。使用處理全部軟鍵盤事件，安卓部分可處理，但可加上的事件監(jiān)聽軟鍵盤的打開與關(guān)閉。當(dāng)調(diào)整瀏覽器窗口大小時(shí)，發(fā)生事件。移動(dòng)微信端調(diào)整字體，樣式亂掉的問(wèn)題。

一： ES6篇

1: 箭頭函數(shù)
箭頭函數(shù)就是一種函數(shù)的簡(jiǎn)寫形式，
用 => 符號(hào)來(lái)定義，并且沒有自己的this，arguments，super或 new.target。
這些函數(shù)表達(dá)式更適用于那些本來(lái)需要匿名函數(shù)的地方，并且它們不能用作構(gòu)造函數(shù)。

2： 異步Promise
比如有若干個(gè)任務(wù)要執(zhí)行，先做任務(wù)一，成功后再做任務(wù)二，任何任務(wù)失敗則不繼續(xù)，執(zhí)行錯(cuò)誤處理函數(shù)。
要串聯(lián)執(zhí)行這樣的異步任務(wù)。不用promise需要寫一層一層的嵌套代碼。

(1) 有了promise后，我們只需要簡(jiǎn)單的寫：

job1.then(job2).then(job3).catch(handleError);
// 其中，job1、job2和job3都是Promise對(duì)象。
//串行執(zhí)行若干異步任務(wù)

(2) 在我們包裝好的函數(shù)最后，會(huì)return出Promise對(duì)象，也就是說(shuō)，執(zhí)行這個(gè)函數(shù)我們得到了一個(gè)Promise對(duì)象。還記得Promise對(duì)象上有then、catch方法吧？這就是強(qiáng)大之處了，看下面的代碼：

  function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log("執(zhí)行完成");
            resolve("隨便什么數(shù)據(jù)");
        }, 2000);
    });
    return p;            
}   
runAsync().then(function(data){
console.log(data);
    //后面可以用傳過(guò)來(lái)的數(shù)據(jù)做些其他操作
    //......
});

//會(huì)在2秒后輸出“執(zhí)行完成”，緊接著輸出“隨便什么數(shù)據(jù)”。

(3) 而Promise的優(yōu)勢(shì)在于，可以在then方法中繼續(xù)寫Promise對(duì)象并返回，然后繼續(xù)調(diào)用then來(lái)進(jìn)行回調(diào)操作。

//例子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方法用于請(qǐng)求多個(gè)并發(fā)接口數(shù)據(jù)。該方法的作用是將多個(gè)Promise對(duì)象實(shí)例包裝，生成并返回一個(gè)新的Promise實(shí)例。

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：
二： 移動(dòng)篇

1：移動(dòng)端rem
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位。
所以這里總結(jié)一句，所謂依賴根元素來(lái)計(jì)算的方式，就是先給予html元素一個(gè)font-size，然后我們所有的rem就根據(jù)這個(gè)font-size來(lái)計(jì)算
例如：

html{ font-size:16px;}

那么我們這里的1rem就應(yīng)該這么來(lái)計(jì)算：1x16=16px=1rem；瀏覽器默認(rèn)為16px可能造成rem計(jì)算上的麻煩和多位小數(shù)，所以，我們也可以進(jìn)行這種方式的初始化根元素：

html{
   font-size=62.5% //這里就是10/16x100%=62.5% 也就是默認(rèn)10px的字號(hào)
}

這樣初始化之后，我們來(lái)進(jìn)行rem計(jì)算的時(shí)候，就會(huì)減少許多的麻煩。

或者：

當(dāng)我們指定一個(gè)元素的font-size為2rem的時(shí)候，也就說(shuō)這個(gè)元素的字體大小為根元素字體大小的兩倍，如果html的font-size為12px，那么這個(gè)2rem的元素font-size就是24px。同理當(dāng)該元素為3rem時(shí)，那么其實(shí)際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*/

看到這里你應(yīng)該就會(huì)發(fā)現(xiàn)，只要我們根據(jù)不同屏幕設(shè)定好根元素的font-size，其他已經(jīng)使用了rem單位的元素就會(huì)自適應(yīng)顯示相應(yīng)的尺寸了。

單位 定義 特點(diǎn)
rem font size of the root element 以根元素字體大小為基準(zhǔn)
em font size of the element 以父元素字體大小為基準(zhǔn)

rem的計(jì)算：

細(xì)心的同學(xué)就會(huì)發(fā)現(xiàn)了，我們使用rem單位事先需要做的一件事情就是設(shè)置根元素的font-size，通常有兩種做法。

JS計(jì)算

通過(guò)JavaScript讀取屏幕寬度，然后根據(jù)寬度計(jì)算出對(duì)應(yīng)的尺寸并設(shè)置根元素的font-size。

const oHtml = document.getElementsByTagName("html")[0]
const width = oHtml.clientWidth;
// 320px的屏幕基準(zhǔn)像素為12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

這樣iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px。

如果在iphone8（375px）下設(shè)置元素font-size為 1.7066rem， 效果跟設(shè)置其font-size為 24px 是一樣的(24 / 14.0625 = 1.7066)。

上面的示例是個(gè)很簡(jiǎn)單的例子，感興趣的同學(xué)可以在自己的頁(yè)面上試一下或者開發(fā)者工具下打開 淘寶觸屏版，使用rem設(shè)置元素的樣式，并通過(guò)開發(fā)者工具切換模擬機(jī)型觀察頁(yè)面效果。

也可以用媒體查詢：

@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轉(zhuǎn)rem可以通過(guò)工具：

fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader

2：移動(dòng)端適配的技術(shù)方案：

(1) 通過(guò)媒體查詢的方式即CSS3的meida queries

通過(guò)查詢?cè)O(shè)備的寬度來(lái)執(zhí)行不同的 css 代碼，最終達(dá)到界面的配置。核心語(yǔ)法是：
    @media screen and (max-width: 600px) {
     /*當(dāng)屏幕尺寸小于600px時(shí)，應(yīng)用下面的CSS    樣式*/
      /*你的css代碼*/
    }
缺點(diǎn)：代碼量比較大，維護(hù)不方便

(2) Flex彈性布局

以天貓的實(shí)現(xiàn)方式進(jìn)行說(shuō)明：
它的viewport是固定的： 

高度定死，寬度自適應(yīng)，元素都采用px做單位。

(3) rem + viewport 縮放

3: h5兼容安卓和iOS的鍵盤彈出影響布局的坑

H5輸入框在彈起鍵盤后被遮擋

(1) IOS下，點(diǎn)擊輸入框，獲得焦點(diǎn)，鍵盤會(huì)彈起。失去焦點(diǎn)，鍵盤會(huì)關(guān)閉是沒有問(wèn)題的。
在安卓下，關(guān)閉軟鍵盤時(shí)，輸入框的焦點(diǎn) 并不會(huì)失去。要使用resize。
ios使用focus、blur處理全部軟鍵盤事件，安卓部分可處理，但可加上window的resize事件監(jiān)聽軟鍵盤的打開與關(guān)閉。
當(dāng)調(diào)整瀏覽器窗口大小時(shí)，發(fā)生 resize 事件。

代碼理解：
if判斷 (當(dāng)鍵盤彈起的時(shí)候，固定容器高度。)

4：移動(dòng)微信端調(diào)整字體，樣式亂掉的問(wèn)題。
(1) 可以借助WeixinJSBridge對(duì)象來(lái)阻止字體大小調(diào)整

    / 設(shè)置網(wǎng)頁(yè)字體為默認(rèn)大小
    WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize" : 0 });

(2) 設(shè)置禁止網(wǎng)頁(yè)字體被放大.

iOS下
對(duì)網(wǎng)頁(yè)的 body 元素設(shè)置 -webkit-text-size-adjust: 100% !important;可以覆蓋掉微信的    樣式。
body {
    -webkit-text-size-adjust: 100% ;
}

三： vue篇

1：通過(guò)路由傳值：

this.$router.push(`/home/${item.id}`); 

2： created和mounted區(qū)別？

created： 在模板渲染成html或者模板編譯進(jìn)路由前調(diào)用created。
即通常初始化某些屬性值，然后再渲染成視圖。

mounted： 在模板渲染成html后調(diào)用。
通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

通常created使用的次數(shù)多，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作，
比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會(huì)有這一步，
而如果你寫入組件中，你會(huì)發(fā)現(xiàn)在created中無(wú)法對(duì)chart進(jìn)行一些初始化配置，
一定要等這個(gè)html渲染完后才可以進(jìn)行，那么mounted就是不二之選。

3：兄弟組件 之間 傳值。

(1)通過(guò)eventBus

一般創(chuàng)建一個(gè)evenBus.js

   import Vue from "vue"
   export default new Vue()
   //新建vue實(shí)例

$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

創(chuàng)建store對(duì)象。

   import Vue from "vue";
   import Vuex from "vuex";
   
   Vue.use(Vuex);
   
   var store=new Vuex.Store({
       //存儲(chǔ)狀態(tài)
       state:{
           lists:[
               { name:"數(shù)學(xué)作業(yè)",isFinish:false },
               { name:"語(yǔ)文作業(yè)",isFinish:false },
               { name:"化學(xué)作業(yè)",isFinish:false },
               { name:"物理作業(yè)",isFinish:false }
           ]
       },
       //顯示的更改state
       mutation:{},
       //過(guò)濾state中的數(shù)據(jù)
       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實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）

view指的是頁(yè)面的html和css構(gòu)成的視圖。

model指的是從后端取到的數(shù)據(jù)模型。

viewmodel 指的是前端開發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。這一層包含的是視圖行為和數(shù)據(jù)。

vue通過(guò) Object.defineProperty()來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持。
它可以來(lái)控制一個(gè)對(duì)象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉。
這里我們主要先來(lái)研究下它對(duì)應(yīng)的兩個(gè)描述屬性get和set

實(shí)現(xiàn)mvvm主要包含兩個(gè)方面，數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)：

view更新data其實(shí)可以通過(guò)事件監(jiān)聽即可，比如input標(biāo)簽監(jiān)聽 "input" 事件就可以實(shí)現(xiàn)了。
所以我們著重來(lái)分析下，當(dāng)數(shù)據(jù)改變，如何更新視圖？

數(shù)據(jù)更新視圖的重點(diǎn)是如何知道數(shù)據(jù)變了，只要知道數(shù)據(jù)變了，那么接下去的事都好處理。
如何知道數(shù)據(jù)變了，其實(shí)上文我們已經(jīng)給出答案了，
就是通過(guò)Object.defineProperty( )對(duì)屬性設(shè)置一個(gè)set函數(shù)，
當(dāng)數(shù)據(jù)改變了就會(huì)來(lái)觸發(fā)這個(gè)函數(shù)，所以我們只要將一些需要更新的方法放在這里面就可以實(shí)現(xiàn)data更新view了。

5:Weex是什么？
(1) Weex是阿里開源的一套構(gòu)建跨平臺(tái)的移動(dòng)框架。
Weex 主要解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)

(2) 如何使用Weex？

第1步: 安裝node.js

第2步: 安裝weex-toolkit

第2步: 創(chuàng)建.we文件.Weex 程序的文件后綴（擴(kuò)展名）是.we。

https://blog.csdn.net/yangyan...

四： JS篇
1，JS繼承有幾種方式？

(1) 構(gòu)造函數(shù)綁定
例子： 現(xiàn)在有兩個(gè)類構(gòu)造函數(shù)

//動(dòng)物類
function Animal() {　　　　
    this.species = "動(dòng)物";　　
}
//貓類
function Cat(name, color) {　　　　
    this.name = name;　　　　
    this.color = color;　　
}

怎樣才能使"貓"繼承"動(dòng)物"的特性呢？
使用call或apply方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上，即在子對(duì)象構(gòu)造函數(shù)中加一行：

function Cat(name, color) {　　　　
    Animal.apply(this, arguments);　　　　
    this.name = name;　　　　
    this.color = color;　　
}　　
var cat1 = new Cat("大毛", "黃色");　　
alert(cat1.species); // 動(dòng)物

(2) 原型鏈繼承
即 子構(gòu)造函數(shù).prototype = new 父構(gòu)造函數(shù)()

 function Show(){
    this.name="run";
}

function Run(){
    this.age="20"; //Run繼承了Show,通過(guò)原型，形成鏈條
}
Run.prototype=new Show();
var show=new Run();
console.log("結(jié)果", show.name)//結(jié)果：run

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