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

一： 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...