项目面
基于项目面试的一些心得
- 先讲它是什么（讲完即止，让面试官掌握节奏，避免面试时间过长）
- 背景
- 什么作用
- 技术栈
- 为什么选择这些技术栈
- 怎么做
- 如何维护，扩展
讲的时候一定要清晰，有条理，能让人知道用这个东西的原因，效果。
接口代码生成工具
- 是个什么东西：是一个用利用 swagger 文档数据生成的，给前端调用的接口代码，
- 为什么做这个东西，那就说一下背景…
- 接口太多，项目中接口的管理太混乱，那为了开发时不关注这些接口的文件位置、怎么取函数名、维护类型。通过一个插件一键生成在项目中规定的位置，规范文件结构，自动生成类型，函数名，注释等等，解决了接口管理问题与接口代码解耦，可以提高开发效率
- 怎么做的，讲难点…
- 文件结构，由 swagger 的 tags 也就是后端一个 control 作为一份 service 文件，文件名为这个 control 的名字，里面包括了这个 control 的接口
- 函数名的生成，由 swagger 中 paths 生成，接口地址转换驼峰
- 类型声明生成，根据 swagger 入参，responese 中的 type 或者 schame 的描述，复杂类型利用 schame 的标识生成一个文件，用 import 引入
- 怎么使用…
- 在项目根目录提供一个配置 js 文件，里面包含了可以配置 swagger 地址，以及要生成的接口范围，排除范围，生成的文件放在哪等配置
- 使用 package.json、script 命令启动
- 可以如何扩展…
- 可以扩展其他的接口文档，比如 yapi
- 可以扩展到编写 vscode 的插件
- 可以加一些功能比如、根据项目 eslint 修复代码风格
vue 的业务脚手架
- 是个什么东西： 是一个基于 vue-cli preset 工具实现的远程代码模板，这个模板包括了根据部门情况定制的一套规范代码结构，文件结构
- 为什么要做？…
- 第一，因为之前可能团队更多的项目是 angular 开发的，为了保持一个文件和代码结构的一致性，去模仿他的结构，让团队顺滑切换 vue 和 angular
- 第二，快速响应需求，因为我们负责的一个系统是，一种 iframe 嵌套的微前端，不同的功能模块那就有可能需要频繁的创建一个新的项目
- 第三，可以关注社区情况，及时去更新维护自己的一个框架结构，后面就可以使用比较新的技术点了
- 怎么使用，那就简单描述生成的流程…
- 首先是执行命令 vue create –preset 远程地址
- 那我们的模板仓库有包含四样东西,
template,generator.js,prompts.js,preset,json - 命令执行之后会先执行 prompt.js 让用户选择环境
- 再执行
generator.js, 暴漏render接口 - 将
render传入tempalte
基于 stencil 下拉组件
- 是个什么东西： 是一个包含用户所拥有权限的平台列表点击可跳转的自定义下拉选择框，类似
dropDown
- 什么是平台呢？那就说一下背景….
- 是这样的背景： 像我们电商的有商品管理列表，运营了很多个平台（亚马逊，shopee 等）的商品列表，用户呢，想要在里面的列表去实现不同平台列表之间跳转
- 怎么做呢？ 那就说一下项目从里到外，挑难点讲，说一遍….
- 首先要有两个接口，一个所有平台的页面地址，另一个是用户拥有的权限平台，这样可以使下拉框展示的是用户所有用权限的平台。
- 第二是要实现下拉展开，和上拉收起的动画，使用了鼠标移入移除事件，利用
setInterval监听 - 第三是要处理边界情况，比如用户未登录提示，用户没权限提示，下拉框的最大高度不能超过浏览器可视区
- 第四是打包发布，要分为两种发布，一种是 npm 包形式，一种网络资源的访问方式（给前后端不分离的项目用）
- 怎么使用？
- 自动注册了
webcomponent，像我们正常使用的组件一样
- 选择的技术
- 查了资料：有一个
ionic-team正在做webcomponent的工程，他有一个stencil的框架，他是基于webcomponent的框架，提供了一套很好的方案
- 为什么选这个呢？
一，体积小
二，运行时性能高
三，标准，面向未来
四，与 angular 写法相似，团队较容易容纳
五，引入新的技术，提高团队学习热情
六，可以接纳不同的技术栈
- 相对于
vue，angular所提供的webcomponent，他们是需要本身框架的支持，也就是说想要用那就得引入他们的框架，也就会造成一个组件体积比较大的问题，通过相同组件去打包对比大小。 - 性能用
performance工具 查看script和render执行时间 - 采用了
jsx、typescript、Virtual Dom，弥补webcomponent不能传对象问题
基于 ng-ant-desgin 组件库
- 主要的职责？
- 将部门不同版本的组件收集，并将发布
使用 json，ast 配置快速生成页面
keepeact 框架
- 是什么？
是一个小型 mvvm 框架，使用jsx开发，为开发者提供一套声明式框架，最终将组件挂载到jq的扩展方法上。使用框架时需要依赖jq。 - 背景
是什么背景会去产生这个框架的？为什么vue，angular等不行？
jq等旧页面需要前端提供组件，或者需要和新页面统一组件，比如：多选框，平台选择框
vue和angular都行，都有自定义元素的功能，但是打包出来的体积vue大概有app+vendors大概有100kb，并且定位是组件库，有大材小用嫌疑。 - 优点
- 声明式
- jsx，tsx面向未来
- 有diff算法支持，性能有保障
- 缺点
- 需要手动update，无自动依赖收集
- 难点
- 如何利用jq扩展
- 如何定制生命周期
beforeMount
|
mount
|
mounted
|
writeValue
|
valueChange - patch原理
- 如何通讯