觉晓科技——前端笔试（2022.4.6）

觉晓科技公司前端笔试记录

时间：70分钟，题型：15道选择（有多选单选）、3道简述题、两道编程题

---

一、选择题

1. 比较简单，是和前端知识相关
   如：js实现继承的方法、display:none和visibility:hidden的区别、元素选择符的权重等。

---

二、简述题

1. sessionStorage、localStorage和cookie之间的区别。
   共同点：都是保存在浏览器端、且同源的
   区别：
   （1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
   （2）存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
   （3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 。
   （4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
   （5）web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
   （6）web Storage的api接口使用更方便。
2. Vue里实现组件通信的方式有哪些。
   （1）props / $emit：父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。
   （2）$emit / $on：这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
   （3）vuex。
   （4）$attrs /$listeners。
   （5）provide/inject。
   （6）$parent / $children＆ref。
   总结
   常见使用场景可以分为三类：
   父子通信： 父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（ $parent / $children）；ref 也可以访问组件实例；provide / inject API；attrs / attrs/attrs/listeners。
   兄弟通信： Bus；Vuex。
   跨级通信： Bus；Vuex；provide/inject API、attrs /attrs/attrs/listeners。
3. 描述webpack的核心概念以及编译过程。
   （1）六个核心概念：
   Entry，入口，这是Webpack执行构建的第一步，可理解为输入。
   Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。 Webpack会从Entry开始递归找出所有的依赖模块。
   Chunk，代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割。
   Loader，模块转换器，用于将模块的原内容按照需求转换成新内容。
   Plugin，扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果。
   Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果。
   （2）Webpack构建流程：Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。

---

三、编程题

1. 实现一个函数，把一个由-或_或@连接的变量词转换成驼峰形式。

//由-或_或@连接的变量词转换成驼峰形式
function trans(msg){
   
    let reg = msg.replaceAll('_','-');
    reg = reg