2024年最新大厂编程规范--6，前端社招面试题

2401_84446712

于 2024-05-07 18:51:48 发布

阅读量551

点赞数 30

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84446712/article/details/138541796

版权

程序员专栏收录该内容

160 篇文章 0 订阅

订阅专栏

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。

怎么做？

组件的每一个属性单独使用一个 props，并且使用函数或是原始类型的值。

<range-slider

:values=“[10, 20]”

:min=“0”

:max=“100”

:step=“5”

@on-slide=“updateInputs”

@on-end=“updateResults”>

↑ 回到目录

验证组件的 props

在 Vue.js 中，组件的 props 即 API，一个稳定并可预测的 API 会使得你的组件更容易被其他开发者使用。

组件 props 通过自定义标签的属性来传递。属性的值可以是 Vue.js 字符串(:attr="value" 或 v-bind:attr="value")或是不传。你需要保证组件的 props 能应对不同的情况。

为什么？

验证组件 props 可以保证你的组件永远是可用的（防御性编程）。即使其他开发者并未按照你预想的方法使用时也不会出错。

怎么做？

提供默认值。
使用 type 属性校验类型。
使用 props 之前先检查该 prop 是否存在。

↑ 回到目录

将 this 赋值给 component 变量

在 Vue.js 组件上下文中，this指向了组件实例。因此当你切换到了不同的上下文时，要确保 this 指向一个可用的 component 变量。

换句话说，如果你正在使用 ES6 的话，就不要再编写 var self = this; 这样的代码了，您可以安全地使用 Vue 组件。

为什么？

使用 ES6，就不再需要将 this 保存到一个变量中了。
一般来说，当你使用箭头函数时，会保留 this 的作用域。（译者注：箭头函数没有它自己的 this 值，箭头函数内的 this 值继承自外围作用域。）
如果你没有使用 ES6，当然也就不会使用 箭头函数 啦，那你必须将 “this” 保存到到某个变量中。这是唯一的例外。

怎么做？

↑ 回到目录

组件结构化

按照一定的结构组织，使得组件便于理解。

为什么？

导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。
按首字母排序 properties、data、computed、watches 和 methods 使得这些对象内的属性便于查找。
合理组织，使得组件易于阅读。（name; extends; props, data 和 computed; components; watch 和 methods; lifecycle methods 等）。
使用 name 属性。借助于 vue devtools 可以让你更方便的测试。
合理的 CSS 结构，如 BEM 或 rscss - 详情？。
使用单文件 .vue 文件格式来组件代码。

怎么做？

组件结构化

↑ 回到目录

组件事件命名

Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组件的每一个事件都应该按照一个好的命名规范来，这样可以避免不少的开发问题，具体可见如下 为什么。

为什么？

开发者可以随意给事件命名，即使是原生事件的名字，这样会带来迷惑性。
过于宽松的事件命名可能与 DOM 模板不兼容。

怎么做？

事件名也使用连字符命名。
一个事件的名字对应组件外的一组意义操作，如：upload-success、upload-error 以及 dropzone-upload-success、dropzone-upload-error （如果需要前缀的话）。
事件命名应该以动词（如 client-api-load）或是名词（如 drive-upload-success）结尾。（出处）

↑ 回到目录

避免 this.$parent

Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访问组件之外的上下文违反了基于模块开发的第一原则。因此你应该尽量避免使用 this.$parent。

为什么？

组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。
如果一个组件需要访问其父组件的上下文，那么该组件将不能在其它上下文中复用。

怎么做？

通过 props 将值传递给子组件。
通过 props 传递回调函数给子组件来达到调用父组件方法的目的。
通过在子组件触发事件来通知父组件。

↑ 回到目录

谨慎使用 this.$refs

Vue.js 支持通过 ref 属性来访问其它组件和 HTML 元素。并通过 this.$refs 可以得到组件或 HTML 元素的上下文。在大多数情况下，通过 this.$refs来访问其它组件的上下文是可以避免的。在使用的的时候你需要注意避免调用了不恰当的组件 API，所以应该尽量避免使用 this.$refs。

为什么？

组件必须是保持独立的，如果一个组件的 API 不能够提供所需的功能，那么这个组件在设计、实现上是有问题的。
组件的属性和事件必须足够的给大多数的组件使用。

怎么做？

提供良好的组件 API。
总是关注于组件本身的目的。
拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码，那么代表这个组件的 API 不够通用，或者你可能需要一个新的组件来应对该需求。
检查所有的 props 是否有缺失的，如果有提一个 issue 或是完善这个组件。
检查所有的事件。子组件向父组件通信一般是通过事件来实现的，但是大多数的开发者更多的关注于 props 从忽视了这点。
Props向下传递，事件向上传递！。以此为目标升级你的组件，提供良好的 API 和独立性。
当遇到 props 和 events 难以实现的功能时，通过 this.$refs来实现。
当需要操作 DOM 无法通过指令来做的时候可使用 this.$ref 而不是 JQuery、document.getElement*、document.queryElement。

<range :max=“max”

:min=“min”

@current-value=“currentValue”

:step=“1”>

Basic Modal

<button class=“primary” @click=“$refs.basicModal.hide()”>Close

<button @click=“$refs.basicModal.open()”>Open modal

<range :max=“max”

:min=“min”

ref=“range”

:step=“1”>

↑ 回到目录

使用组件名作为样式作用域空间

Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作用域空间。可以将组件名作为 CSS 类的命名空间。

为什么？

给样式加上作用域空间可以避免组件样式影响外部的样式。
保持模块名、目录名、样式根作用域名一样，可以很好的将其关联起来，便于开发者理解。

怎么做？

使用组件名作为样式命名的前缀，可基于 BEM 或 OOCSS 范式。同时给 style 标签加上 scoped 属性。加上 scoped 属性编译后会给组件的 class 自动加上唯一的前缀从而避免样式的冲突。

↑ 回到目录

提供组件 API 文档

使用 Vue.js 组件的过程中会创建 Vue 组件实例，这个实例是通过自定义属性配置的。为了便于其他开发者使用该组件，对于这些自定义属性即组件API应该在 README.md 文件中进行说明。

为什么？

良好的文档可以让开发者比较容易的对组件有一个整体的认识，而不用去阅读组件的源码，也更方便开发者使用。
组件配置属性即组件的 API，对于组件的用户来说他们更感兴趣的是 API 而不是实现原理。
正式的文档会告诉开发者组件 API 变更以及向后的兼容性情况。
README.md 是标准的我们应该首先阅读的文档文件。代码托管网站（GitHub、Bitbucket、Gitlab 等）会默认在仓库中展示该文件作为仓库的介绍。

怎么做？

在模块目录中添加 README.md 文件：

range-slider/

├── range-slider.vue

├── range-slider.less

└── README.md

在 README 文件中说明模块的功能以及使用场景。对于 vue 组件来说，比较有用的描述是组件的自定义属性即 API 的描述介绍。

Range slider

============

功能

–

range slider 组件可通过拖动的方式来设置一个给定范围内的数值。

该模块使用 noUiSlider 来实现跨浏览器和 touch 功能的支持。

如何使用

<range-slider> 支持如下的自定义属性：

| attribute | type | description |

| — | — | — |

| min | Number | 可拖动的最小值. |

| max | Number | 可拖动的最大值. |

| values | Number[] optional | 包含最大值和最小值的数组. 如. values="[10, 20]". Defaults to [opts.min, opts.max]. |

| step | Number optional | 增加减小的数值单位，默认为 1. |

| on-slide | Function optional | 用户拖动开始按钮或者结束按钮时的回调函数，函数接受 (values, HANDLE) 格式的参数。如：on-slide={ updateInputs }, component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }. |

| on-end | Function optional | 当用户停止拖动时触发的回调函数，函数接受 (values, HANDLE) 格式的参数。 |

如需要自定义 slider 的样式可参考 noUiSlider 文档

↑ 回到目录

提供组件 demo

添加 index.html 文件作为组件的 demo 示例，并提供不同配置情况的效果，说明组件是如何使用的。

为什么？

demo 可以说明组件是独立可使用的。
demo 可以让开发者预览组件的功能效果。
demo 可以展示组件各种配置参数下的功能。

↑ 回到目录

对组件文件进行代码校验

代码校验可以保持代码的统一性以及追踪语法错误。.vue 文件可以通过使用 eslint-plugin-html插件来校验代码。你可以通过 vue-cli 来开始你的项目，vue-cli 默认会开启代码校验功能。

为什么？

保证所有的开发者使用同样的编码规范。
更早的感知到语法错误。

怎么做？

为了校验工具能够校验 *.vue文件，你需要将代码编写在 <script> 标签中，并使组件表达式简单化，因为校验工具无法理解行内表达式，配置校验工具可以访问全局变量 vue 和组件的 props。

ESLint

ESLint 需要通过 ESLint HTML 插件来抽取组件中的代码。

通过 .eslintrc 文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项：

{

“extends”: “eslint:recommended”,

“plugins”: [“html”],

“env”: {

“browser”: true

“globals”: {

“opts”: true,

“vue”: true

}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5