前端面试100问（22-30）

第22题：介绍下重绘和回流（Repaint&Reflow），以及如何进行优化？

答：关于重绘和回流

第23题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景？

答：观察者模式和发布订阅模式

第24题：聊聊Redux和Vuex的设计思想？

答：

把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

组件不允许直接修改属于store实例的state，组件必须通过action来改变state

第25题：说说浏览器和Node事件循环的区别？

答：

其中一个主要区别在于浏览器的event loop和nodejs的event loop在处理异步事件的顺序上是不同的。nodejs中有micro event;其中promise属于micro event，该异步事件的处理顺序就和浏览器不同。

nodejs v11.0以上版本，这两者之间的顺序就相同了。

第26题：介绍模块化发展历程

模块化是用来抽离公共代码，隔离作用域，避免变量冲突等。

IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

AMD：使用requireJS来编写模块化，特点：依赖必须提前声明好。

CMD：使用seaJS来编写模块化，特点：支持动态引入依赖文件。

CommonJS：nodejs中自带的模块化

UMD：兼容AMD，CommonJS模块化语法

webpack(require.ensure)：webpack 2.x版本中的代码分割

ES Modules：ES6引入的模块化，支持import来引入另一个js

第27题：全局作用域中，用const和let声明的变量不在window上，那到底在哪里？如何去获取？

答：

在ES5中，顶层对象的属性和全局变量是等价的，var命令和function命令声明的全局变量，自然也是顶层对象。

但ES6规定，var命令和function命令声明的全局变量，依旧是顶层对象的属性，但let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

在哪里？在一个块级作用域（Script）里

怎么获取？在它所在的作用域中直接获取，比如，let a = 0; console.log(a)

第28题：cookie和token都存放在header中，为什么不会劫持token?

答：浏览器会自动带上cookie，不会自动带上token

第29题：聊聊Vue的双向数据绑定，Model如何改变View,View又是如何改变Model的？

答：核心是利用ES5的Object.defineProperty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="input" type="text">
    <div id="text"></div>

    <script>
        let input = document.getElementById("input")
        let text = document.getElementById("text")
        let data = { value: "" }
        Object.defineProperty(data, "value", {
            set: function (val) {
                text.innerHTML = val;
                input.value = val;
            },
            get: function () {
                return input.value
            }
        });
        input.onkeyup = function (e) {
            data.value = e.target.value;
        }
    </script>
</body>
</html>

来自：Forever17s

第30题：两个数组合并成一个数组

请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

答：

var arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'];
var arr2 = ['A', 'B', 'C', 'D'];

var arr3 = arr2.map(item => item + 3)

var arr4 = [...arr1, ...arr3].sort().map(item => {
    if (item.includes('3')) {
        return item.split('')[0]
    }
    return item;
})

console.log(arr4);
// ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']