2020年8月12日 面经

一、flex布局有哪些常用的属性

flex容器

1. flex-direction 主轴的方向。row水平和column垂直
2. flex-wrap 换不换行。nowarp不换行
3. flex-flow是flex-direction和flex-wrap的简写 默认水平不换行
4. justify-content 在主轴上的对齐方式 左 右 居中 between两端 around项目两侧间隔相等
5. align-items 在交叉轴上的对齐方式 起点 终点 居中 基线 默认stretch
6. align-content 在多根轴线上的对齐方式 如果只有一根轴线 该属性不起作用

item项目

1. order 项目的排列顺序 数值越小越靠前 默认0
2. flex-grow 定义项目的放大比例 默认0 如果每个都为1 则平分剩余空间
3. flex-shrink 定义了项目的缩小比例 默认为1 如果一群1里有一个0 0不变 1缩小
4. flex-basis 定义了在分配多余空之前项目占据主轴的空间 类似width可以设置固定空间
5. flex flex-frow flex-shrink和flex-basis的缩写
6. align-self 项目的对齐方式 默认auto 其他和align-item属性完全一致

二、JS中常用的设计模式

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。

1. 工厂模式
工厂模式定义了一个用于创建对象的接口，用户只负责传递需要的参数，不需要关心内部的逻辑，隐藏了创建实例的复杂度，最后返回一个实例。
2. 单例模式
单例模式是指在内存中只会创建且仅创建一次对象的设计模式。单例模式很常用，比如全局缓存、全局状态管理等等这些只需要一个对象，就可以使用单例模式。比如Redux Vuex的store。
3. 观察者模式
观察者模式又称发布-订阅模式
观察者模式中一般都需要实现三个接口：subscribe(): 接收观察者，使其订阅；unsubscribe(): 取消订阅；fire(): 触发事件，通知到所有观察者。
4. 装饰器模式
装饰模式不需要改变已有的接口，他的作用是给对象添加功能。比如react里的高阶组件。
5. 适配器模式
适配器用来解决两个接口不兼容的情况，不需要改变已有的接口，通过包装一层的方式实现两个接口的正常协作。我们其实经常使用到适配器模式。比如父组件传递给子组件一个属性，组件内部需要使用 computed 计算属性来做些处理，这个过程就使用到了适配器模式。

三、Vue中template的编译过程

浏览器中是不能直接解析template模板的，Vue会通过编译器将模板经过几个阶段最终编译为render函数，然后执行render函数生成虚拟DOM，最终映射为真实 DOM。在编译过程中主要分为三个阶段：
在第一个阶段中，主要通过各种正则表达式去匹配模板中的内容，然后将内容提取出来做各种逻辑操作，之后生成一个最基本的 AST 对象。然后会根据这个AST 对象中的属性，进一步扩展 AST。在这一阶段中，还会进行一些基本的判断逻辑。比如说对比前后开闭标签是否一致，判断根组件是否只存在一个等。
接下来就是优化 AST 的阶段。比如对节点进行了静态内容提取，也就是将不会变动的节点提取出来，实现复用虚拟DOM，跳过对比算法的功能。
最后一个阶段就是通过遍历整个 AST对象生成 render 函数了。

四、React事件机制？

React 其实自己实现了一套事件机制，在我们对某个dom元素绑定事件时，JSX 上写的事件并没有直接绑定在对应的真实 DOM 上，而是使用事件代理的方式将所有的事件都统一绑定在了document上，通过事件冒泡去触发。而冒泡到document上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件，使用合成事件的好处有两点，分别是：

1. 合成事件首先解决了浏览器之间的兼容问题。
2. 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，这样就减少了内存的消耗。

五、React-router-dom内部是怎么实现的，怎么实现路由守卫？

React Router中有三种类型的组件：
使用创建一个专门的history对象，并注册监听事件。
使用匹配的path，并渲染匹配的组件。
使用创建一个链接跳转到你想要渲染的组件。

1. 使用BrowserRouter render一个Router时创建了一个全局的history对象，并通过props传递给了Router，而在Router中通过history库中的listen设置了一个监听函数，触发的回调里面进行了setState向下传递 nextContext。
2. 当点击页面的Link是，其实是点击的a标签，只不过使用了 preventDefault 阻止 a 标签的页面跳转；通过给a标签添加点击事件去执行 hitsory.push()。
3. 路由改变是会触发 Router 的 setState 的，每次路由变化都会触发顶层 Router 的监听事件，Router 触发 setState再向下传递新的nextContext。
4. Route 接受新的 nextContext 通过 matchPath 函数来判断 path 是否与 location 匹配，如果匹配则渲染，不匹配则不渲染。
   路由守卫 react-router并没有和vue-router一样提供一些钩子函数，所以需要在render函数里自己判断

六、小程序与普通网页开发的区别

网页开发渲染线程和脚本线程是互斥的，而在小程序中，两者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。