前端那些事

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 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.

　　有待补充。。。