前端闲谈
看完某课网的前端面试后总结,总的来说知识体系还是对我有帮助的,下面列出常见一些问题并解决
Es6
问:ES6 模块化如何使用,开发环境如何打包?
答:import 导入 ,export 导出 ,开发环境可用webpack ,rollup.js 模块打包工具
问: Es6的常用功能
答:let/const 多行字符串/模板变量 解构赋值 块级作用域 函数默认参数 箭头函数 (this)Promise: new Promise 实例,而且要return, new Promise 时要传入函数,函数有resolve reject 两个参数, 成功时执行 resolve() 失败时执行reject(), then 监听结果
原型
问:原型的实际应用
答:jQuery的原型应用
$.fn 存放原型方法,可扩展问:原型如何体现它的扩展性
答:$.fn.getNode = function() {......}4
异步
问: 什么是单线程,和异步有什么关系
答: 单线程 - 只有一个线程,只能做一件事
单线程原因 : 避免 DOM 渲染的冲突 (即两段js不能同时执行)
单线程的解决方案: 异步
问: 什么是 event-loop
答: 事件轮询,JS实现异步的具体解决方案:
同步代码,直接执行
异步函数先放在 异步队列 中
待同步函数执行完毕,轮询执行 异步队列 的函数
问:如何只用jQuery解决异步
答:jQuery 的 Deferred
问:Promise 的基本使用和原理
答:常用语法及Promise.race()和Promise.all()的使用
问:async ,await的使用
答: 同步promise使用,可用try catch 捕获异常
vdom
问:vdom是什么?为何会存在vdom?
答:1 virtual dom , 虚拟 DOM
用 JS 模拟 DOM 结构
2 DOM 变化的对比,放在 JS 层来做(图灵完备语言)
提高重绘性能
问:vdom的使用
答:snabbdom 库 (vdom 的实现)
核心API:h函数 patch函数
问:diff算法
答: 知道什么是 diff 算法,是 linux的基础命令
vdom 中应用 diff算法是为了找出需要更新的节点
实现,patch(container,vnode) 和 patch(vnode, newVnode)
核心逻辑,createElement 和updateChildren
vdom 找出本次 DOM 必须更新的节点来更新,其他的不更新
这个“找出”的过程,就需要 diff 算法
React组件化
问:说一下对组件化的理解
答: 组件的封装:封装视图、数据、变化逻辑
组件的复用:props 传递、复用
问:jsx的本质
答:JSX 其实是语法糖,开发环境会将 JSX 编译成 JS 代码, JSX 的写法大大降低了学习成本和编码工作量, 同时,JSX 也会增加 debug 成本 (React.createElement )
JSX 是独立的标准,可被其他项目使用
问:jsx和vdom的关系
答: 为何需要 vdom : JSX 需要渲染成 html,还有 rerender
React.createElement 和 h ,都生成 vnode
何时 patch: React.render(…) 和 setState
自定义组件的解析:初始化实例,然后执行 render
问:setState 的过程
答: 每个组件实例,都有 renderComponent 方法 (继承Component), 执行 renderComponent 会重新执行实例的 render, render 函数返回 newVnode ,然后拿到 preVnode, 执行 patch(preVnode, newVnode)
setState 是异步的
问:React vs vue
答:本质区别: vue - 本质是 MVVM 框架,由 MVC 发展而来,
React - 本质是前端组件化框架,由后端组件化发展而来
模板区别: vue - 使用模板(最初由 angular 提出)
React - 使用 JSX
组件化的区别: React 本身就是组件化,没有组件化就不是 React, vue 也支持组件化,不过是在 MVVM 上的扩展
共同点:都支持组件化,都支持组件化
----国内使用,首推 vue 。文档更易读、易学、社区够大,如果团队水平较高,推荐使用 React 。组件化和 JSX
hybrid
问:hybrid 是什么,为何会用 hybrid
答: hybrid 即“混合”,即前端和客户端的混合开发
hybrid 存在的核心意义在于快速迭代,无需审核