面试过程中被问到,项目中遇到的难题,或者有什么说的整理.

1.富文本编辑器, div contenteditable. + document.execelCommand.

光标问题,

  • div contenteditable嵌套,删除末尾的光标消失.处理方法,加一个image 1宽1高标签.但是又扯到后端返回值和数据校验问题,因为有个修改提示功能,要对比初始数据和改动数据是否一样,这个问题又扯到IE和chrome对于空格的处理不同.同样一段html,解析出来不一样.解析的原因是会将编辑好的文档传给后端,进入页面要解析这堆html和样式.
  • IE兼容问题,比如失焦事件需要手动触发.IE自动定位滚动到赋值的位置,开始用的scrolltop=0,但是画面撕裂,后来用先hide,赋值后,blur,再显示搞定.

    (3.先display:none 隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。IE中甚至可以让默认blur事件失效)

  • 整个结构是,wangEditor第三方基础组件源码(有改造,基础用excelCommond实现)–>richEditor封装一个基础输入框,配置项,change,blur事件处理.校验处理,第三方组件没有校验功能,show,hide,setContent,getContent,setText,getText->reminderEmail整个子组件,更加复杂,里面还有个联动时间计算处理校验规则以及切换页面时校验是否有改动的校验。对比后台数据,解析数据,以及页面数据。->外层还有个emailList,因为reminderEmail可以实时增删改,所以还有个List处理.->外层还有总控制的.包含另外一个部分.


  • 讲一下,对内版本使用jquery,所有组件自己开发(明天把封装的组件列一下,什么校验,弹窗,模态,下拉,表格,时间校验,附件,拖拽等等,iview,element库有的都要自己写一遍。)刀耕火种,所以如果iview,element,ant这种UI库做不了的都可以自己开发出来,比如复杂的Tree组件。Tree组件一般可以用链表写。
  • 对外是商业版本,直接上vue技术栈外加iview魔改UI库。对内对外除了核心模块,其他差异还是挺大的,对外的自定义,定制化需求更多,面向的公司更多。对内主要满足整个集团的使用,特点是邮件端。嵌入outlook,和微软外包部门合作开发。
  • 整个项目英文版方案,jquery实现.整个项目所有的地方都要用到,相当于实现一个i18n..而且实现的还比较优雅,并且对于模板渲染和JS应用都基本上一个common.lang.字段,就搞定.而且实现了按模块划分,使用便利,扩展性强.然后就是对整个项目的英文版本改造,样式,数据传输,数据枚举展示,map.一些复杂空间的英文版改造.比如24纬度,中文英文宽高不一样.
  • vue项目架构,文件结构目录,接口规范,vueconfig配置,eslint配置,mock配置,路由配置,导航菜单栏和路由配合,后端生成菜单解析.
  • 可以讲页面自动保存数据怎么做的,这玩意要自己先重温下,实在太复杂了.
  • 可以讲24纬度打分组件的实现.
  • 可以讲Popwin实现的思路.
  • 可以讲下 一个核心模块,年度计划的设计思路与实现.

个人能讲下的优点,特别善于分解目标和制定TodoList。基本上每天要做什么都有个TodoList,对于完成的目标划删除线有点上瘾。这样有好处,有些突然出现的Task,可能暂时正在完成一项比较连贯的任务,就可以先记录,等完成后再处理,这样不会忘记,也不会占用目前的脑子。有点像JS的事件循环机制哈哈。先完成主执行栈同步任务,任务队列增加代办事项,主栈完成后再处理事件。还有就是写月度汇报和总结就简单了,查阅一下组织下语言就能写了。

突然想到,通过v-show减少reflow来实现100+条可编辑卡片的滚动优化。视区内的显示,超出视区的隐藏,但是还占位置。涉及一个问题是校验问题。可以试试。

关于性能优化,必问的

前端性能优化最佳实践

https://csspod.com/frontend-performance-best-practices/

发表评论

邮箱地址不会被公开。