前端那些事

1、RN底層原理，爲何能夠媲美原生？　

　　React Native原理其實跟Weex差很少，底層也會把React轉換爲原生API。

　　RN須要一個JS的運行環境， 在IOS上直接使用內置的javascriptcore， 在Android 則使用webkit.org官方開源的jsc.so。

　　RN 會把應用的JS代碼（包括依賴的framework）編譯成一個js文件（通常命名爲index.android.bundle) , RN的總體框架目標就是爲了解釋運行這個js 腳本文件，若是是js 擴展的API， 則直接經過bridge調用native方法; 若是是UI界面， 則映射到virtual DOM這個虛擬的JS數據結構中，經過bridge 傳遞到native ， 而後根據數據屬性設置各個對應的真實native的View。 bridge是一種JS 和 JAVA代碼通訊的機制， 用bridge函數傳入對方module 和 method便可獲得異步回調的結果。

　　React Native會在一開始生成OC模塊表，而後把這個模塊表傳入JS中，JS參照模塊表，就能間接調用OC的代碼。

2、react 底層原理。

　　React爲此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併。

3、vue底層原理。

1. Observer：可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者。Observer的核心是經過Obeject.defineProperty()來監聽數據的變更，這個函數內部能夠定義setter和getter，每當數據發生變化，就會觸發setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher
2. Compile：對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。Compile主要作的事情是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖。
3. Watcher：做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖。

4、如何用vue處理超長無限滾動列表。

　　在一個數據量比較大的狀況下，頁面元素會增長得很快，這時就會致使性能問題。

　　可從如下思路去優化：

　　1.何時開始刪除元素，何時把刪了的元素顯示回來，保持頁面顯示元素條數不變。

　　2.保持長列表高度不變，避免滾動條閃動。

　　3.新建一個data 數組，截取數組的開始到結束位置而後渲染。

5、js promise異步回調問題。

　　Promise 對象表明一個異步操做，其不受外界影響，有三種狀態：

　　Pending（進行中、未完成的）

　　Resolved（已完成，又稱 Fulfilled）

　　Rejected（已失敗）。

　　用Promise主要解決如下問題：

　　1.解決異步層層嵌套問題，用then（）方法：

//作飯
function cook(){
    console.log('開始作飯。');
    var p = new Promise(function(resolve, reject){        //作一些異步操做
        setTimeout(function(){
            console.log('作飯完畢！');
            resolve('雞蛋炒飯');
        }, 1000);
    });
    return p;
}
 
//吃飯
function eat(data){
    console.log('開始吃飯：' + data);
    var p = new Promise(function(resolve, reject){        //作一些異步操做
        setTimeout(function(){
            console.log('吃飯完畢!');
            resolve('一塊碗和一雙筷子');
        }, 2000);
    });
    return p;
}
 
function wash(data){
    console.log('開始洗碗：' + data);
    var p = new Promise(function(resolve, reject){        //作一些異步操做
        setTimeout(function(){
            console.log('洗碗完畢!');
            resolve('乾淨的碗筷');
        }, 2000);
    });
    return p;
}

cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    return wash(data);
})
.then(function(data){
    console.log(data);
});

　　2.解決同步併發處理問題，用all（）方法：

//切菜
function cutUp(){
    console.log('開始切菜。');
    var p = new Promise(function(resolve, reject){        //作一些異步操做
        setTimeout(function(){
            console.log('切菜完畢！');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}
 
//燒水
function boil(){
    console.log('開始燒水。');
    var p = new Promise(function(resolve, reject){        //作一些異步操做
        setTimeout(function(){
            console.log('燒水完畢！');
            resolve('燒好的水');
        }, 1000);
    });
    return p;
}
 
Promise
.all([cutUp(), boil()])
.then(function(results){
    console.log("準備工做完畢：");
    console.log(results);
});

　　

6、vuex原理

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化.

　　有待補充。。。