收钱吧
面试题
1.你的工作经历以及你在工作中学到了什么
2.自己搭建过webpack吗,一般分为那几个环境,开发环境主要配置哪些。webpack的loader和plugin的区别
3.babel的作用
4.如何生成一个1-10的随机数 Math.floor(Math.random()*10+1)
5.你认为sso是怎样实现的
6.箭头函数和普通函数的区别
7.var let const的区别
8.js的基本类型,内置对象有哪些
9.工作中运用js还是ts,对ts有了解吗
10.有用过fetch api吗
11.有了解commonjs 和AMD 等之类的
- HTTP有哪些状态码
13.px,rem,em的区别
14.你为什么选择前端这个岗位
聊聊面试题
2.webpack的loader和plugins的区别
loader(文件加载器):能够加载资源文件,并对资源文件进行一系列的处理,比如压缩和编译等。最终一起打包到指定文件中。对模块源码的转换,对loader描述了webpack如何处理非JavaScript模块,并引入到bulid模块,loader可以将不同的语言(TypeScript)转成JavaScript,或者将内联图像转成data URL。比如(css-loader,style-loader)
plugins(插件):解决loader无法解决的问题。从打包优化到压缩,到重新定义环境变量。plugin是一个扩展器,它丰富了wepack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务
3.babel是一个JS编译器
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)
6.箭头函数和普通函数的区别
普通函数的this总是指向调用它的那个对象。
箭头函数没有自己的this,指向定义时所在的对象,而不是使用时的对象。
不可以当做构造函数,也就是说,不可以使用new。
不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替。
不可以使用yield命令,因此箭头函数不能用作Generator函数。
8.js的基本数据和内置对象
基本数据:Boolean、null、undefined、String、Number、symbol
内置对象:Array对象、Date对象、string对象、正则表达式对象、Global对象
12.HTTP的状态码
1xx 信息提示
2xx 请求成功
3xx 请求重定向
4xx 客户端请求错误
5xx 服务器错误
13.px、rem、em的区别
px: (像素),相对长度单位。px是相对于显示器屏幕分辨率。
em: 相对长度单位。相对于对象内文本的字体大小,如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
em的特点:
1.em值并不是固定的
2.em会继承父级元素的字体大小
1em = 16px
rem: 相对单位
与em的区别在于rem相对的只是HTML根元素。
菜鸟
面试问题
1.先做一下自我介绍,以及工作中的技术栈
2.css垂直水平居中有哪些方式
3.css的弹性布局,那些是container的属性,哪些是item的属性
4.positon的定位有哪些,fixed和absolute的区别,默认是什么
5.简述一下盒模型
6.简述一下原型链
7.用过ES6的哪些方法
8.描述一下this
9.异步处理有哪些方式
10.webpack打包主要做了什么,用过哪些loader
11.描述一下vue的原理,react和vue有什么区别
12.sass、less、css的区别
13.echarts常用了哪些配置,eslint常用了哪些配置
14.说一下rem
15.聊项目上的问题
16.你觉得你最擅长什么
聊聊面试题
2.css垂直水平居中有哪些方式
1.display: flex
.parent {
display: flex;
justify-content: center;
align-item: center
}
2.position
.parent {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
/*
margin-left: -50px;
margin-top: -50px
*/
// 或者
transform: translateX(-50%) translateY(-50%);
}
3.弹性布局flex
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
<!--container的属性-->
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse // 排列方式
justify-content: flex-start | flex-end | center | space-between | space-around // 横轴的对齐方式
align-items: : flex-start | flex-end | center | baseline | stretch // 纵轴的对齐方式
flex-wrap: //设置弹性盒子的子元素超出父容器时是否换行。
align-content: //修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flow: flex-direction 和 flex-wrap 的简写
}
<!--item的属性-->
.flex-item: {
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]// 子元素如何分配
/**
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none:计算值为 0 0 auto
inherit:从父元素继承
[ flex-grow ]:定义弹性盒子元素的扩展比率。
[ flex-shrink ]:定义弹性盒子元素的收缩比率。
[ flex-basis ]:定义弹性盒子元素的默认基准值。
*/
}
4.position的定位
static: 静态定位,是定位的默认值。没有定位,就正常显示
relative: 相对定位,相对于正常元素进行定位。
absolute: 绝对定位,相对于除了static定位以外的第一个父元素定位
fixed: 生成绝对定位,相对于浏览器窗口的定位。
5.css的盒模型
CSS盒模型包含padding+border+content+margin
IE 盒模型与W3C盒模型的区别:
IE盒模型的内容包含 padding+border
6.原型链
原型和实例
每一个构造函数(contructor)都有一个原型对象(prototype),原型对象都有一个指向构造函数的指针,而实例(instance)都有一个指向原型对象内部的指针。假如当我们让一个原型对象等于另一个类型的实例。此时原型对象包含一个指向另一个原型的指针,另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,这样层层递进,就构成了实例与原型的链条。这就是所谓的原型链。
在JavaScript中,万物都是对象。对象与对象之间存在着继承关系,在JavaScript中通过prototype指向父级对象,直到指向Object对象为止,这样就形成了一个指向原型的链条。
7.ES6 es6.ruanyifeng.com/
1.解构赋值
2.let const 命令
3.数组的扩展
扩展运算符(...)
Array.from()
Array.of() // 将一组值转成数组
find()、findIndex()
includes()
flat()
4.对象新增的方法
Object.is()
Object.assign()
Object.keys()
Object.values()
Object.entries()
5.Promise
6.async await
7.Set 和 Map
8.this
普通函数的this谁调用它就指向谁,箭头函数没有绑定自己的this。
1.默认绑定(全局)
2.隐式绑定
3.显式绑定(call、apply、bind)
bind是创建一个新的函数,并且函数内部的this为传入的第一个参数,我们必须手动调用它。
call、apply调用一个函数,两者的区别在于两个传入的参数不同,apply是数组或类似数组。
4.new 绑定
9.js处理异步的几种方式
1.callback()
2.事件的监听(on,bind,listen,addEventListener,observe)
3.发布订阅者
4.Promise
5.async/await
10.webpack
webpack做的就就是分析代码、转换代码、编译代码、输出代码
常见的loader(模块转换器)
css-loader、url-loader、file-loader、script-loader、babel-loader、style-loader、eslint-loader、image-loader
常见的plugin
define-plugin:定义环境变量
terser-webpack-plugin:通过TerserPlugin压缩ES6代码
html-webpack-plugin 为html文件中引入的外部资源,可以生成创建html入口文件
mini-css-extract-plugin:分离css文件
clean-webpack-plugin:删除打包文件
happypack:实现多线程加速编译
11.谈一谈 Vue 和React 的认识
相同点:
1.使用虚拟DOM
2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库
不同点:
1.在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要手动实现;在Vue应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染,开发者不需要考虑组件是否需要重新渲染之类的优化。
2.在React中,一切都是JavaScript,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言JavaScript功能来构建你的视图页面;在Vue中有自带的渲染函数,Vue也支持JSX,Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。
3.组件作用域内的CSS。CSS作用域在React中是通过CSS-in-JS的方案实现的;在Vue中是通过给style标签加scoped标记实现的。
4.Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。
12.Sass、Less、CSS
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量($) (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量(@)、Mixin、函数等特性,使 CSS 更易维护和扩展。