289页初中级前台题助你拿下Offer

作者 : 开心源码 本文共7444个字,预计阅读时间需要19分钟 发布时间: 2022-05-14 共50人阅读

需要289页前台初中级前台面试题,请直接滑到文末获取

1、ant-design的使用总结及常用组件和他们的基本用法?

ant-design为React,Angular和Vue都提供了组件,同时为PC和手机端提供了常用的基础组件。ant-design提供的demo非常的丰富并且样式能够基本的覆盖开发需求。antd的Demo由于是多人编写的,所以可以看到不同样式的实现都有,可以很好的满足不同开发的风格。

常用的组件有:Button,Form,Radio,Select,TimePicker,Upload,Table等。使用时需要可以参考Demo来编写,并且在组件界面页的最后面有属性的详情和注意点。能够很方便的来实现效果。

2、前台常用的字符实体有哪些及怎样书写?

由于存在预留字符,当需要显示这些字符的时候,那么可以使用字符实体。 常用的字符字体有:

(1)空格 
(2)小于号<
(3)双引号"
(4)单引号'
(5)&与符号&
(6)大于号>

3、react的生命周期及不同生命周期的含义?

1)constructor中进行state的初始化。
2)componentDidMount中进行异步加载数据,增加事件监听。
3)getDerivedStateFromProps中将传入的props升级到state上。
4)componentDidUpdate中解决由于state变化触发的请求。

4、常用的图表绘制工具备哪些,可以实现哪些功能?

EChats提供不同平台的多维度的数据展现,并支持多设施和多种可视化类型,
比方:
折线图,
柱状图,
散点图,
饼图,
K线图等。

5、阿里云OSS文件上传的流程是怎样样?

由于涉及到OSS的key保存问题,所以最好将图片发送给后端,而后由后端将图片上传OSS并返回OSS的url。
图片选择使用ant-design的upload组件。

6、redux的主要作用和使用方式?

主要作用是:吧所有的state集中到组件顶部,能够灵活的将所有state各取所需的分发给所有的组件。

store: 保存数据的地方。整个应用智能有一个Store。
state: 包含所有数据,一个state对应一个view。只需state相同,view就相同。
action:View发出的通知action,改变state,从而改变view。修改state的唯一办法是使用Action。

7、更新项目依赖的第三方库要怎样操作?

使用npm outdated 可以查看npm中有最新版本的包,而后使用ncu -u 进行依赖库的更新,最后使用npm install进行新版本的安装即可以了。

其中ncu是nom-check-updated的工具,通过npm install -g npm-check-updates来安装。 更新完成后,需要查看依赖的第三方库的版本能否有大版本的更新,比方从1.x更新到2.x或者者3.x更新到4.x,涉及到跨版本更新的,那么肯定要小心,需要去对应的官方查看版本迁移记录,进行代码的更新。

所以一般是推荐定时进行第三方库的版本更新,可以有效的修复第三方库存在的bug和避免跨大版本导致的更新影响较大的问题。

8、react新版本中Hook的怎样使用?

可以在不编写class的情况下使用state以及其余的React特性。 使用useState公告新变量

// 公告一个新的叫做 “count” 的 state 变量  const [count, setCount] = useState(0);

useEffect给函数组件添加了操作反作用的能力,与componentDidMount,componentDidUpdate和componentWillUnmount具备相同的用途。React会在每次渲染后调用反作用函数(包括第一次渲染的时候)。

// 相当于 componentDidMount 和 componentDidUpdate:  useEffect(() => {    // 使用浏览器的 API 升级页面标题    document.title = `You clicked ${count} times`;  });

在组件中可以屡次使用useEffect。

useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });

反作用函数还可以通过返回一个函数来指定如何“清理”反作用。比方,在上面的组件中使用反作用函数来订阅好友的在线状态,并通过取消订阅来进行清理操作。可以了解为之前是在componentDidMount中增加ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);来订阅好友的在线状态,而后在componentWillUnmount中增加了ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);来取消订阅。

useEffect第二个参数为一个依赖的值数组,只有当数组的值发生改变的时候,才执行effect的渲染。假如传入的是一个空数组,那么仅仅在组件挂载和卸载时执行一次。

9、git的理解,rebase和快进是什么含义?

git相对svn的最大的区别就是分布式,也就是说check out项目后,可以在本地进行代码的提交,查看历史版本,创立项目新分支等。

git中使用rebase来管理分支,能够避免同一分支线由于多人的合并而导致分支线的不连贯。 merger中当要合入的分支线A和被合入的分支B,A的基点是B上并B没有新提交,此时就会进行快进及不生成一个合并的提交。也可以关闭快进,从而可以添加一个合并提交,可以很方便的观察到谁进行过一次合并。

10、CSS选择器列表优先级及权重?

1.通用选择器(*)
2.元素(类型)选择器 权重1
3.类选择器 权重10
4.属性选择器
5.伪类
6.ID 选择器 权重100
7.内联样式 权重1000 !important规则会覆盖任何其余的公告,只在需要覆盖全站或者外部CSS的替丁页面中使用。

11、CSS配置的常用属性有哪些及作用?

分类属性
宽和高width 宽度;height 高;max-height 跟着父标签
字体属性color 颜色;font-family 字体;font-size 文字大小;font-weight 文字粗细normal 默认值 bold 粗体 bolder 更粗 lighter 更细 100~900 具体粗细 inherit 继承类元素字体的粗细值
颜色十六进制值: #FF0000; 单词表示: blue,red; RGB值: (255, 0, 0);rgba(200, 0, 0, 0.3)
文字属性text-align,text-decoration, text-indent 段落缩进32像素left 左边对齐 right 右对齐 center 居中对齐 justify 两端对齐; none 默认 underline 文本下一条线 overline 文本上一条线 line-through 穿过文本一条线 inherit 继承父类属性
背景属性背景颜色background-color: red; 背景图片background-image: url(‘1.jpg’);背景重复 background-repeat: repeat; 背景位置 background-position: right top
CSS盒子margin 控制元素与元素之间的距离;padding 控制内容与边框之间的距离; border 内边距和内容外的边框; content 内容,显示文本和图像;简写顺序:上 右 下 左
边框border-width, border-style, border-color;可以简写为border:2px solid red;border-radius 实现圆角边框;border-style的值有none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实现边
显示displaynone 不显示;block 沾满整个页面宽度;inline 显示为内联元素;inline-block 具备内元素和块级元素
浮动float 任何元素都可以浮动;clear属性指定侧不允许其余浮动元素;float的属性:left 向左,right 向右,none 不浮动。clear属性left在左侧不允许浮动元素,right在右侧不允许浮动元素,both左右两侧不允许,none 允许出现;inherit 继承父元素;
溢出overflowvisible 内容不会被修剪,hidden 内容被修剪并其他内容不可见,scroll内容被修剪并显示滚动条可查看其他的内容,auto内容被修剪并显示滚动条可查看其他的内容,inherit从父元素继承
定位positionstatic 无定位,relative 相对定位,absolute 绝对定位,fixed 固定

12、bwebpack的作用及怎样使用?

模块打包机,分析项目结构,找到JavaScript模块以及少量浏览器不能直接运行的扩展语言(Scss, TypeScript等),并将其打包为合适的格式以浏览器使用。 通过css-loader和style-loader将样式表表嵌入webpack打包后的JS文件中。

通过less-loader, sass-loader,stylus-loader进行CSS预解决器可以把特殊类型的语句转化为浏览器可识别的CSS语句。

webpack使用插件来扩展webpack功能并在整个构建过程中生效和执行相关任务。如HtmlWebpackPlugin插件,依据一个简单的模板生成最终的Html5文件并在文件中自动引用了打包后的JS文件。

13、Promise实现及优缺点

Promise用于表示一个异步操作的最终完成(或者失败)及其结果值。

var myPromise = new Promise((resolve, reject) => {  // 需要执行的代码  ...  if (/* 异步执行成功 */) {    resolve(value)  } else if (/* 异步执行失败 */) {    reject(error)  }})myPromise.then((value) => {  // 成功后调用, 使用value值}, (error) => {  // 失败后调用, 获取错误信息error})

优点:
处理回调地狱,对异步任务写法更标准化与简洁化。

缺点:首先无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,假如不设置回调函数,Promise内部抛出错误,不会反应到外部。

第三,当处于pending状态时,无法得知目前进展到哪一个阶段。

14、Http状态码及含义

1xx: 服务器收到请求, 需请求者进一步操作
2xx: 请求成功
3xx: 重定向, 资源被转移到其余URL了
4xx: 用户端错误, 请求语法错误或者没有找到相应资源
5xx: 服务端错误, server error
301: 资源(网页等)被永久转移到其余URL, 返回值中包含新的URL, 浏览器会自动定向到新URL
302: 临时转移. 用户端应访问原有URL
304: Not Modified. 指定日期后未修改, 不返回资源
403: 服务器拒绝执行请求
404: 请求的资源(网页等)不存在
500: 内部服务器错误

15、async和await的使用

async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
async/await是基于Promise实现的,它不能用于普通的回调函数。
async/await与Promise一样,是非阻塞的。
async/await使得异步代码看起来像同步代码,这正是它的魔力所在。

16、setTimeout时间推迟为何不准

单线程,先执行同步主线程,再执行异步任务队列。

17、let const var作用域及区别

块级作用域,暂时性死区。
var 定义的变量,可以跨块作用域访问,不能跨函数作用域访问。

let 定义的变量,只能在块作用域里访问,不能跨块作用域访问也不能跨函数作用域访问。

const 定义常量,创立时必需赋值,只能在块作用域里访问并且不能修改。

18、for in, forEach和for of的区别

for in遍历数组会遍历到数组原型上的属性和方法,更适合遍历对象。遍历到myObject的原型方法method,假如不想遍历原型方法和属性的话,可以在循环内部判断一下hasOwnProperty方法可以判断某属性能否是该对象的实例属性。

forEach不支持break,continue,return等

for of可以成功遍历数组的值,而不是索引,不会遍历原型。

19、localStorage 与 sessionStorage 与cookie的区别总结

共同点: 都保存在浏览器端且同源。

localStorage,sessionStorage统称为webStorage,保存在浏览器,不参加服务器通信。大小为5M。

生命周期不同:localStorage永久保存,sessionStorage当前会话。都可以手动删除。

作用域不同: 不同浏览器不共享local和session,不同会话不共享session。

Cookie:设置的过期时间前一直有效,大小4K。有个数限制,各浏览器不同,一般为20个。携带在http头中,过多会有性能问题。可自己封装,也可用原生。

20、微信小程序组件的生命周期?

onLoad页面加载:一个页面只会调用一次,可以在onLoad中获取打开当前页面所调用的query参数。

onShow 页面显示:每次打开页面都会调用一次。

onReady 页面首次渲染完成:一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

onHide 页面隐藏:当navigateTo或者底部tab切换时调用。

onUnload 页面卸载: 当页面摧毁时执行。

21、微信小程序原理?

微信小程序采用JavaScript,WXML,WXSS三种技术进行开发。

JavaScript:首先JavaScript的代码是运行在微信App中的,并不是运行在浏览器中,因而少量H5技术的应用,需要微信App提供对应的API支持,而这限制住了H5技术的应用,切不能称为严格的H5.同理,微信提供的独有的某些API,H5也不支持或者支持的不是特别好。

WXML: WXML微信基于XML语法开发的,因而开发时,只能使用微信提供的现有标签,HTML的标签是无法使用的。

WXSS:具备CSS的大部分特性,但并不是所有的都支持,而且支持哪些,不支持哪些并没有详细的文档。 微信的架构是数据驱动的架构模式,UI和数据是分离的,所有的页面升级都需要通过对数据的更改来实现。 微信程序分为两个部分webview和appService。其中webview主要用来展示UI,appService有来解决业务逻辑、数据及接口调用。他们在两个进程中运行,通过系统层JSBridge实现通信,实现UI的渲染、事件的解决。

22、HTTP状态码及其含义

状态码类型状态码类别起因短语
1XXInformation(信息性状态码)接收的请求正在解决
2XXSuccess(成功状态码)请求正常解决完毕
3XXRedirection(重定向状态码)需要进行附加的操作以完成请求
4XXClient Error(用户端错误状态码)服务器无法解决请求
5XXServer Error(服务端错误状态码)服务器解决请求出错
204服务器成功解决,但未返回内容。
304Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。用户端通常会缓存访问过的资源,通过提供一个头信息指出用户端希望只返回在指定日期之后修改的资源
400Bad Request用户端请求的语法错误,服务器无法了解
403Forbidden服务器了解请求用户端的请求,但是拒绝执行此请求
404Not Found服务器无法根据用户端的请求找到资源(网页)。

通过此代码,网站设计人员能设置”您所请求的资源无法找到”的个性页面

289页前台面试题

1、ajax 实现原理及方法使用?
2、 说说 vue 中 key 的原理?
3、 vue 双向绑定的原理是什么?
4、vue 中$nextTick 有什么作用?
5、 浅谈前台工程化、模块化、组件化?
6、vue 项目优化的手段有哪些
7、mvc,mvp,mvvm 是什么
8、vue,jq,react,angular 区别,各自优势
9、什么是虚拟 dom,优势是什么,存储在哪
10、谈谈 webpack 的了解
11、谈谈 event loop..35
12、详情 HTTPS 握手过程
13、如何防范 CSRF 攻击,XSS 攻击
14、使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序,输出结果
15、箭头函数与普通函数的区别
16、简述 react 的生命周期,数据变化会触发哪些生命周期
17、SQL 语句的分类
18.什么是弹性布局?
19.编写响应式?
20.常见的浏览器兼容问题?
21.H5 新特性
22.C3 新特性:
23.什么是 typescript
24.三大框架的区别:
25.spa 应用优点:
26.什么是模块化编程?
27.性能优化?
28.什么是 HTTP 协议:
29、快速扰乱数组排序
30、JS 判断设施来源
31、audio 元素和 video 元素在 ios 和 andriod 中实现自动播放
32、让文本不可复制
33、水平垂直居中
34、改变 placeholder 的字体颜色
35、如何判断一个 object 是数组类型
36、CORS http 请求和普通 http 请求的区别
37、行内元素,块元素,空元素有哪些?
38、src 和 href 的区别?
39、什么是 css HACK?
40、优雅降级和渐进加强?
41、new 操作符的实现
42、递归深拷贝
43、JS 常见的四种内存泄漏

我目前是在职前台开发,假如你现在也想学习前台开发技术,在入门学习前台的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我所在的前台学习交流裙:前面:42137 后面:4697。里面聚集了少量正在自学前台的初学者,转行者,初阶者,这套面试题囊括了几乎所有前台的知识点,感兴趣的可以点此获取~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 289页初中级前台题助你拿下Offer

发表评论