广州正盟科技 -- 前端面试-- 2023.4.21

广州正盟科技 – 前端面试 – 4.21

首先 进来后就让你写一份笔试，然后笔试完后，让你休息一下，然后就开始技术面了
笔试的话，就是一些前端的基础知识htmlcssjs，我只记得有个正则表达式的我不会写，其他也挺简单的，所以就忘记了。
然后就是技术面，技术面主要是根据你项目来问的，我也步步深入，还是挺难的。

1 为什么用leaflet，leaflet绘图是用的canvas吗 创建出来的图层还真是canvas图层 ；为什么不用高德还有百度，你底下的地图也是引的高德的地图，为什么不使用他们提供的api
Leaflet是一个轻量级的开源JavaScript库，用于在Web上创建交互式地图应用程序。它有以下几个优点：
轻量级：Leaflet体积小、速度快，不需要依赖其他库即可使用。
易于使用：Leaflet提供了简单易用的API和文档，可以帮助开发人员快速创建自定义地图应用程序。
兼容性好：Leaflet支持多种Web浏览器，并且可以运行在移动设备上。
扩展性强：Leaflet拥有庞大的插件生态系统，可以扩展其功能并适应各种需求。
相比之下，高德和百度地图虽然也是广泛使用的地图服务提供商，但它们存在一些缺点：
限制较多：高德和百度地图都有自己的API和使用限制，对于某些商业应用可能会有使用上的限制。
依赖性强：使用高德或百度地图通常需要引入它们的JavaScript库，增加了Web应用程序的依赖性。
隐私问题：高德和百度地图会收集用户位置等数据，存在一定的隐私问题。
可定制性不够：高德和百度地图提供了一些定制化的功能，但相对于Leaflet来说可能还是不够灵活。
综上所述，使用Leaflet可以带来更轻量、灵活和易用的地图解决方案，同时也有较好的兼容性和扩展性。而高德和百度地图则更适合在某些特定场景下使用，例如需要使用它们独有的地图数据或功能时。
2 dataease你做了什么，有看过它的源码吗
我主要是基于dataease进行一些功能的追加，比如公司通过项目的积累里面已经拥有了自己的3套echart主题样式，我通过新增一个主题样式模块，然后点击不同主题样式让生成的图表都是符合改主题样式的图表。公司中的主题样式也是抽离出一个主题的js文件，里面就是改主题样式的基本配置，然后通过和dataease生成图表的配置项进行合并，生成对应我们需要的图表。还有就是通过新增了一个类似echart官网的在线代码编辑工具，左边视图右边实时修改代码。这里后续被问到了如何不用eval执行一段js代码或js函数。
3 echart是用的canvas绘制的吗
是的。
4 canvas是什么
这个就百度吧，h5的一个新特新，可以提供一系列的api给我们绘图。
5 dataease右边写option左边显示对应样式，在线代码编辑是怎么实现的
一开始我想的是左右组件的通信，说的是将右边的options对象传递到左边去做显示，但是后面其实想要的是如何执行一段js代码
6 我想做一个右边写js代码，左边显示对应结果要怎么实现（一段字符串里面写了一个函数，怎么让这个函数执行）
7 组件通信有哪些
1.props emit 2.$attrs/$listeners 3.$parent/$children
4.provide / inject 5.ref / $refs6.eventBus7.Vuex8.localStorage/sessionStorage8怎么让浏览器执行一段字符串包裹的js代码不用eval，不安全constfn=newFunction(‘alert{(}^{\prime }11111^{\prime })‘)9实现一个eventbus，以及eventbus的原理一开始我回答的是在使用上，我们通常通过newvue()，然后利用vue实例上面提供的$on 和 $emit实现一个事件监听和触发的方式。后面要求我自己写一个eventbus，相当于eventbus原理，我就想到了学vue的时候接触到的发布订阅模式。思考了一会后就拿vue中的那套依赖收集和依赖触发的模式和面试官交流了一下，我们会有一个eventbus的一个类，然后这个类会实现$on & $emit这两个方法，在使用者用$on监听的时候，我们会将$on中的函数收集起来，当项目中哪里用$emit触发的时候，就拿出对应的监听函数去执行。
10 App安全区的概念
这个我直接就说没了解过了，确实没接触过，ChatGPT说App安全区是指移动设备屏幕上一个可视区域，不包括屏幕的边缘和圆角。这个安全区域是为了避免应用程序内容被屏幕边缘和圆角覆盖而留下的一块安全区域。
11 有没有用过sticky布局
我一般只有fixed所以，也说没怎么用过
12 renderjs做了什么？renderjs是怎么实现在uniapp端去使用到浏览器端的内置对象的，原理是什么？
当时做项目的时候碰到需要在uniapp上使用到window对象，但是测试的时候在app上获取不到window对象，所以只能通过renderjs层去操作window对象，并且做数据处理，然后在通过renderjs提供的api方式将处理好的数据传回到uniapp层。
至于renderjs是怎么实现在uniapp端去使用到浏览器端的内置对象的，原理是什么？APP端renderjs层的怎么通知到原生层的？这个我也确实不知道，搜了一下说是通过webview的事件机制去实现的，但是其实当时我了解的时候其实也是抱着解决问题的心理的，也没去看他是什么原理。
（这个当时遇到问题解决问题的地址添加链接描述）
WebView是Android操作系统中内置的一个嵌入式浏览器控件–事件机制
13 uniapp都有对应json文件的配置跳转了，为什么还引入vuerouter？
虽然 pages.json 配置文件能够满足大多数应用程序的需求，但对于一些需要更灵活的路由跳转场景，例如传递参数、动态路由等，就需要使用Vue Router来进行路由管理。
14 uniapp的跳转是怎么实现的，原理是什么？
Uniapp 和 Vue 在路由方面有相似之处，因为 Uniapp 是基于 Vue 的。Uniapp 的路由系统是通过 Vue Router 实现的
15 uniapp怎么实现动态修改头部的标题 uni.setNavigationBarTitle
16 有没有了解过native
17 const readonly区别
18 使用过的打包工具
19 打包配置生成esm udm sea.js怎么配置 require和import的区别
20 这三种格式的js有什么区别
21 esm 和 commjs区别
22 web端和客户端的开发区别 客户端指的是APP端
23 ts接口和泛型