前端技术百宝箱

html+css面试题

DOCTYPE声明了文档的类型
标签是 HTML 页面的根元素，该标签的结束标志为
标签包含了文档的元数据（meta），如定义网页编码格式为utf-8。
标签定义文档的标题
标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为

1, HTML5中新增了哪些内容？

广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。

Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了一些标签属性，例如input的placeholder。

Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。楼口四坐骑赛性四坐骑奎锐

webAPI,新增了localStorage和sessionStorage，querySelector，webSocket，requestAnimationFrame，Worker(类似分线程)，地理位置。

瑞快斯特啊你没醒费应木

伪类伪类是用来为某些元素添加一些特殊的效果
• 🔗 应用于未被访问过的链接。
• :visited: 应用于被用户访问过的链接。
• :hover: 当用户的鼠标悬停在元素上时，该样式将被应用。
• :active: 当用户点击一个链接且鼠标按钮尚未释放时，应用此样式。
• :focus: 当元素获得键盘输入焦点时，应用此样式。
• :first-child: 选择某个元素的第一个子元素。
• :last-child: 选择某个元素的最后一个子元素。
• :nth-child(): 匹配属于其父元素的第 n 个子元素。
伪元素伪元素则是用来在某些元素的前面或后面添加一些内容或样式
• ::before: 在元素的内容之前插入生成的内容。
• ::after: 在元素的内容之后插入生成的内容。
• ::first-letter: 用于格式化文本块的第一个字母。
• ::first-line: 用于格式化文本块的第一行。
• ::selection: 应用于用户选择的文本部分。
• ::placeholder: 用于设置表单输入字段占位符的样式。
• ::backdrop: 用于背景幕布的样式，常与overlay一同使用。
• ::marker: 用于列表标记的样式。
2, 什么是HTML语义化？HTML语义化的好处是什么？
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3, Css中Position定位都有哪些方式，分别是什么效果。

Static(默认)，静态定位，流式布局四忒特克

Relative，相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整。瑞雷特务

Absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。

Fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。菲克斯特

Sticky，粘性定位，可实现动态fixed。四忒k

4, Absolute定位的元素相对于哪个元素进行定位。

相对于离自己最近的、position为非static的祖先元素进行定位。

5, 前端页面中动画都有哪些实现方式，各自分别适用于哪些场景？

Transition：简单的动画，只需要在两个状态之间变化的动画。太四谁醒

keyframeAnimation：适合需要在多个状态连续进行的动画。K付亚木阿尼没醒

js动画：功能最强的动画，但是效率最低。

弹性布局

https://www.kancloud.cn/zwgj/zwcms/2397259

6, 怎么隐藏页面中的某个元素？

Display:none; 隐藏且不占用位置。

Visibility:hidden; 隐藏但保留位置。维斯贝类忒

Opacity:0; 隐藏但保留位置。欧怕四忒

7, 行元素和块元素的区别是什么？

行元素：会在水平方向排列，设置宽高无效，上下边距无效

a、span、strong、b、em、i、label、img、input、select、textarea、button、abbr、cite、code、big、small、sub

块元素：独占据一行，垂直方向排列。可设置宽高,内外边距

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、menu

行内块元素: 会在水平方向排列,可设置宽高,内外边距

同时,可通过display属性修改标签元素类型

br、meta、hr、link、input、img

8, 如何解决行内块间距问题

给父元素设置font-size:0

使用弹性布局或浮动布局

使用固定定位或者绝对定位

9, 标准盒模型和IE怪异盒模型的区别

在标准模式下，块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异模式下，块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

10, Css3中transition和animation的区别

transition只有开始和结束两个状态，并且需要通过事件触发
animation可以通过定义关键帧指定多个动画状态，可以自动播放

11, 单行文本溢出显示为省略号

text-overflow: ellipsis; 诶类剖谁死

overflow: hidden;

white-space: nowrap; 威特斯贝斯脑挖

12, 页面中常用哪些单位, 有什么区别

px 以物理像素为基准

em以当前元素font-size为基准

rem以html font-size为基准
vw/vh以浏览器窗口宽高为基准 100vw=浏览器窗口宽度
rpx 适用于小程序或uniapp中可以实现自适应 750rpx=屏幕宽度

13, 什么是响应式页面，是依赖什么技术实现的。

能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现

14, 怎么在页面上显示一条斜线？一条折线？一线曲线？

方法一: 使用canvas绘图画出来 (比较麻烦)

方法二: 使用div边框线 + 视图转换(旋转/倾斜)或边框圆角实现(简单方便)

方法三: 使用背景的线性渐变或经向渐变实现(较耗性能)

15, 在页面头部显示导航条，不随页面滚动，在页面左侧显示垂直菜单栏，不随页面滚动，你会怎么实现？如何避免导航条、菜单栏盖住页面上的内容？

使用 position:fixed 固定定位实现, 头部设置top属性, 左侧的设置left属性

并使用z-index属性设置显示层级, 值越大越不容易被覆盖

16, 怎样实现元素上下左右都居中？

(1，实现元素本身内容居中：text-align:center+行高。

(2，实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。

(3, 使用flex弹性布局 display:flex; justify-content:center; aligin-items;center;

(4, 绝对定位+left,top:50%+transform:translate:-50%。

17, flex弹性布局很强大，可以实现几乎所有的布局效果，包括以往很难实现的弹性效果，但什么情况不能用flex弹性布局实现？

Flex布局是css3的新特性, 在一些低版本的浏览器上(如IE8)不支持flex布局

18, 怎样在不使用新元素的情况下清除浮动？

在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式，其中写content:"";display:block;clear:both

19, Css文件中@import，@font-face，@keyframes,@media这4个关键字的作用是什么？

@import，导入另一个css文件，@font-face，导入一个字体文件，@keyframes声明一个关键帧动画，@media声明一个媒体查询条件。

20, Less/Sass比css高级到哪了？

支持嵌套

支持变量定义

支持"模板函数

21,常见兼容性问题有哪些？

兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

对于老IE浏览器使用css hack解决兼容问题。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

Retina屏幕手机浏览器的1px边框问题，通过前后缀伪元素或者缩放解决。

22, 什么是元素盒模型，包含哪几部分？计算元素尺寸时从哪部分开始计算？

元素从结构上分为4层，内容，内间距，边框，外间距。

通过box-sizing设置计算方式，默认为content-box,及计算内容盒，可以设置为border-box,计算到边框盒。

23, ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

24, 常用的浏览器有哪些？他们分别是什么内核？

(1，chrome、safari属于webkit内核。

(2，老IE(10和10以下) 属于Trident内核。

(3，firefox属于Gecko内核。

(4，新IE属于Edge内核。

(5，360等特殊浏览器：多内核浏览器。

25, 什么叫优雅降级和渐进增强？

都是解决网站对于老旧版本浏览器的兼容问题。

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

26, 什么是SEO? 如何做SEO优化?

SEO，是英文SearchEngineOptimization的缩写，中文的意思: 搜索引擎优化。SEO的目的就是让网站或者网页在搜索结果中，处于靠前的位置。

实现SEO优化的方式有:

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

27, Git常用指令

git init 初始化一个Git代码库

git clone [url] 从线上下载一个项目到本地

git clone -b name拉取指定的分支下来

get config --list 显示当前的Git配置

git add [file1]/[dir]/. 添加指定文件/目录/所有到暂存区

git rm [file1] [file2] 删除工作区文件，并且将这次删除放入暂存区

git mv [file-original] [file-renamed] 改名文件，并将这个改名放入暂存区

git commit -m [message] 提交暂存区到仓库区

git branch / git branch -r 列出所有本地/远程分支

git checkout -b [branch] 新建一个分支，并切换到该分支

git checkout [branch-name] 切换到指定分支，并更新工作区

git merge [branch] 合并指定分支到当前分支

git branch -d [branch-name] 删除分支

git revert HEAD # 撤销最近的一个提交记录

git revert # 撤销指定的提交记录

git reset --soft HEAD^ # 回退到上一个提交记录，保留工作区和暂存区的修改

git reset --mixed HEAD^ # 回退到上一个提交记录，保留工作区的修改，撤销暂存区的修改

git reset --hard HEAD^ # 回退到上一个提交记录，撤销工作区和暂存区的修改

28, 如果git提交时,发生错误,什么原因,如何解决?

如果提交时和同事提交的的代码有冲突, 会报错

首先,不要同时提交代码, 避免干涉, 另外,我们在提交代码之前,应该先把在线代码同步到本地,保证代码没有冲突之后,再提交

29, 解释移动端手势穿透现象? 如何解决?

原因: click事件触发后有300ms的延迟响应, 当点击遮罩层时,tap事件触发即立即响应,执行隐藏, 而click事件触发会在0.3s之后响应, 而在0.3s之后, 遮罩层已经隐藏, 则由下层输入框响应这个click事件, 而获取焦点

解决方案:

1, 阻止btn的touchend事件的默认行为,

2, 延迟300ms执行遮罩层cover的隐藏, 那click响应时,btn还在,即相应给btn

3, 使用插件 fastclick.js 防止手势穿透, 这个插件专为解决手势穿透现象而生

fastclick取消click事件300ms延迟的原理: fastclick监听了click事件的触发, 当body上触发了click事件时, fastclick会自定义一个事件,并立即触发, 并把监听到的系统click事件阻止掉

30,布局方式

静态布局

静态布局（Static Layout）
优化建议：
• 适用场景：适用于固定尺寸的设备或不需要响应式设计的场景，如企业官网、门户网站。
• 单位：使用px作为单位，确保布局在不同设备上保持一致。
• 居中布局：使用margin: 0 auto;实现页面居中。
布局方法：
css
复制
.container {
width: 960px;
margin: 0 auto;
}
浮动布局（Float Layout）
优化建议：
• 适用场景：适用于图文混排、首字母下沉等排版需求。
• 清除浮动：使用clearfix技巧清除浮动，避免父元素塌陷。
• 兼容性：确保在旧版浏览器中也能正常显示。
布局方法：
css
复制
.clearfix::after {
content: "";
display: table;
clear: both;
}

.float-left {

float: left;

}

.float-right {

float: right;

}

弹性布局（Flexbox Layout）

优化建议：

• 适用场景：适用于需要比例分割、居中显示的布局，如移动端页面、电商网站。

• 单位：使用em、rem或rpx作为单位，实现相对布局。

• 兼容性：注意在低版本浏览器中的兼容性问题，可以使用Autoprefixer工具自动添加前缀。

布局方法：

css

复制

.container {

display: flex;

justify-content: center;

align-items: center;

}

.item {

flex: 1;

}

自适应布局（Adaptive Layout）

优化建议：

• 适用场景：适用于需要为不同设备提供不同布局的场景。

• 媒体查询：使用CSS的@media媒体查询，为不同分辨率范围创建不同的静态布局。

• 测试：确保在每个目标设备上都能正常显示。

布局方法：

css

复制

@media screen and (max-width: 768px) {

.container {

width: 100%;

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

.container {

width: 90%;

}

@media screen and (min-width: 1025px) {

.container {

width: 80%;

}

响应式布局（Responsive Layout）

优化建议：

• 适用场景：适用于需要灵活适应不同设备的复杂网站。

• 流式布局：使用百分比、em、rem等相对单位，使布局能够随屏幕大小变化。

• 优化加载：减少无用代码，优化加载时间。

布局方法：

css

复制

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

}

.item {

width: 50%;

float: left;

}

@media screen and (max-width: 768px) {

.item {

width: 100%;

}

总结

• 静态布局：简单、兼容性好，适合固定尺寸设备。

• 浮动布局：适合图文混排，需注意清除浮动。

• 弹性布局：灵活、易用，适合比例分割和居中显示。

• 自适应布局：为不同设备提供不同布局，需使用媒体查询。

• 响应式布局：灵活适应不同设备，需优化加载时间。

javaScript面试题

1, Js数据类型有哪些？

数值、字符串、布尔、undefined、null、数组、对象、函数

Symbol类型的设计初衷是创建唯一的标识符，这在需要保证属性名或对象键的唯一性时特别有用

BigInt类型提供了对大于2^53-1的整数的支持, BigInt通过提供任意精度的整数运算

2, 引用类型和值类型的区别

值类型存在于栈中, 存取速度快引用类型存在于堆中,存取速度慢
值类型复制的是值本身引用类型复制的是指向对象的指针
值类型结构简单只包含基本数据, 引用类型结构复杂,可以实现多层嵌套
3, 你的项目需要在页面上播放视频，用什么播放？怎么防止用户下载视频？
可以使用video标签播放视频,
通过DOM事件禁止下载, 可以在页面的鼠标右击事件和F12键盘事件的回调中return false 以屏蔽用户操作
4, 如何防止你的页面数据被抓取(复制或保存) ?
(1, 阻止鼠标右击事件的默认行为(弹出菜单)
(2, 阻止F12按键的点按事件默认行为(检查元素)
(3, 组件ctrl+C组合按键的默认行为 (复制)
5, 怎样实现在动画结束之后执行一段代码？
过度动画：监听transitionend事件。
关键帧动画：监听animationend事件。
Js动画：自定义js动画时，直接在停止动画的代码之后添加要执行的代码，如果使用js动画工具库(velocity)，则把要执行的代码写在动画结束时的回调函数中。

6, Promise有哪些使用场景?

(1, 在页面打开时,要同时执行多个ajax请求,可以使用promise处理多个异步任务并发执行

(2, 有些ajax请求之间存在依赖关系,需要顺序执行,造成结构嵌套,可以使用promise解决异步任务多层嵌套的问题, 实现链式调用

(3, 在项目中封装网络请求时,使用promise封装ajax请求并返回promise对象

Promise.resolve
• 概述：Promise.resolve方法用于创建一个已经成功（fulfilled）的Promise对象。
• 用途：当需要将一个值或另一个promise对象转换为一个已解决的promise时，这个方法非常有用。
• 返回值：返回一个状态为fulfilled的Promise对象，其结果值为传入的参数。
Promise.reject
• 概述：Promise.reject方法用于创建一个已经失败（rejected）的Promise对象。
• 用途：通常用于测试或在需要立即表示失败的情况下使用。
• 返回值：返回一个状态为rejected的Promise对象，错误原因为传入的参数。
Promise.then
• 概述：Promise.then方法用于指定一个Promise对象状态发生改变后的回调函数。
• 用途：这个方法接受两个参数，第一个参数是Promise对象状态变为fulfilled时的回调函数，第二个参数是状态变为rejected时的回调函数（可选）。
• 返回值：返回一个新的Promise对象，该对象的解析值是回调函数的返回值。
Promise.catch
• 概述：Promise.catch方法用于处理Promise链中的错误。
• 用途：该方法返回一个新的Promise，这个Promise会捕获之前Promise链中任何一个的错误并进行处理。
• 返回值：返回一个状态为fulfilled的Promise对象，如果之前的Promise没有出现错误，或者返回一个状态为rejected的Promise对象，错误原因为捕获到的错误信息。
Promise.all
• 概述：Promise.all方法接收一个Promise对象的数组，并返回一个新的Promise对象。
• 用途：当需要等待多个异步操作都完成时使用，常用于多个请求并发执行的场景。
• 返回值：当所有的Promise对象都变为fulfilled状态时，返回一个包含所有结果的数组；如果有一个Promise变为rejected状态，则立即返回一个错误。
Promise.any
• 概述：Promise.any方法是从ES2022引入的新特性，它接受一组Promise实例，并返回这组Promise中的任一个实例的结果。
• 用途：当需要保证至少有一项异步操作成功时使用。
• 返回值：返回第一个fulfilled的Promise的结果；如果所有Promise都被rejected，则返回一个错误。
Promise.race
• 概述：Promise.race方法也接受一组Promise实例，但只返回最快完成的那个Promise的结果。
• 用途：适用于需要优先处理最快响应的异步操作的场景。
• 返回值：返回第一个完成（无论是fulfilled还是rejected）的Promise实例的结果。
Promise.finally
• 概述：Promise.finally方法用于指定一个无论Promise对象状态如何都会执行的操作。
• 用途：常用于执行清理操作或在一系列Promise操作之后进行收尾工作。
• 特点：不改变Promise的状态，只是附加一个无论成功还是失败都会执行的回调函数。

7, 浏览器中事件传播的流程是什么？怎样阻止事件的传播？怎样阻止事件的默认行为。

事件触发后，先从根元素到子元素逐层捕获，然后再从叶子元素到根元素逐层冒泡。 e.stopPropergation , e.preventDefault

8, Js函数中的this有哪些指向？怎样改变函数中this的指向。

一般情况下，通过谁调用，就指向谁。

在js全局作用域, this一般指向window

在对象中,this一般指向这个对象本身

构造函数中，this是正在创建的对象。

在事件函数中,this指向事件目标

(注意: 在计时器中this会被还原成window或置空,但箭头函数可以保留this指向)

可用通过call(), apply(), bind()改变this的指向

apply，和call一样,修改指向的同时调用函数，唯一的区别是，传参方式不同，aplly需要提供一个数组。

bind修改this指向时不会调用函数，而是生成一个新的函数，新的函数和原函数代码一样，但是里面的this是绑定过的。

9, 如何阻止form表单提交？

监听form表单submit事件，在事件处理函数内部return false 或者阻止浏览器默认行为

10, 数组有哪些常用处理方法，字符串、数字有哪些常用处理方法。

数组：join,splice,push,slice,indexof,sort,concat,reverse,map,reduce,some,every,filter,foreach。

字符串:

split,indexof,substr,substring,replace,trim,toUppercase,startsWith,

数字:tofixed。

Math : floor,ceil,round,random,abs,sqrt,pow,max,sin,

toFixed(digits)

• 解释：toFixed 方法将一个数字转换为字符串格式，并保留指定的小数位数。如果数字的小数位数少于指定位数，则末尾补零。

• 用法： number.toFixed(digits)，其中 digits 是你想要保留的小数位数。

Math 方法

floor(x)

• 解释：floor 方法返回小于或等于一个给定数字的最大整数。

• 用法： Math.floor(x)

max(values)

• 解释：max 方法返回一组给定数字中的最大值。

• 用法： Math.max(values)，其中 values 是一个数字或数字列表。

•

ceil(x)

• 解释：ceil 方法返回大于或等于一个给定数字的最小整数。

• 用法： Math.ceil(x)

round(x)

• 解释：round 方法将一个数字四舍五入到最接近的整数。

• 用法： Math.round(x)

random()

• 解释：random 方法返回一个介于 0（包含）至 1（不包含）之间的随机数。

• 用法： Math.random()

abs(x)

• 解释：abs 方法返回一个数的绝对值。

• 用法： Math.abs(x)

sqrt(x)

• 解释：sqrt 方法返回一个非负平方根。

• 用法： Math.sqrt(x)

pow(base, exponent)

• 解释：pow 方法返回基数的指数次幂。

• 用法： Math.pow(base, exponent)

数组（Array）方法

添加/删除元素
• push()：在数组末尾添加一个或多个元素。
javascript
复制
let arr = [1, 2];
arr.push(3); // [1, 2, 3]
• pop()：删除并返回数组的最后一个元素。
javascript
复制
let arr = [1, 2, 3];
arr.pop(); // 返回 3，数组变为 [1, 2]
• unshift()：在数组开头添加一个或多个元素。
javascript
复制
let arr = [1, 2];
arr.unshift(0); // [0, 1, 2]

• shift()：删除并返回数组的第一个元素。

javascript

复制

let arr = [1, 2, 3];

arr.shift(); // 返回 1，数组变为 [2, 3]

遍历数组
• forEach()：对数组的每个元素执行一次函数。
javascript
复制
let arr = [1, 2, 3];
arr.forEach(item => console.log(item)); // 输出 1, 2, 3

• map()：创建一个新数组，包含原数组每个元素调用函数后的结果。

javascript

复制

let arr = [1, 2, 3];

let newArr = arr.map(item => item * 2); // [2, 4, 6]

• filter()：创建一个新数组，包含通过测试的元素。

javascript

复制

let arr = [1, 2, 3];

let newArr = arr.filter(item => item > 1); // [2, 3]

• reduce()：对数组元素从左到右执行累加器函数。

javascript

复制

let arr = [1, 2, 3];

let sum = arr.reduce((acc, item) => acc + item, 0); // 6

查找元素
• find()：返回第一个满足条件的元素。
javascript
复制
let arr = [1, 2, 3];
let result = arr.find(item => item > 1); // 2

• findIndex()：返回第一个满足条件的元素的索引。

javascript

复制

let arr = [1, 2, 3];

let index = arr.findIndex(item => item > 1); // 1

• includes()：检查数组是否包含某个值。

javascript

复制

let arr = [1, 2, 3];

let hasTwo = arr.includes(2); // true

数组操作
• slice()：返回数组的一部分（浅拷贝）。
javascript
复制
let arr = [1, 2, 3];
let newArr = arr.slice(1, 3); // [2, 3]

• splice()：添加或删除数组元素。

javascript

复制

let arr = [1, 2, 3];

arr.splice(1, 1, 4); // 从索引 1 开始删除 1 个元素并插入 4，数组变为 [1, 4, 3]

• concat()：合并多个数组。

javascript

复制

let arr1 = [1, 2];

let arr2 = [3, 4];

let newArr = arr1.concat(arr2); // [1, 2, 3, 4]

排序和反转
• sort()：对数组元素进行排序。
javascript
复制
let arr = [3, 1, 2];
arr.sort(); // [1, 2, 3]

• reverse()：反转数组。

javascript

复制

let arr = [1, 2, 3];

arr.reverse(); // [3, 2, 1]

对象（Object）方法

操作属性
• Object.keys()：返回对象的所有键。
javascript
复制
let obj = { a: 1, b: 2 };
let keys = Object.keys(obj); // ['a', 'b']

• Object.values()：返回对象的所有值。

javascript

复制

let obj = { a: 1, b: 2 };

let values = Object.values(obj); // [1, 2]

• Object.entries()：返回对象的键值对数组。

javascript

复制

let obj = { a: 1, b: 2 };

let entries = Object.entries(obj); // [['a', 1], ['b', 2]]

合并对象
• Object.assign()：合并多个对象。
javascript
复制
let obj1 = { a: 1 };
let obj2 = { b: 2 };
let newObj = Object.assign({}, obj1, obj2); // { a: 1, b: 2 }

检查属性
• hasOwnProperty()：检查对象是否包含某个属性。
javascript
复制
let obj = { a: 1 };
let hasA = obj.hasOwnProperty('a'); // true

冻结和密封
• Object.freeze()：冻结对象，使其不可修改。
javascript
复制
let obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // 无效
• Object.seal()：密封对象，防止添加或删除属性。
javascript
复制
let obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // 无效
数组（Array）插入到指定位置
使用 splice() 方法
splice() 是数组插入、删除或替换元素的通用方法。

语法：

javascript

复制

array.splice(startIndex, deleteCount, item1, item2, ...);

startIndex：插入或删除的起始位置。

deleteCount：要删除的元素数量（设置为 0 表示不删除）。

item1, item2, ...：要插入的元素。

示例：

javascript

复制

let arr = [1, 2, 3];

// 在索引 1 的位置插入 4 和 5

arr.splice(1, 0, 4, 5);

console.log(arr); // 输出: [1, 4, 5, 2, 3]

使用 slice() 和 concat() 方法
可以通过 slice() 分割数组，再使用 concat() 拼接新元素。
示例：
javascript
复制
let arr = [1, 2, 3];

// 在索引 1 的位置插入 4

let newArr = arr.slice(0, 1).concat(4, arr.slice(1));

console.log(newArr); // 输出: [1, 4, 2, 3]

使用扩展运算符（...）
扩展运算符可以方便地插入元素。
示例：
javascript
复制
let arr = [1, 2, 3];
// 在索引 1 的位置插入 4
let newArr = [...arr.slice(0, 1), 4, ...arr.slice(1)];
console.log(newArr); // 输出: [1, 4, 2, 3]

对象（Object）插入属性

对象是无序的键值对集合，插入操作主要是添加新的属性。

直接赋值
通过键名直接赋值即可插入新属性。

示例：

javascript

复制

let obj = { a: 1, b: 2 };

// 插入新属性 c

obj.c = 3;

console.log(obj); // 输出: { a: 1, b: 2, c: 3 }

使用 Object.assign()
Object.assign() 可以合并多个对象，用于插入新属性。
示例：
javascript
复制
let obj = { a: 1, b: 2 };
// 插入新属性 c
Object.assign(obj, { c: 3 });
console.log(obj); // 输出: { a: 1, b: 2, c: 3 }

使用扩展运算符（...）
扩展运算符可以用于合并对象，插入新属性。
示例：
javascript
复制
let obj = { a: 1, b: 2 };
// 插入新属性 c
let newObj = { ...obj, c: 3 };
console.log(newObj); // 输出: { a: 1, b: 2, c: 3 }

11, 什么是原型和原型链？

Js中的对象都有一个属性叫做__proto__(也是一个对象)，表示对象的原型。当访问对象中的属性或方法时，首先在对象本身中寻找，如果找不到则会在原型中寻找，原型中也找不到时会在原型的原型中寻找，直到最顶层为止。

js中的类(构造函数)都有一个prototype的属性，表示本类的原型类型，通过这个类实例化的对象(这个构造函数创建的对象)， proto__都指向本类的 prototype，从而实现了类方法或属性的共享。一个类的prototype也是一个对象，它也有__proto ，把它的__proto__指向另一个类的prototype时，那么这个类的对象就能访问另一个类中的方法，从而实现了方法的继承。

A类的prototype指向另一个类B，B的prototype又可以指向C，这种结构叫做原型链。

12, 什么是JS严格模式？怎么进入干戈模式？严格模式下有哪些限制？

严格模式是JS的一种特殊执行模式，设立"严格模式"的目的，主要有以下几个：

1，消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

2，消除代码运行的一些不安全之处，保证代码运行的安全；

3，提高编译器效率，增加运行速度；

4，为未来新版本的Javascript做好铺垫。

在函数中或全局域的开头添加字符串"user strict"进入严格模式。

严格模式主要有以下限制：

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

13, Js原生Ajax实现流程

(1)创建XMLHttpRequest请求对象

(2)open方法指定请求方式、请求路径、同步异步

(3)设置响应HTTP请求状态变化的函数

(4)send方法发送请求

(5)响应成功使用JavaScript和DOM实现局部刷新

14, 闭包是什么？有什么作用？

当一个函数A的作用域被内部的B函数引用时，A函数的作用域就会被B函数闭包，当A函数执行完毕时，A函数的作用域也不会释放。

闭包可以实现对象的私有属性和私有方法。
闭包可以封装变量，从而减少对全局作用域的污染。

15, 什么是函数防抖和函数节流？

函数防抖：对于频繁触发的事件，如果只希望其最后一次（或第一次）执行绑定函数的执行，则需要使用函数防抖。

函数节流：对于频繁触发的事件，希望其按照一定的频率进行绑定函数调用，则使用函数节流。

函数防抖和节流都可以通过settimeout实现。

16, 栈和队列的区别是什么?js中怎样实现栈结构？

栈和队列都是线型数据结构，栈只有一个入口，同时也是出口，所以数据遵循先进后出，后进先出的规则。队列一侧是入口，另一侧是出口，所以数据先进先出，后进后出。

Js中的数组可以实现栈和队列。Push和pop方法是一对栈操作，push和shift是一对队列操作。

17, 什么是深拷贝和浅拷贝？

浅拷贝就是只复制数组（对象）本身，而不复制其内容（引用类型的数据内容），最终两个数组中指向同一套数据。深拷贝则是既赋值本身也赋值内容。

Js中对于引用类型的数据，默认进行的都是浅拷贝。

18, ES6中新增加了哪些特性？

箭头函数，字符串模板，let块级作用域声明方式，const常量，class声明类，结构赋值，Promise，ES6模块化。

19, 箭头函数和普通函数的区别

箭头函数内部this跟函数所在上下文this保持一致
没有arguments参数集合，可以用rest替代
不能使用call、bind、apply来改变this的指向
20, 使用axios发起ajax请求无法携带cookie,什么原因? 如何解决?
axios默认跨域请求不使用凭证,当服务器在响应头中设置了cookie后, axios会默认隐藏这部分信息,
设置axios.defaults.withCredentials = true；即可
21, 什么是跨域请求，怎样实现跨域请求。
一个页面发送到非本身来源的请求叫做跨域请求，浏览器只禁止ajax跨域请求。
三种跨域请求的方式：
1，cors，服务器在响应头中添加access control allow origin字段，浏览器在收到请求之后就会认为本次请求时允许跨域的。
2，JSONP,浏览器使用创建script标签的形式发送请求，将一个函数名作为请求参数发给服务器，服务器将需要返回的数据封装在一段js代码中（把前端发来的函数名进行调用，把要发送的数据作为参数），然后把这段代码返回给前端，前端立刻执行这个函数。

3，代理服务器，将请求先发送给代理服务器，代理服务器装发给目标服务器。

22, 怎么列出一个文件夹下的所有文件？

可以使用nodeJS中的内置fs模块,调用fs.readDir读取文件夹中的所有文件和子文件夹, 传入递归函数,可读取子文件夹中的文件

23, Express中常用的中间件都有哪些？

static , bodyparser, session , multer,

24, HTTP和HTTPS的区别是什么？

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

25, Ajax中get和post两种请求方式的区别

（1）运行速度：get请求简单，运行速度也更快（存在缓存）；

（2）缓存：get存在缓存（优：提升速度，缺：不能及时获取最新数据）post没有缓存；

（3）数据储量：get有数据量的限制，post则没有限制

（4）数据安全：发送包含未知字符的用户输入时，post比get 更稳定也更可靠；

（5）传参方式：get参数拼接在url后，post放在send里面并且需要设置请求头xmr.setRequestHeader("content-type","application/x-www-form-urlencoded")

26, 什么是同源策略

同源策略是浏览器执行ajax请求时的一种安全策略, 它规定了浏览器只能请求端口、域名、协议全部相同的数据源, 而非同源的请求会被浏览器拦截

27, cookie和localstorage有什么区别？

都可以实现在用户的浏览器中存储一些数据。

不同：cookie是由服务端主导的，主要用于存储用户身份验证信息。localstorage是由前端js控制的，主要用于缓存业务逻辑数据。Cookie会随着请求头和响应头往返于服务器和浏览器之间。

28, localStorage、sessionStorage和cookie的区别

本地存储容量更大有5MB左右，cookie只有4KB
本地存储没有过期时间，localStorage持久保存，除非手动清除，sessionStorage窗口关闭自动清除
cookie会在客户端与服务器端之间往返，服务器端可以操作cookie，本地存储只存储于本地。

29, cookie 和session 的区别?

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。Session基于cookie。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

30, LocalStorage能存储多少数据量？如果数量过大会出现什么问题？怎么办？

一个域名下可存储5M的数据量, 存储的数据过大会导致部分数据丢失, 破坏数据结构

可优化数据结构,减小数据量

也可以使用window.postMessage实现跨源存储和读取,把数据存入其它域名下

31, 谈一下对token验证机制的理解

发起权限(登录)请求，后端验证通过生成token响应给客户端，客户端发送其他敏感请求，携带token，后端验证获取token识别用户身份

32, localstorage能否实现跨域访问？

正常情况下localstorage不能跨域访问，但是可以通过iframe实现间接的跨域访问，域名A的网站在页面中通过iframe打开域名B的页面，然后通过postMessage给B网页发送消息，域名B页面读取localstorage数据之后再通过postMessage将数据传递给A页面，从而实现跨域访问localStorage。也就是说B页面必须配合，A页面才能跨域访问。

33, webSocket是什么？适用于哪些网站？

webSocket是一种双工通信技术，可以实现服务器主动向客户端发送数据。

一般适用于需要实时通信的网站, 比如人工客服服务和在线页游等

34, webpack工具的功能是什么？

Webpack是为前端开发设计的自动化打包工具，能够对项目中的js、css、图片等资源进行打包（其中js可以直接打包，其他类型资源需要各自对应的loader支持），相比于传统的grunt、gulp等构建工具，webpack在打包js代码时，能够识别多种模块化语法，进行模块化打包。

Webpack还可以配合脚手架工具构建项目的框架

35, 什么是WebWorker？在哪些场景下需要使用WebWorker？

WebWorker是h5中新增的WebAPI，用于启动一个独立的线程，主线程和分线程只能通过相互发送消息进行通信。当前端页面中有耗时很长的代码需要执行时，可以放在worker中执行，否则会卡塞主线程，影响用户体验。

36, 你是否会使用混合(hybrid)APP开发技术进行手机APP开发？

开发手机app我一般使用uniapp去实现, 它不仅可以开发常规安卓和ios手机app还可以同时兼容发布各种小程序版本,开发效率比较高。

37, ES6的async函数怎么使用？

Async函数没有返回值，或者只能返回Promise对象。在async函数的函数体中可以使用await，await 后面只能调用返回Promise的函数，且通过await调用之后返回值不再是promise，而是promise.then时所传递的数据（如果失败则会抛异常）。从而实现以同步代码的格式调用异步函数。

38, 在浏览器地址栏输入一个网址，从敲下回车键，到页面完全加载完毕，中间都发生了什么？

1，如果地址栏中输入的是一个域名，浏览器会先使用自己的DNS缓存进行域名解析，转为IP地址，如果缓存中不存在，则会请求使用上层DNS（操作系统的DNS），操作系统会先查询本地HOST文件，如果HOST文件中不存在则会使用网络设置的DNS进行域名解析。最终得到域名对应的IP地址。

2，获得IP地址后，浏览器按照IP地址进行连接(tcp连接)，连接成功之后按照http协议的格式（请求行，请求头，请求头）发送http请求，服务器会返回响应报文（响应行，响应头，响应体），浏览器收到响应报文后，会根据响应头中的Content-Type字段来决定如何进行下一步处理，对于普通的网页Content-Type值是text/html，浏览器就会在页面中打开本次请求响应体中的数据。

3，在打开页面时，浏览器首先对html文本进行解析，创建DOM树，然后将每个节点渲染到页面上，其中如果出现了附带资源的标签（例如img,script等），浏览器会再次按照这些资源的src发送请求，当请求完成之后将请求内容插入到页面中，其中script标签资源是同步加载的，其他资源是异步加载的。

39, 如何优化网页打开的速度？

1，尽量减少页面资源的请求次数（可以通过base64图片、合并图片、合并js，css文件实现）。

2，对页面代码进行压缩（主要是js代码压缩）

3，合理地使用懒加载。

4，对于不需要支持多国语言的中文网页，可以使用放弃使用UTF-8，使用GBK编码。

(以上是从前端角度进行优化，下面几条是从服务端角度优化)

5，网页中的静态资源使用CDN服务。

6，使用缓存，服务端使用redis进行接口缓存，同时在响应头中通过lastmodified,Etag等字段控制浏览器缓存。

7，使用gzip进行数据压缩。

8，使用多域名，部分浏览器对于同一个域名的并发请求量设置有上限，所以可以把页面资源分布在不同域名中，例如静态资源独自使用一个域名。

40, 什么是MVC和MVVM？

MVC:model-view-controller

MVVM:model-view-view-model，

MVC模式通过controller控制器协调model和view的交互，View 传送指令到 Controller，Controller 完成业务逻辑后，要求 Model 改变状态，Model 将新的数据发送到 View，用户得到反馈，所有通信都是单向的。

MVVM模式使用数据双向绑定，model和view直接进行交互。

41, 什么是XSS攻击？怎么防范？

Xss(cross-site scripting 跨站脚本攻击) 指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

防范：

首先代码里对用户输入的地方和变量都需要仔细检查长度和对<",">",";","'"等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

42, 什么是CSRF攻击？怎么防范？

Cross---Site Request Forgery，跨域请求伪造。

CSRF攻击攻击原理及过程如下：

用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
防范：在服务端敏感接口中添加referer判断。

43, js对象深拷贝有哪些方法?

1, 创建一个空的对象, 遍历老对象, 把老对象中的数据赋值到新对象中

2, 通过json对象编码JSON.stringify()和解码JSON.parse() 后赋值JSON.parse(JSON.stringify(originalObject));

3, 使用jquery中的$.extend(true, {}, originalObject)实现

浅拷贝 Object.assign({}, originalObject); { ...originalObject };

44, 如何实现事件委托/代理 ?

在需要给多个相同兄弟标签绑定同一个事件的情况, 可以给他们的父标签绑定此

事件, 原理是利用js事件机制中冒泡原理, 字标签的事件可以冒泡给父标签,所以父标签可以代理字标签的事件绑定

45, get请求缓存怎么解决?

Get请求的数据会被缓存到浏览器本地, 重复发起同一个get请求,会把请求重定向到本地缓存获取数据(请求状态码304)

在请求时添加时间戳,保证每次请求字段不同, 就不会被重定向到缓存

46, 什么是正则表达式? 如何使用?

正则表达式, regular expression 也叫规则表达式, 主要用于字符串的检索判断操作

如, 检索一个字符串中是否包含一定规则的字符, 或判断一个字符串是否符合一定规则

常用于登录注册时的账号,密码,手机号,邮箱等的验证

复习：

js类型(基本类型，值类型)：string,number,boolean,undefined,null,symbol，存储栈

js引用类型: object, array, function, Math, Date, RegExp

47、事件循环机制

vue面试题

vue create demo 创建项目、

cd demo

npm run serve

npm install axios -s 请求axios数据

npm install element-ui -s

npm install vue-lazyload -s 懒加载

1, 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？

在组件中的style前面加上scoped 斯勾剖特

2, 的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

3, vue组件中如何获取dom元素?

使用ref属性获取, 在组件模板元素中添加r ef属性, 在js中用this.$refs获取

4, 说几个vue中的指令和它的用法？

v-model双向数据绑定；

v-for循环；

v-if, v-show 显示与隐藏；、

v-bin*d 动态绑定属性

v-on事件绑定；

v-once: 只绑定一次。 V-忘词

5, v-on指令可以同时监听多个函数吗?

可以, v-on的事件监听类似于DOM原生api添加事件监听者addEventListener add伊文特雷斯特

6, vue循环中为什么使用key?

需要使用key来给循环中每个节点做一个唯一标识，要保证一个循环中key的值各不相同, 以避免vue中的重用机制造成可能的渲染异常. 从底层来看, key属性主要为了Diff算法就可以正确的识别此节点。并高效的更新虚拟DOM。

7, vue的组件配置对象中都有哪些常用字段？分别是什么作用？

Data 组件中的数据

props 组建的属性数据,接收父组件的传值破肉丝

computed 计算属性

components 定义或引用子组件

methods 自定义函数麦芬思

watch 属性监听

filters 数据过滤器费欧特斯

mounted 等生命周期函数毛欧特得

8,分别简述computed和watch的使用场景

computed:

当一个属性受多个属性影响的时候就需要用到computed

例子：购物车商品结算的时候

watch:

当一条数据影响多条数据的时候就需要用watch

例子：搜索数据

9, 列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？

1 beforeCreate: 可以发请求，但是不能赋值给data里面的数据科瑞特

2 created 发请求初始渲染的工作在此处执行亏诶特得

3 beforeMount 虚拟DOM生成，数据未挂载 ·1mounted 虚拟DOM解析。数据已经挂载进行获取DOM元素毛武特

5 beforeupdate 数据更新之前调用

6 updated 数据更新之后调用

7 beforedestroy 在销毁之前调用得死错

8 destoryed 在销毁之后调用定时器清除，事件移除都可以在此处去写当前页面有事件监听器或者计时器时,需要在destroyed中取消或销毁得死搓耳的

10, vue路由的钩子函数有哪些?

全局的路由钩子函数：beforeEach、afterEach

单个的路由钩子函数：beforeEnterg 比fro安特

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

如特安特如特礼物如特啊珀得特

11, 介绍以下vue组件内的路由守卫(即路由的生命周期/钩子函数)，有哪些参数+（to，from，next）

vue组件中的路由钩子方法有

beforeRouteEnter 进入路由前调用。这里组件还未创建, 不能使用this

beforeRouteUpdate 路由更新之前被调用, 组件不会重新初始化, 可以使用this

beforeRouteLeave 离开路由之前被调用，可以访问里面的this属性

方法中都有三个参数:

to:即将要进入的目标路由对象；

from:当前导航即将要离开的路由对象；

next ：调用该方法后，才能进入下一个路由钩子函数内科斯特

12, vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？

Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。

v-model相当于 v-bind:value 加 v-on:input

13, vue中怎么实现非父子组件之间的传值？

在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。

大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。四座e

也可以在路由跳转时,通过路由传值

14, vue中路由如何传值?

(1, 使用url拼接字符串的形式传值使用 r o u t e . q u e r y 接收奎锐 ( 2 , 使用友好 U R L 传值使用 route.query接收奎锐 (2, 使用友好URL传值使用 route.query接收奎锐(2,使用友好URL传值使用route.params接收派瑞门市

(3, 使用命名路由params字段传值使用 r o u t e . p a r a m s 接收 ( 4 , 使用 q u e r y 对象传值使用 route.params接收 (4, 使用query对象传值使用 route.params接收(4,使用query对象传值使用route.query接收

15, vue中有哪些数据传递方式?

(1, 组件传值: 父传子,通过props属性或slot插槽传递, 子传父,通过$emit发射自定义事件传递, 非父子,通过bus总线传递

(2, 路由传值: 可通过url路径传值和编程式导航对象传值

(3, vuex状态管理传值

16, vuex如何使用?

首先在项目中 npm install vuex 安装

新建vuex状态管理文件,导入vuex并添加状态数据dcd。

在组件中使用mapState()函数映射状态数据并使用四得特

在组件中使用commit()函数提交申请修改状态数据

可门特

17, Vuex的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？

state => 基本数据在组件中使用mapState()函数把状态数据映射入组件即可使用

给的瑞斯 getters => 从基本数据派生的数据我们在组件中使用 $store.getters获取数据四座额给特斯

Miu特信日mutations => 提交更改数据的方法，同步！我们在组件中使用 $store.commit('',params)修改数据

(爱可行日)actions => 像一个装饰器，包裹mutations，使之可以异步。使用mapAction()映射入组使用麻婆啊克星

提交无私modules => 模块化Vuex

18, vue中如何处理跨域请求

vue中处理跨域请求一般要设置代理服务器实现跨域, 得色舞

在vue项目的根目录中手动创建vue.config.js配置文件,在devServer字段中配置服务器代理

在使用axios请求数据时直接使用代理地址艾科谁藕丝

19, axios和ajax的区别：

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

20, vue和react有哪些异同点?

相同点

(1, 都通过虚拟DOM实现了视图的渲染与更新

(2, 都是组件化编程, 把整个项目分割成一个个的组件来实现

(3, 都有单向数据流的规则执行数据流动, 父组件通过props属性向子组件传值

不同点瑞爱科特

(1, vue常用html标签模板,使用js实现逻辑,视图与逻辑分离, react使用jsx语法实现模板, html与js相结合

(2, vue组件中的data数据可以直接调用并更新而react中的state数据需要使用setState()函数执行更新

(3, vue属于渐进式前端框架,更适用于开发小型,灵活的项目, react生态更丰富,更适用于开发专业,大型的项目

(4, vue在组件中提供了指令,过滤器,属性监听等,可以方便快捷的操作DOM

21, vue有哪些常用的UI组件库

element (PC端)，

VUX (移动端),

Mint UI(移动端) 门特

Vant (移动端) 万特

22, vue中v-if和v-show有什么区别

v-if的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, 频繁显示隐藏不建议使用

v-show是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式display为block和none来实现, 适用于频繁显示隐藏的情况

23, vue有哪些优缺点:

优点:

(1 简单好用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。

(2 单页面应用, 使用单文件组件结构, 用户体验好,

(3 性能比较好：相比其他框架, 它占用更少的空间，并提供更好的性能。

(4 基于MVVM模式, 数据驱动视图, 更高效

(5 适应性强：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性

缺点:

(1, vue生态环境不如react和angular, 但有追赶和超越的趋势安哥拉

(2, vue不支持IE8

(3, vue封装的比较深入,不利于seo优化, 报错不明显,

24, 什么是MVVM?

MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化和视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react

25, vue项目怎么打包app ?

(1 首先使用webpack打发布包, npm run build 文帕克

(2 然后通过Hbuilder 新建H5+App项目

(3 把第一步打包出的dist文件夹导入项目

(4 在项目中的manifest.json文件中进行打包配置没类粉丝特

(5 点击Hbuilder工具菜单栏发行中的原生App-云打包

26, vue中虚拟DOM的实现原理

虚拟DOM是通过js对象的结构来记录html标签节点, 当组件数据更新需要渲染视图时,先用diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同, 得到最小差异, 然后针对像的更新部分真实DOM节点, 这样可以极大提高视图渲染效率, 节省内存消耗

27, 请说下封装 vue 组件的过程？

(1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(思考1小时，敲码10分钟，程序猿的准则。)

(2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

(3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

(4. 封装完毕了，直接调用即可。

28, vue组件中如何监听路由?

在组件的watch监听器中对 r o u t e 这个字段进行监听全局监听路由在 a p p . v u e 组件中 , w a t c h 监听 route这个字段进行监听全局监听路由在app.vue组件中,watch监听 route这个字段进行监听全局监听路由在app.vue组件中,watch监听route可以监听全局路由

也可以在全局路由守卫beforeEach函数中操作全局路由

29, vue中如何实现父子组件间的双向数据绑定?

Vue中父子组件双向绑定利用父子组件传值原理,

父组件向子组件传值, 通过给子组件定义value属性来接收传值

子组件向父组件传值, 通过子组件$emit发射名为input的自定义事件

在父组件中使用子组件标签时, 在子组件标签上通过v-model绑定父组件数据,实现父子组件的双向绑定

30, 在vue项目中使用组件库, 如何修改组件库中组件的样式?

一般vue组件style会添加scoped属性,产生组件样式隔离, 无法直接修改子组件样式

此时可以使用vue提供的样式穿透语法修改子组件样式 (父组件选择器 >>> 子组件选择器)

31, vue项目中如何使用sass?

1, 下载安装sass模块 npm install sass --save

2, 在组件的style标签上添加lang="scss"

32, Vue.nextTick()方法有什么作用？内克斯泰克

当vue中动态数据修改时,会导致界面的更新,而界面的更新属于异步更新, 当打印界面数据时, 异步更新尚未完成, 所以打印结果是更新之前的数据

Vue.nextTick表示异步更新函数, 其参数是更新完成的回调函数

Vue3面试题

Vue 3相比Vue 2有哪些主要改进？

使用了Composition API，提高了代码逻辑的可复用性。

引入了Fragment，允许组件有多个根节点。

更好的TypeScript支持。

使用了更小的包体积和更高效的运行时性能。

提供了Suspense组件，用于处理异步组件的加载状态。

Teleport组件允许将子组件渲染到DOM中的任何位置。
请解释Vue 3的Composition API是什么？

Composition API 是一组新的、基于函数的 API，它允许你以更灵活和可复用的方式组织组件逻辑。它主要包括 ref、reactive、computed、watch、setup 等函数和钩子。
setup()函数在Vue 3中起什么作用？

setup() 是 Vue 3 组件选项 API 中的一个新选项。它是 Composition API 的入口点，在组件被创建之前执行，用于初始化状态、计算属性和方法，并返回在模板中使用的响应式引用。
请解释ref和reactive的区别？

ref 用于创建简单的响应式引用，通常用于基本数据类型。

reactive 用于创建响应式对象，通常用于复杂数据类型如数组和对象。
Vue 3中的watch和watchEffect有何不同？

watch 允许你监听特定的响应式引用或计算属性，并在它们改变时执行回调函数。

watchEffect 会立即执行一个函数，并自动追踪其依赖的响应式引用，当依赖改变时重新执行。
Vue 3中的Suspense组件是如何工作的？

Suspense 组件允许你指定一个加载中的状态（fallback）和一个加载失败的状态（fallback slot），用于处理异步组件的加载状态。当异步组件加载时，会先显示加载中的状态；加载完成后，会显示异步组件；如果加载失败，会显示加载失败的状态。
Vue 3中的Teleport组件有什么作用？

Teleport 组件允许你将子组件渲染到DOM树中的任何位置，而不仅仅是其父组件的模板内。这在处理模态框、下拉菜单等需要渲染到特定位置的组件时非常有用。
Vue 3如何优化性能？

使用v-show代替v-if来频繁切换元素，因为v-show只是切换元素的CSS属性。

使用key来优化列表渲染的性能。

使用computed和watch来减少不必要的计算和渲染。

使用v-memo来缓存组件的渲染结果。
Vue 3的provide和inject是如何工作的？

provide 和 inject 允许你在祖先组件和后代组件之间传递数据，而不需要通过props和events进行逐层传递。provide 在祖先组件中定义要传递的数据，inject 在后代组件中接收数据。
Vue 3如何处理组件的异步加载？

Vue 3 使用 defineAsyncComponent 函数来定义异步组件。异步组件允许你延迟加载组件，直到需要时才加载，从而优化性能。
Vue 3中的响应式系统是如何工作的？

Vue 3的响应式系统通过ES6的Proxy对象来实现。当使用reactive或ref函数时，Vue会创建一个Proxy对象来包裹原始数据。这个Proxy对象会拦截对原始数据的访问和修改，从而可以追踪到数据的变化。当数据发生变化时，Vue会触发相应的依赖更新，重新渲染视图。
Vue 3中的自定义指令是如何定义的？

Vue 3中的自定义指令可以使用app.directive()方法或组件的directives选项来定义。自定义指令包含一些钩子函数，如bind、inserted、update、componentUpdated和unbind，这些钩子函数会在指令的不同生命周期阶段被调用。
Vue 3中的路由和Vue Router 4有哪些变化？

Vue Router 4与Vue 3一起发布，并做了一些改进和优化。其中，最大的变化是支持Vue 3的Composition API，使得路由逻辑更加可复用和灵活。此外，Vue Router 4还引入了一些新的功能和API，如滚动行为、路由守卫的改进等。
Vue 3如何与Vuex 4一起使用？

Vuex 4是Vue 3的官方状态管理库。在Vue 3中，你可以使用Vuex 4来管理全局状态。你需要创建一个Vuex store，并在Vue应用中使用createStore函数将其与Vue实例关联起来。然后，你可以在组件中使用computed或mapState等辅助函数来访问和修改Vuex中的状态。
Vue 3的插槽（Slots）和Vue 2有何不同？

Vue 3的插槽（Slots）与Vue 2相比有一些改进和变化。首先，Vue 3支持具名插槽和默认插槽的混合使用，这使得插槽的使用更加灵活。其次，Vue 3引入了作用域插槽（Scoped Slots），允许你在插槽中访问子组件的数据和方法。此外，Vue 3还改进了插槽的渲染和更新性能。
Vue 3中的过渡和动画效果是如何实现的？

Vue 3中的过渡和动画效果可以通过CSS或JavaScript来实现。Vue提供了和组件来封装要过渡的元素，并通过CSS类名来控制过渡效果。同时，Vue还支持JavaScript钩子函数来在过渡的不同阶段执行自定义逻辑。
Vue 3的服务器端渲染（SSR）是如何工作的？

Vue 3的服务器端渲染（SSR）是通过将Vue组件渲染为服务器端的HTML字符串来实现的。在服务器端，你可以使用Vue的SSR库（如Nuxt.js）来构建Vue应用，并将组件渲染为HTML字符串发送给客户端。客户端在接收到HTML字符串后，可以直接将其插入DOM中，从而避免了在客户端进行首次渲染的开销。
Vue 3中的虚拟DOM是如何工作的？

Vue 3中的虚拟DOM（Virtual DOM）是一个编程概念，用于在内存中模拟DOM树的结构和状态。当Vue组件的状态发生变化时，Vue会创建一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较。通过比较两个虚拟DOM树的差异，Vue可以计算出最小的DOM更新操作，并将这些操作应用到实际的DOM树上，从而提高了页面的渲染性能。
Vue 3如何处理全局状态？

在Vue 3中，你可以使用Vuex 4来处理全局状态。Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。此外，你还可以使用Vue 3的provide和inject API在祖先组件和后代组件之间传递全局状态。
Vue 3的生命周期钩子有哪些变化？

Vue 3对生命周期钩子进行了一些调整和优化。首先，Vue 3将beforeDestroy和destroyed钩子重命名为beforeUnmount和unmounted，以更好地反映组件的卸载过程。其次，Vue 3新增了setup钩子函数，用于在组件创建之前执行初始化逻辑。此外，Vue 3还提供了onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等生命周期钩子函数，用于在组件的不同生命周期阶段执行自定义逻辑。
Vue 3如何与TypeScript一起使用？

Vue 3内部已经使用了TypeScript进行编写，因此与TypeScript的集成非常顺畅。你可以直接在Vue组件中使用TypeScript的类型声明和接口，以提供更严格的类型检查和更好的代码提示。此外，Vue 3的官方文档也提供了TypeScript的指南和示例，帮助你更好地使用TypeScript来编写Vue应用。
Vue 3中的Teleport是什么？

Teleport是Vue 3中引入的一个新特性，它允许你将组件的DOM结构渲染到DOM树中的任何位置，而不仅仅是组件的根元素内部。这使得你可以更灵活地控制组件的渲染位置，实现一些复杂的布局和交互效果。例如，你可以将模态框（Modal）的DOM结构渲染到元素的末尾，以确保其始终位于页面的最顶层。
Vue 3中的Suspense是什么？

Suspense是Vue 3中引入的另一个新特性，用于处理异步组件的加载过程。通过在Suspense组件中包裹异步组件，并提供一个fallback选项，你可以在异步组件加载过程中展示一个占位符或加载指示器，直到异步组件加载完成并成功渲染。这使得你可以更优雅地处理异步组件的加载和错误情况，提升用户体验。
Vue 3中的Composition API是什么？

Composition API是Vue 3中引入的一套新的API，用于组织和重用Vue组件的逻辑。与Vue 2中的Options API相比，Composition API提供了更灵活、更可复用的代码组织方式。它允许你将组件的逻辑拆分成多个独立的函数（称为"组合函数"或"composables"），每个函数都负责处理特定的功能或状态。然后，你可以将这些组合函数组合起来，形成一个完整的Vue组件。这种方式使得代码更易于测试、维护和复用，特别适用于大型和复杂的Vue应用。
Vue 3 的响应式系统是如何追踪数据变化的？

Vue 3 的响应式系统使用了 ES6 的 Proxy 对象来追踪数据的变化。当数据对象被 Proxy 包裹后，任何对数据的访问或修改都会触发相应的 getter 或 setter 函数，从而可以追踪到数据的变化。当数据变化时，Vue 会触发依赖的更新，重新渲染视图。
Vue 3 的事件修饰符有哪些？

Vue 3 的事件修饰符与 Vue 2 保持一致，主要包括：

.stop：阻止事件冒泡

.prevent：阻止默认事件行为

.capture：使用事件捕获模式

.self：只有当事件在元素本身（而不是子元素）触发时触发回调

.once：事件只触发一次

.left：只当鼠标左键被点击时触发

.right：只当鼠标右键被点击时触发

.middle：只当鼠标中键被点击时触发

.passive：以 { passive: true } 模式调用 eventListener

Vue 3 中的 Fragment 是什么？

在 Vue 3 中，Fragment 允许组件有多个根节点。在 Vue 2 中，组件只能有一个根节点，但在 Vue 3 中，组件可以有多个根节点，这使得组件的结构更加灵活。Fragment 在渲染时会被视为一个虚拟节点，并不会实际创建额外的 DOM 元素。

Vue 3 如何实现组件的懒加载？

Vue 3 使用动态导入（import()）语法来实现组件的懒加载。动态导入允许你按需加载 JavaScript 模块，从而实现组件的延迟加载。在 Vue 中，你可以使用 defineAsyncComponent 函数来定义异步组件，该函数接受一个返回 Promise 的函数作为参数，该 Promise 在解析时应返回一个组件定义。
Vue 3 中的自定义指令如何定义和使用？

在 Vue 3 中，你可以使用 app.directive() 方法来全局注册自定义指令，或者使用组件选项 directives 来局部注册。自定义指令的定义包括一个名字、一个或多个钩子函数（如 bind、inserted、update、componentUpdated 和 unbind）以及一些可选的选项。在模板中，你可以使用 v- 前缀加上指令名来使用自定义指令。
Vue 3 如何与 Web Components 集成？

Vue 3 提供了对 Web Components 的原生支持，允许你在 Vue 应用中直接使用 Web Components。你可以将 Web Components 作为自定义元素在 Vue 模板中使用，也可以使用 Vue 的 h 函数来动态创建和渲染 Web Components。此外，Vue 3 还提供了一些 API 来与 Web Components 进行交互，如 ref、slots 和 events 等。

React面试题

create-react-app demo 创建项目

npm start 运行

npm install react-router-dom -s 添加路由

1, React中有哪些生命周期函数?

componentWillMount() 渲染前 (不建议使用) 卡姆破楞特围殴毛恩特

componentDidMount() 渲染后得特毛恩特

componentWillReceiveProps() 接收props传值时围殴瑞随无铺肉思

shouldComponentUpdate()控制组件是否更新瘦的卡姆破楞特啊破得特

componentWillUpdate() 组件将要更新

componentDidUpdate() 组件已经更新

componentWillUnmount() 组件将要移除卡姆破楞特围殴安某欧特

2, React组件中的state 和 props 有何区别?

• State 是一种数据结构，在组件构造器中定义, 是可读可写的, 用于组件内部数据的初始化和更新。 state中一般只放纯数据

• Props 则是组件的配置。props 由父组件传递给子组件，就子组件而言，props 是只读的。组件不能改变自身的 props，但可以修改传递给子组件的props。props也可以传递回调函数

3, React中keys是什么,有什么作用?

Keys是列表通过map循环时给循环标签添加的属性,用于标记每一个循环的元素

在循环中要保证每一个循环标签keys属性值都不相同

在列表数据更新时, 通过keys可以快速高效的区分哪些元素是新的,然后确保视图更新的正确和高效

4, React组件之间通讯有哪些方式?

父组件向子组件传值: 父组件通过自定义属性向子组件传值,子组件props参数接收并处理

子组件向父组件传值: 父组件通过自定义属性向子组件传函数,子组件props接收函数并调用

非父子组件传值: 在全局作用域下定义变量, 通过在不同组件中对全局变量的赋值与取值来实现组件传值

5, react的优缺点

优点：

可以通过构造函数或类结构描述视图组件,

集成虚拟DOM（渲染性能好）

单向数据流（好处是更容易追踪数据变化排查问题)

一切都是component：代码更加模块化，重用代码更容易，可维护性高

大量使用 es6 新特性

缺点：

jsx的一个问题是，渲染函数render()常常包含大量逻辑，最终看着更像是程序片段，而不是视觉呈现。后期如果发生需求更改，维护起来比较麻烦

功能强大而全面，比vue更难上手

6, react使用单向数据流有什么好处?

单向数据流是对数据传递的一种约束, 他保证了组件的数据传递结构稳定且不易耦合.

数据只能从父组件向下流动到子组件中，反过来则不行。这样会防止从子组件意外改变父级组件的状态 , 极大的降低了我们组件间通信的代码耦合

数据流动单一, 便于追踪, 追查问题比较便捷

7,使用jsx时有哪些注意事项?

Jsx渲染的时候 for 和class不能使用，必须通过htmlfor和classname替代

组件模板外部使用js不能用"{}"包裹，但模板内部必须使用"{}"包裹起来

jsx中不支持单标签写法, html中的单标签必须写成双标签或末尾加/

如果标签有多层嵌套结构, 建议在根标签外层加() 而且()必须跟return在一行

8, 类组件和函数式组件有何不同?

函数式组件通过ES5的构造函数结构创建, 一般以数据的展示为主, 功能简单, 组件中的逻辑代码较少

类组件通过ES6的类结构创建, 允许使用更多功能,如组件状态数据,生命周期钩子, 访问redux仓库等

9, refs的作用是什么?

Refs是React提供给我们安全的访问DOM元素或者某个组件实例的句柄, 它是组件对象this的一个属性, 可以在组件模板中的标签添加ref属性, 然后组件中使用this.refs即可访问对应的DOM元素

10,shouldComponentUpdate函数有什么作用?

shouldComponentUpdate这个函数是用来判断是否需要调用render函数重新描绘DOM, 因为DOM的绘制非常消耗性能, 如果我能能在这个函数中写一些优化算法逻辑,控制DOM绘制的频率和次数, 则能极大的提高网页渲染效率, 优化性能

11, react路由跳转时如何传递数据?

路由传值一共有4中方式:

(1)使用url添加?拼接字符串形式传值, 目标组件使用this.props.location.search 接收路k欣涉恶器

(2)使用友好url动态传值, 目标组件使用this.props.match.params接收

(3)使用query对象传值, 目标组件使用this.props.location.query接收

(4)使用state对象传值, 目标组件使用this.props.location.state接收

此外还可以使用编程式导航跳转路由并传值this.props.history.push()

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

12,什么是Redux?

Redux是一款热门的前端开发库, 它是javascript程序的可预测状态容器,可用于react项目的状态管理, 使用Redux开发的应用易于测试,可以在不同环境中运行,并显示相同行为.

13,Redux有哪三大原则?

1）唯一数据源(整个应用的 state 状态数据被储存在一个状态树(对象)中，单一状态树更容易跟踪数据的变化, 方便调试检查应用程序)

2）State 状态是只读的, 想要更改数据必须经过派发action事件,通过接收action参数修改

3）r必须是纯函数（一个输入必须对应着唯一的输出, 返回值取决于参数）

14,什么情况下建议使用redux?

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

15,React组件之间传递数据有哪些方式?

组件传值: 包括父传子, 子传父, 兄弟组件

路由传值: 包括url拼接传值, 友好url传值和对象传值

Redux传值: 把需要传递的数据放入状态管理中,各组件共享

16, 说一下你对高阶组件的理解

高阶组件: 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组件, 而是一个函数, 这个函数接受一个react组件作为参数,并返回一个新组件, 实现了对原有组件的增强和优化, 可以对原有组件中的state, props和逻辑执行增删改操作, 一般用于代码重用和组件增强优化

17, 高阶组件有哪些实现方式?

属性代理。高阶组件通过被包裹的React组件来操作props, 可以增强组件模板和props

反向继承。高阶组件继承于被包裹的React组件可以更新state

18, 说说你对Hooks组件的理解

hooks组件即使用了hooks语法构建的函数式组件

hooks是react中的一项新功能, 它可以在不使用class类的情况下实现state组件状态和生命周期等功能, 通过useState函数实现组件状态,通过useEffect函数实现生命周期

hooks语法是向下兼容的, 在旧版本的react项目中可用.

hooks 可以很好的替代高阶组件实现组件的抽象和复用

hooks只能在函数式组件中使用, 不能在普通函数或class类组件中使用, 也不建议在循环或判断逻辑中使用

19, Hooks 与 React 生命周期的关系

Hooks可以模拟实现react组件的生命周期,通过API函数useEffect并控制其第二个参数的传入可以模拟组件不同时期的生命周期钩子

20, Hooks 与高阶组件有何区别?

它们之间最大的不同在于，高阶组件仅仅是一种开发模式，它本身是js函数结构, 而hooks是react提供的API模式，它既能更加自然的融入到react的渲染过程也更加符合react的函数编程理念。

21,什么是渲染劫持?

渲染劫持指对一个组件渲染内容的装饰或修改, 一般通过高阶组件来实现, 把一个组件传入高阶组件, 可以对这个组件的模板进行修改后执行渲染, 也可以阻止组件渲染,并修改组件中的数据和逻辑

22,react严格模式有什么作用?

StrictMode严格模式是一个用来突出显示应用程序中潜在问题的工具, 它可以识别不安全的生命周期调用, 警告过时或已弃用的API, 并检测意外的副作用

23,react有状态组件和无状态组件有什么区别?

有状态组件通过class类结构定义,也叫类组件,主要用于处理业务逻辑和做数据交互

无状态组件通过函数结构定义, 也叫函数式组件, 主要用于定义模板,用于数据的展示

24,函数式组件有没有生命周期?

函数时组件默认是没有生命周期的,因为函数式组件的主要功能是展示数据, 如果需要做很多业务逻辑的情况下可以选用类组件,使用类组件的生命周期, 也可以使用hooks提供的useEffect函数模拟实现组件的生命周期

25,什么是受控组件和非受控组件?

受控组件和非受控组件是针对表单组件处理数据时的不同概念

受控组件指组件的状态数据根据用户输入,实时更新,显示在视图中, 例如input标签使用onChange绑定输入事件并通过setSatate函数更新state数据, 此时组件中的数据是可控的

非受控组件指组件状态数据与表单标签没有直接关联, 用户输入与视图更新不同步, 例如input标签没有绑定onChange事件或者value属性, 而使用refs 的DOM查找操作表单数据, 并用作逻辑处理, 此时组件中的数据是不可控的

总之一句话: 受控组件就是内部表单通过了value和onChange绑定的组件

26, 说一说你对react虚拟DOM的理解

虚拟DOM是对DOM的抽象，本质上是JavaScript对象, 即通过js对象模拟DOM中的节点,由于react使用jsx语法构建页面,浏览器无法直接运行jsx, 所以会把jsx结构解析成js对象结构, 然后通过js对象渲染DOM树, 当数据更新时虚拟DOM会通过内部的diff算法,得到节点的变化,从而局部更新变化的DOM节点, 避免了不必要的DOM操作, 提高性能

27, 说一下react虚拟DOM优化性能的实现步骤

用JavaScript对象结构表示DOM树的结构(虚拟DOM)；然后用这个js对象构建一个真实DOM树，插到文档当中

当状态变更的时候，重新构造一棵新的虚拟DOM树。然后通过diff算法比较新的树和旧的树，记录两棵树差异

把diff算法比较的差异更新到步骤1所构建的真正的DOM树上，视图就更新了

28, 说一说虚拟DOM中diff的原理

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，然后用patch记录的不同点去局部更新DOM, 相当于给真实DOM打补丁更新

29, react中如何监听路由

1, 使用react-router-dom路由模块提供的WithRouter高阶组件给根组件props中添加路由对象

2, 在根组件app.js的componentDidMount钩子函数中this.props.history,listen()监听全局路由

注意: 不要在react页面组件中监听路由,因为页面销毁时,路由监听不会取消, 可能造成重复监听

30, react中如何实现样式隔离?

React组件之间默认没有样式隔离, 所有组件的样式都是全局样式,

我们可以给每一个组件根组件添加class值, 在设置这个组件样式时,以根组件class选择器开头, 只在根标签中起效, 以实现组件的样式隔离

小程序面试题

1, 小程序页面有哪些生命周期函数

onLoad: 页面加载

onReady: 页面初次渲染完成

onShow: 页面显示

onHide: 页面隐藏

onUnload: 页面卸载

2, 一个小程序页面有哪些文件组成,分别有什么作用

.wxml: 使用微信框架设计的一套组件构建页面结构

.wxss: 用于设置页面样式, 和css基本一致

.js : 设置页面数据与逻辑

.json: 页面的配置信息

3, 小程序中rpx和px有什么不同

px是固定单位, 指的是物理像素, 小程序样式不建议使用px,而建议用rpx

rpx是相对单位, 小程序把页面宽度统一设置为750rpx, 它可以根据不同屏幕宽度进行自适应,更有利于屏幕适配

4, 列举几个小程序常用组件及用法

view : 视图组件,块级元素, 用于显示块级视图及包裹子视图

text: 文本组件, 用于文字的渲染, 支持换行

Image: 图片组件, 用于渲染本地或在线图片

Button: 按钮组件

Input: 输入框组件

配课Picker: 选择器组件

Swiper: 轮播图组件

...

5, 简述小程序开发流程

首先在微信公众平台注册小程序账号, 获取appID

填写小程序基本信息,并下载微信开发者工具

使用小程序appID创建小程序项目,并编写完善项目

上传小程序项目为测试版, 由测试人员测试并修改BUG

测试完成后,在微信公众平台提交发布, 人工审核通过即可

6, 小程序中有哪些事件

特克斯大特特克斯木屋

tap, touchstart, touchmove, touchend, touchcancel,

Input, change, blue, focus, confirm

7, 简述微信小程序原理

微信小程序采用 JavaScript、WX

ML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现

8,小程序的双向绑定和vue哪里不一样

Vue双向绑定使用v-model指令即可实现

小程序双向绑定需要自己绑定value属性和input事件

而且vue中this.data即可修改数据并更新视图,

小程序中只能用this.setData()修改数据才可更新视图

9,. 微信小程序的优劣势

优势

容易上手，基础组件库比较全，基本上不需要考虑兼容问题；

即用即走，不用安装，省流量，省安装时间，不占用桌面

依托微信流量，天生推广传播优势

开发成本比 App 低

缺点

样式单一，部分组件已经是成型了的，样式不可修改，例如：幻灯片、导航入口

相对传统 App 要深很多

限制较多,页面大小不能超过2M。不能打开超过5个层级的页面

棒嗯特开始太婆

10,bindtap和catchtap的区别？

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的

11,请谈谈WXSS和CSS的异同？

都是用来设置页面样式

WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

WXSS 仅支持部分 CSS 选择器；

WXSS 提供全局样式与局部样式

12,小程序和H5的不同

运行环境不同（小程序在微信运行，h5在浏览器运行）；

开发成本不同（h5需要兼容不同的浏览器）；

获取系统权限不同（系统级权限可以和小程序无缝衔接）；

应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

13, 小程序如何实现分享

只需要实现onShareAppMessage这个函数,即可点击右上角菜单分享 on菜额App买设计

调用API wx.showShareMenu() 开启分享功能, 点击右上角菜单分享瘦塞恩门特

给button组件添加 open-type="share" 属性, 即可点击按钮执行分享

14, 小程序组件中有哪些生命周期函数

created: 组件实例刚刚被创建时执行亏诶特得

attached: 组件实例进入页面节点树时执行

ready: 组件在视图层布局完成时执行

moved: 组件实例被移动到节点树另一个位置时执行木屋特

detached: 组件实例被从页面节点树移除时执行

error: 组件方法抛出错误时执行诶若

15, 小程序中的传值方式有哪些:

(1, 页面(父组件)向子组件传值: 通过调用子组件的props中自定义的属性传值, 或者通过slot插槽传值

(2, 子组件向父组件(页面)传值: 子组件发射自定义事件, 把数据放入事件函数的参数传递

(3, 页面(父组件)主动读取子组件数据, 通过this.selectComponent()函数可得到子组件实例

(4, 页面到页面之间传值: 通过路由传值, 把数据拼接到url路径上传递, 在目标页面用onLoad参数接收

(5, 使用全局状态管理传值: 在app.js中globalData字段定义全局数据, 可以在每一个页面getApp()引入并读写

(6, 使用数据缓存传值, 在一个页面中wx.setStorage存值, 另一个页面wx.getStogage取值

16,如何实现下拉刷新和触底刷新

(1, 页面的下拉刷新功能默认时关闭状态, 可以在json文件中添加字段允许下拉刷新

"enablePullDownRefresh": true 诶类薄剖党瑞发丝

然后,下拉页面会自动调用 onPullDownRefresh()函数, 在这里请求新数据安珀党瑞发丝

最后,数据请求完成的success函数中,调用wx.stopPullDownRefresh停止下拉刷新的状态

四打破党瑞发丝

(2, 触底功能默认开启, 当页面滚动到底部,会调用onReachBottom()函数昂瑞七巴姆

17,你是怎么封装微信小程序的数据请求的？

(1、将所有的接口放在统一的js文件中并导出

(2、在app.js中创建封装请求数据的方法

(3、在子页面中调用封装的方法请求数据

18,小程序中如何解决跨域问题?

开发时, 可在开发工具的设置选项中勾选"不校验合法域名", 以忽略跨域限制

发布时, 需在小程序后台开发设置添加小程序中使用的域名地址,使之合法即可

19, 说一些小程序中的常用API及用法

wx.request 发起网络请求瑞快斯特

wx.navigateTo 执行路由跳转

wx.showModal 展示模态框

wx.downloadFile 下载文件当文楼特菲欧

wx.setStorage 本地存储色漆做耳机

wx.chooseImage 从相册选择图片求死额麦基

wx.getUserInfo 获取用户信息给特思维for

...

20, 小程序如何获取用户信息?

(1, 使用wx.getUserInfo() 这个API,单目前已废除,建议使用以下方式

(2, 给按钮添加open-type="getUserInfo"属性, 用bindgetuserinfo事件绑定函数获取

(3, 使用open-data组件标签,添加type属性获取某一个用户信息

21,微信API有哪些限制让你觉得不爽？

个人开发者不能使用支付API

个人开发者不能用webview组件

某些微信API有调用频次限制,例如分享API

22, 小程序页面跳转navigateTo，redirectTo 瑞得熬头的区别?

navigateTo 指的是路由跳转, 如果跳转到二级页, 导航条会有返回按钮

redirectTo 指的是路由重定向, 不会有历史记录,导航条也就不会有返回按钮

23, 小程序绑定事件怎么传递参数？

在触发事件的组件标签上添加data-前缀的自定义属性,在事件函数中,通过this.currentTarget.dataset打点调用自定义属性获取参数科瑞忒更特

补充Eslint

专业技能

倒排，把最有价值的排到最上面，如Vue、React，微信小程序等应该排前2位，其它往后排

岗位职责

开发相关的描述（分析项目需求和产品原型（axure是产品原型工具，墨刀），搭建项目及设计组件，进行相应的业务逻辑编码和接口调用，配合前端组长对项目代码进行优化，提高代码质量）
配合测试相关的描述（配合测试修改Bug，配合产品经理（或者UI工程师）对页面进行优化，对用户体验进行优化）
对已经上线项目进行相关的维护（包括添加新功能、新页面、修改线上页面细节问题及bug（Bug从哪里来？从项目管理软件中提交的。比如：禅道））
参加各种会议（如项目需求评审会、服务端接口设计评审会议，日常项目管理会议(一般项目增加新功能，改动的业务逻辑过大)）
研究学习类工作（难题/关键技术验证、组件库等技术选型、公司公用代码(公司积累的常用功能代码，比如：各种数据验证插件，权限控制，登录，注册)/开发规范（个人的编码风格：css规范，JS规范）等学习改进）
非开发其它配合类工作（带新人类工作、配合产品经理画原型，配合产品经理或测试写文档（用接口文档工具生成也行，比如：swaggers）等）

项目

注意问题1：应用形态（PC页面、手机内嵌页面（Web App，移动端项目）、微信小程序、公众号等，为啥要做成这种形态？）原因：不同的程序有不同的宿主环境，适应的操作系统也不一样，所以有不同的叫法。
注意问题2：项目背景（公司名称、公司为啥要做这个项目？<这种10年前流行，这种项目能买到现成的产品，这种项目没有商业价值>）

从项目名称中和项目描述中看出你的项目是10年前的项目，你的项目市场上能直接买到现成的源码，不需要开发，你的项目没有商业价值

按时间顺序倒排，最近做的项目在最前面（强制要求：目的重点突出，面试官相对关注最近的项目。）

项目描述：

项目的类型（XXX公司的XXX，XXX行业的XXX，针对XXX类用户的XXX）
开发工具和技术栈：WebStorm、VS Code、Vue全家桶、pxCook（标注工具，比如：马克鳗）、Git、YAPI（为API开发者设计的管理平台）、PostMan（调试接口的工具）、Bug管理系统
是否独立或合作完成

项目职责

负责搭建项目，负责XXXX等模块的需求分析、实现页面、公共组件设计（所谓设计就是决定开发什么组件、组件叫什么名字、组件有哪些属性、插槽、事件等）及实现，业务逻辑编码、接口调用等；
配合测试修改bug，配合产品经理优化用户界面和用户体验；
项目难点的解决<难点是什么、怎么解决的>备注：不要站在上帝视角审视项目，上帝眼里没有难题，要站到菜鸟的角度仰视项目，把学过的知识变成难点描述出来；甚至首次使用Vue、首次做小程序，多页应用都可以
项目特色亮点；备注：只要不是常规的框架内的技术都是特色亮点，如画统计图、地图、音视频播放，动画效果比较多，响应式的，可以与手机App原生代码相互调用的，定位，使了本地存储，支付（相对难），需要与其它应用协作
自己在本项目中的贡献（参与技术验证、技术选型、公共组件库设计与开发、参与接口设计）
项目的成就（项目是否按时完成，顺利完式并上线、领导客户评价）；
项目收获（技术上的大大小小的收获、项目流程上的改进<评审、CodeReview、每天坚持项目例会>、软能力<沟通能力、带人、前端项目组长>上等）。

备注：5、6、7只需要挑2个写在最近的2个项目里就行了。

面试问题

eslint

怎么启用eslint
怎么配置eslint
用哪一套eslint规则？airbnb
常见eslint警告或错误有哪些？
Vue脚手架内置eslint规则有几个级别 recommended

常用的git分支

新项目

master（受保护的分支）

dev（develop）开发分支（只有一个人写项目）

多人合作，每个人建一个自己名字为名称的分支

老项目

dev用来写下一个版的代码

fix-xxxx 用来修复线上版本的bug

new-feature-xxxx 用来快速给线上版本增加新功能

参考资料git-flow

知道WebStorm吗？

激活
设置字体和字号
启动项目、怎么执行npm中的脚本
怎么使用git的各种高级功能
a) 指定文件提交
b) 比较文件差异
c) 管理分支
d) push
e) 合并及解决冲突
重构代码（重命名<哪些文件排除>等，全局搜索替换）
ESLint一键修复、代码格式化

列出你最熟悉的组件库及其组件名

列出这些组件哪些有插槽

最常的Webpack的插件及其功能

HtmlWebpackPlugin
CopyWebpackPlugin

怎么实现Vue多页应用，React呢？

Vue脚手架是怎么实现多页应用的？

https://www.jianshu.com/p/48cc261ac9e0

Vue脚手架项目怎么查看原始的Webpack配置？怎么修改module等配置？

Babel的功能可以分为哪2类？怎么针对浏览器生成最优代码？

提测和项目的测试的流程是什么？你们用哪个bug管理工具？如果你不认某个bug是bug怎么办？如果是其他人的bug分配给你了怎么办？

你们在哪里查看项目的需求和接口文档（用什么项目管理及接口管理工具）？

你们平时都参加什么会议？

各类工作时间占比？

岗位职责：

1.分析项目需求和产品原型

2.设计组件及搭建项目进行相关业务逻辑的开发（一定要了解原型图和modao的基本使用和接口的调用）

3.配合测试修复bug，配合产品经理进行页面效果优化

4.对已经上线的项目进行维护（包括添加新功能，新页面，修改线上bug）

5.参加项目需求、设计、评审会议（参加日常项目管理会议）

6.研究学习类的工作（收集各种组件库的资料、查找某种效果的实现方法）

7.带实习生、帮产品经理画原型图、配合产品经理/测试、写文档（用户说明）

技能问题：

把最熟练最具有价值的写在上面

项目介绍：

1.合作开发还是独立完成

2.列出自己所做的模块

3.共用组件的功能及实现，接口的调用

4.配合测试解决bug，对页面和用户体验进行优化

5.分析响应的需求和效果图（选择使用的组件，通过查找npm或者github等技术网站解决了什么需求）

6.参与本项目的接口设计（配合服务端完成接口设计）

7.项目的难点和亮点

8.项目的成就（是否按时完成，是否顺利上线）

9.项目的收获（项目流程、熟悉的组件库、技术性/非技术性）

技术：

1.ESLint的airbnb规范

2.vue-cli4个校验规则（recommend）

3.vscode中

：在vue项目中运行npm run lint

：安装ESLint插件

4.Git的常用分支

git->master主分支->开发人员1/开发人员2

git->master主分支->Bug分支->

5.webstorm

：了解怎么激活

：设置字体字号

：怎样运行vue项目

：如何运行npm脚本

：如何使用git，怎样push代码，怎样合并代码，怎样解决代码冲突

：如何使用代码重构功能

6.了解webpack插件：html-webpack-plugin、copy-webpack-plugin

软件：modao/墨刀、禅道、YAPI

A：ESLint的airbnb规范

1、简介：

eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。

JSHint 和 JSLint 也是静态代码检查工具，但伴随着发展，他们已经无法满足需求，于是ESlint 诞生了，因次ESlint比它们功能更强大也更灵活。

ESLint 是用 Node.js 写的，可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

2、作用：

ESlint作为代码检查工具，其作用主要有以下几点：

-- 统一代码风格规则，如：缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。

-- 减少错误，如：相等比较必须用 =，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。
-- 提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。
-- 其他。如：禁用alert。这可以提高用户体验，因为 alert 框的外观不是那么好看，而且往往与网站的风格不搭，一般都会自定义 alert 框。
3、eslint官方提供了3种预安装包：
-- eslint-config-google
Google标准
执行安装： npm install eslint eslint-config-google --g
-- eslint-config-standard
Standard标准，它是一些前端工程师自定的标准。
执行安装：npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise --g
-- eslint-config-airbnb
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求。
你可以执行以下命令查看所依赖的各个版本：npm info "eslint-config-airbnb@latest" peerDependencies
知道了每个plugins的版本要求后，代入以下命令执行安装即可使用：npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
4、airbnb规范：
-- 不使用分号/使用分号
-- 不使用逗号结尾/使用逗号结尾
-- 使用let，const，摒弃var
-- 使用字面量创建Object和Array
** 使用空格的规范 **
{}前后要空格、 []前后无需空格、注释符号后面要空格、逗号之后要空格、冒号之后要空格、使用空格把运算符隔开、在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格、在大括号前放置 1 个空格
-- 使用对象方法和属性速记语法
-- 使用表达式创建funtion
-- 只用引号引无效标识符的属性
-- 使用展开符...复制数组（代替 Array.from）
-- 在数组方法回调中使用 return 语句。如果函数体由一个返回无副作用的表达式的单个语句组成，那么可以省略返回值
-- 当访问和使用对象的多个属性时，请使用对象解构
-- 使用数组解构
-- 字符串使用单引号 ''
-- 以编程方式构建字符串时，请使用模板字符串而不是字符串连接
-- 不要使用 arguments，可以选择 rest 语法 ... 替代
-- 使用默认参数语法，而不要使用一个变化的函数参数
-- 不要改变参数
-- 参数不要重新赋值
-- 如果你的函数只有一个参数并且不使用大括号，则可以省略参数括号。否则，为了清晰和一致性，总是给参数加上括号
-- 一个地方只在一个路径中 import(导入)（将所有 import 导入放在非导入语句的上面）
-- 不要使用 iterators（迭代器）。请使用高阶函数，例如 map() 和 reduce() 等，而不是像 for-in 或 for-of 这样的循环
-- 避免使用一元递增和递减运算符(++, --)
-- 尽量使用 === 和 ! 而非 == 和 !=

-- 在 case 和 default 子句中，使用大括号来创建包含词法声明的语句块

-- 三元表达式不应该嵌套，通常写成单行表达式（避免不必要的三元表达式语句）

-- 当运算符混合在一个语句中时，请将其放在括号内。混合算术运算符时，不要将和 % 与 + ， -，*，/ 混合在一起

-- 如果一个 if 块总是执行一个 return 语句，后面的 else 块是不必要的。在 else if 块中的 return，可以分成多个 if 块来 return

-- 在文件末尾插入一个空行

-- 数字: 使用 Number 进行转换，而 parseInt 则始终以基数解析字串

5、eslint webpac中的配置（使用Airbnb编码规则）：

-- 安装eslint-loader：npm install --save-dev eslint-loader

-- 安装eslint：npm install --save-dev eslint

-- webpack.config.js下添加代码

{

test: /.js$/,

loader: 'eslint-loader',

enforce: "pre",

include: [path.resolve(__dirname, 'src')], // 指定检查的目录

options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine

formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范

}

-- 新建配置文件.eslintrc.js

module.exports = {

root: true,

parserOptions: {

sourceType: 'module'

env: {

browser: true,

rules: {

"indent": ["error", 2],

"quotes": ["error", "double"],

"semi": ["error", "always"],

"no-console": "error",

"arrow-parens": 0

}

-- 在package.json中添加

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js",

"lint": "eslint --ext .js,.vue src",//添加此行

"test": "npm run lint"//添加此行

-- 置Airbnb校验规则及其依赖

npm install eslint-plugin-jsx-a11y --save

npm install eslint-plugin-react --save

npm install eslint-plugin-import --save

npm install --save-dev eslint-config-airbnb

-- 在配置文件.eslintrc.js中添加

extends: 'airbnb',

B：Vue-cli的4个校验规则（formatter config）

vue-cli eslint 规则（https://www.cnblogs.com/changhuanran/p/9840581.html）

a．ESLint with error prevention only

b．ESLint + Airbnb config

c．ESLint + Standard config

d．ESLint + Prettier

C：VSCode中配置ESLint

1.下载ESLint 和 vetur插件：在vscode插件中搜索 ESLint 和 vetur

2.安装eslint：npm i eslint --g

打开vs设置：

"extensions.ignoreRecommendations": false,

"editor.wordWrap": "on",

"git.autofetch": true,

"files.autoSave": "onFocusChange",

"eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   { "language": "vue", "autoFix": true }
 ],
 "eslint.options": {
    "plugins": ["html"]
},
"eslint.autoFixOnSave": true,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDragAndDrop": false,

"emmet.triggerExpansionOnTab": true,
"explorer.confirmDelete": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.validation.template": false,

项目package.json文件中：

"scripts": {

...

"lint": "eslint --fix --ext .js,.vue src",

...

},
设立ilnt规则

项目目录下建立.eslintrc.js文件

module.exports = {

root: true,

parser: 'babel-eslint',

parserOptions: {

sourceType: 'module'

},

env: {

browser: true,

node: true,

es6: true,

},

extends: 'eslint:recommended',

// required to lint *.vue files

plugins: [

'html'

],

// check if imports actually resolve

'settings': {

'import/resolver': {

'webpack': {

'config': 'build/webpack.base.conf.js'

}

}

},

// add your custom rules here

//it is base on https://github.com/vuejs/eslint-config-vue

'rules': {

'accessor-pairs': 2,

'arrow-spacing': [2, {

'before': true,

'after': true

}],

'block-spacing': [2, 'always'],

'brace-style': [2, '1tbs', {

'allowSingleLine': true

}],

'camelcase': [0, {

'properties': 'always'

}],

'comma-dangle': [2, 'never'],

'comma-spacing': [2, {

'before': false,

'after': true

}],

'comma-style': [2, 'last'],

'constructor-super': 2,

'curly': [2, 'multi-line'],

'dot-location': [2, 'property'],

'eol-last': 2,

'eqeqeq': [2, 'allow-null'],

'generator-star-spacing': [2, {

'before': true,

'after': true

}],

'handle-callback-err': [2, '^(err|error)$'],

'indent': [2, 2, {

'SwitchCase': 1

}],

'jsx-quotes': [2, 'prefer-single'],

'key-spacing': [2, {

'beforeColon': false,

'afterColon': true

}],

'keyword-spacing': [2, {

'before': true,

'after': true

}],

'new-cap': [2, {

'newIsCap': true,

'capIsNew': false

}],

'new-parens': 2,

'no-array-constructor': 2,

'no-caller': 2,

'no-console': 'off',

'no-class-assign': 2,

'no-cond-assign': 2,

'no-const-assign': 2,

'no-control-regex': 0,

'no-delete-var': 2,

'no-dupe-args': 2,

'no-dupe-class-members': 2,

'no-dupe-keys': 2,

'no-duplicate-case': 2,

'no-empty-character-class': 2,

'no-empty-pattern': 2,

'no-eval': 2,

'no-ex-assign': 2,

'no-extend-native': 2,

'no-extra-bind': 2,

'no-extra-boolean-cast': 2,

'no-extra-parens': [2, 'functions'],

'no-fallthrough': 2,

'no-floating-decimal': 2,

'no-func-assign': 2,

'no-implied-eval': 2,

'no-inner-declarations': [2, 'functions'],

'no-invalid-regexp': 2,

'no-irregular-whitespace': 2,

'no-iterator': 2,

'no-label-var': 2,

'no-labels': [2, {

'allowLoop': false,

'allowSwitch': false

}],

'no-lone-blocks': 2,

'no-mixed-spaces-and-tabs': 2,

'no-multi-spaces': 2,

'no-multi-str': 2,

'no-multiple-empty-lines': [2, {

'max': 1

}],

'no-native-reassign': 2,

'no-negated-in-lhs': 2,

'no-new-object': 2,

'no-new-require': 2,

'no-new-symbol': 2,

'no-new-wrappers': 2,

'no-obj-calls': 2,

'no-octal': 2,

'no-octal-escape': 2,

'no-path-concat': 2,

'no-proto': 2,

'no-redeclare': 2,

'no-regex-spaces': 2,

'no-return-assign': [2, 'except-parens'],

'no-self-assign': 2,

'no-self-compare': 2,

'no-sequences': 2,

'no-shadow-restricted-names': 2,

'no-spaced-func': 2,

'no-sparse-arrays': 2,

'no-this-before-super': 2,

'no-throw-literal': 2,

'no-trailing-spaces': 2,

'no-undef': 2,

'no-undef-init': 2,

'no-unexpected-multiline': 2,

'no-unmodified-loop-condition': 2,

'no-unneeded-ternary': [2, {

'defaultAssignment': false

}],

'no-unreachable': 2,

'no-unsafe-finally': 2,

'no-unused-vars': [2, {

'vars': 'all',

'args': 'none'

}],

'no-useless-call': 2,

'no-useless-computed-key': 2,

'no-useless-constructor': 2,

'no-useless-escape': 0,

'no-whitespace-before-property': 2,

'no-with': 2,

'one-var': [2, {

'initialized': 'never'

}],

'operator-linebreak': [2, 'after', {

'overrides': {

'?': 'before',

':': 'before'

}

}],

'padded-blocks': [2, 'never'],

'quotes': [2, 'single', {

'avoidEscape': true,

'allowTemplateLiterals': true

}],

'semi': [2, 'never'],

'semi-spacing': [2, {

'before': false,

'after': true

}],

'space-before-blocks': [2, 'always'],

'space-before-function-paren': [2, 'never'],

'space-in-parens': [2, 'never'],

'space-infix-ops': 2,

'space-unary-ops': [2, {

'words': true,

'nonwords': false

}],

'spaced-comment': [2, 'always', {

'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']

}],

'template-curly-spacing': [2, 'never'],

'use-isnan': 2,

'valid-typeof': 2,

'wrap-iife': [2, 'any'],

'yield-star-spacing': [2, 'both'],

'yoda': [2, 'never'],

'prefer-const': 2,

'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,

'object-curly-spacing': [2, 'always', {

objectsInObjects: false

}],

'array-bracket-spacing': [2, 'never']

}

}

这样，每次保存时就可以自动fix格式，运行npm run lint格式化整个工程代码

D：Git常用分支

每个公司都有自己的一套git操作模式，但git的各种规范都是相同，

分支命名

master - 主干（默认）

一般master位于线上正式服务器的版本，每一次在 master 上的提交或合并都应该伴随着版本号的变更。（这样会更好的记录和版本回退）

master 分支应保证是随时可发布的（可能包含Bug），每个发布的版本应打上 tag，便于回滚。对于有重大 Bug 的版本，应备注，避免回滚到错误的版本。

feature/* - 特性分支
Example: feature/this-is-a-feature-name，名称中间通过 - 分割。
该分支创建自 master 分支，充分测试后，合并到 master 分支
开发人员使用的分支，针对每一个功能点 issue 创建一个 feature，一般命名规范为 feature/<issue_number>-<feature_name>，该 feature 下的每次提交格式为 #<issue_number> <description>，当 feature 开发完毕后 merge 到 develop，并关闭 issue。
实际开发中，可能有些 feature 算不上什么功能上的需求，不太必要有 issue，所以命名时可以没有 <issue_number>。
实际开发中，每个新特征功能都应该进行独立的测试，所以可能需要发布到测试环境中供测试人员进行测试。目前开发流程不方便部署 feature 分支，所以目前不进行feature 的独立测试。

develop - 测试分支
该分支创建自 master 分支，定期与 master 分支同步，featrue 分支 在本 merge 到 develop 后 push 到 github 进行测试。
测试服运行此分支代码，作为开发环境中的主分支使用，任务是收集各个 feature 分支。
合并到 develop 分支的代码必须是已经完成开发并在本地进行过充分测试的 feature，即 能够交给测试人员测试的版本。
因该分支上可能包含多个 feature，且 多个 feature 可能处于不同阶段，所以该分支一般不合并的到 master

release/* - 预发布版本
预发布版本，当 develop 收集够了做一次版本发布所需的代码，就 checkout -b 出一个 release 分支，作为上线前的最后测试，除了 bugfix 外不接受任何提交。确认发布后分别 merge 到 master 和 develop。
如果能够明确定义版本，且明确定义 某版本包含哪些功能的情况下，可在 某版本 定义的功能全部开发完毕之后，创建 release 分支，进行 master + release 灰度部署。

hotfix/*
紧急修复分支，当 master 上出现 bug 需要修复时，基于 master 创建 hotfix 分支，修复完成后分别 merge 到 master 和 develop。
开发分支中可能存在Bug，直接修改就可以了，无须创建分支修复Bug，所以，hotfix/* 只针对发布的版本。

E：Webstorm

https://jingyan.baidu.com/article/1612d500ae3f98e20e1eee02.html

安装：点击下一步安装，选择32/64-bit launcher，选择.js.css.html，选择jetbrains，点击安装（不运行）。

点击电脑系统时间，修改成未来的某一天，点击软件运行，点击"Evaluate for free for 30 days"进行激活。进入webstorm使用，再把时间调回到当前时间，不影响webstrom的使用

或者去网上找一些激活： 6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWVOYW1lIjoiSmV0cyBHcm91cCIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IklJIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9LHsiY29kZSI6IkFDIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9LHsiY29kZSI6IkRQTiIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJQUyIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJHTyIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJETSIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJDTCIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJSUzAiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUkMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUkQiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUEMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUk0iLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiV1MiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiREIiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiREMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUlNVIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9XSwiaGFzaCI6IjE0Mjg5NzUwLzAiLCJncmFjZVBlcmlvZERheXMiOjcsImF1dG9Qcm9sb25nYXRlZCI6ZmFsc2UsImlzQXV0b1Byb2xvbmdhdGVkIjpmYWxzZX0=-Gd8RATyTEnHcAydKuC7N1ZdeLaMP9IR+nlPyVxvLsczAUTGKxcuAYbfz/uVtepg8ey4NfJlPNS+AGcGz8x7ImkX9jEV9KElMxPu3tKSdF/WKo6JCONX7UtudYa/9EQum3banxci/qH7jejSrFZSN+YjWQiYTR0Q8gq4/a2RyQTgseZfpImY/nXkOWLwWArr/p+4ddp/bWQN4nLTW+Z4ZaQeLE96Z9viCdn62EKOcR02Hfr9Oju9VYQh1L8pGrTqNey5nUSv/LQUbVwo5qoYbBRos8l6ewkFNGsuC3vtOgGWSgkgChbDjWhW4Nkm4vDM2NFAphMsS1dgyPw3eJ3C+6A==-MIIElTCCAn2gAwIBAgIBCTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE4MTEwMTEyMjk0NloXDTIwMTEwMjEyMjk0NlowaDELMAkGA1UEBhMCQ1oxDjAMBgNVBAgMBU51c2xlMQ8wDQYDVQQHDAZQcmFndWUxGTAXBgNVBAoMEEpldEJyYWlucyBzLnIuby4xHTAbBgNVBAMMFHByb2QzeS1mcm9tLTIwMTgxMTAxMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQAF8uc+YJOHHwOFcPzmbjcxNDuGoOUIP+2h1R75Lecswb7ru2LWWSUMtXVKQzChLNPn/72W0k+oI056tgiwuG7M49LXp4zQVlQnFmWU1wwGvVhq5R63Rpjx1zjGUhcXgayu7+9zMUW596Lbomsg8qVve6euqsrFicYkIIuUu4zYPndJwfe0YkS5nY72SHnNdbPhEnN8wcB2Kz+OIG0lih3yz5EqFhld03bGp222ZQCIghCTVL6QBNadGsiN/lWLl4JdR3lJkZzlpFdiHijoVRdWeSWqM4y0t23c92HXKrgppoSV18XMxrWVdoSM3nuMHwxGhFyde05OdDtLpCv+jlWf5REAHHA201pAU6bJSZINyHDUTB+Beo28rRXSwSh3OUIvYwKNVeoBY+KwOJ7WnuTCUq1meE6GkKc4D/cXmgpOyW/1SmBz3XjVIi/zprZ0zf3qH5mkphtg6ksjKgKjmx1cXfZAAX6wcDBNaCL+Ortep1Dh8xDUbqbBVNBL4jbiL3i3xsfNiyJgaZ5sX7i8tmStEpLbPwvHcByuf59qJhV/bZOl8KqJBETCDJcY6O2aqhTUy+9x93ThKs1GKrRPePrWPluud7ttlgtRveit/pcBrnQcXOl1rHq7ByB8CFAxNotRUYL9IF5n3wJOgkPojMy6jetQA5Ogc8Sm7RG6vg1yow==

-- 设置字体字号：

1.webstorm默认的字体大小一般 ,不适合我,接着我就来修改一下。

2.点击"文件/file"------"设置/setting",或者直接Ctrl+Alt+S快捷键。

3.然后用鼠标双击"编辑器/editor"------"颜色和字体/colors&fonts"。

4.接着找到"font",并且用鼠标单击"font"选项。

5.如果是新安装的webstorm,是无法编辑字体大小的,接着我们点击"另存为。如果可以编辑字体，则忽略这一步。

如图，点击另存为会弹出一个"配色方案"窗口，随便命名一下就可以了。
最后预览字体大小效果，合适就点击"确定"即可。如果没有变大则重新启动即可。

-- 运行vue项目：

准备工作：

1：webstorm的安装

2：node.js的安装

3：安装Git

4：vue-cli

Webstorm运行vue项目：

1.利用vue-cli初始化一个vue项目项目

打开webstrom编辑器，选择file，选择open，打开上面创建的vue项目文件
Webstorm调用终端可以使用快捷键：Alt+F12，或者在View菜单手动调用view->tool windows -> terminal

4.输入命令：npm run serve

Webstorm快速启动Vue项目配置

1：点击右上角，添加npm配置/或者下拉箭头。

2：点击加号，选择npm

3:命名并且填写运行命令。（name自定义 command run-script script serve）

4:可以看到控制台出现运行

5:点击绿色按钮，可以看到启动了端口（右上角绿色按钮）

-- 如何使用git，怎么样push代码，怎样合并代码，怎样解决代码冲突

// git常用命令上课讲的很详细了

1、git冲突的场景

情景一：多个分支代码合并到一个分支时；

情景二：多个分支向同一个远端分支推送代码时；

实际上，push操作即是将本地代码merge到远端库分支上。

关于push和pull其实就分别是用本地分支合并到远程分支和将远程分支合并到本地分支

所以这两个过程中也可能存在冲突。

git的合并中产生冲突的具体情况：

<1>两个分支中修改了同一个文件（不管什么地方）

<2>两个分支中修改了同一个文件的名称

两个分支中分别修改了不同文件中的部分，不会产生冲突，可以直接将两部分合并。

2、冲突解决方法

情景一：在当前分支上，直接修改冲突代码--->add--->commit。

情景二：在本地当前分支上，修改冲突代码--->add--->commit--->push

注：借用vim或者IDE或者直接找到冲突文件，修改。

-- webstorm中使用git

https://www.cnblogs.com/yesu/p/10642385.html

-- webstorm重构

https://segmentfault.com/a/1190000016191409

F：webpack插件：html-webpack-plugin/copy-webpack-plugin

-- webpack4 之html-webpack-plugin

html-webpack-plugin插件：

一、说明

webpack-dev-server实现了自动编译刷新浏览器，让编译出来的bundle.js托关于服务器根路径（电脑内存）中去。

使用--contentBase指令指定启动目录（物理磁盘中的页面路径），还需要修改此页面中script标签的src属性（指向url根路径，托管路径），麻烦。除了解决此问题，还需要实现页面也放到内存中，则可以借助于一个webpack插件：html-webpack-plugin，配置启动页面。

二、安装

npm i html-webpack-plugin --save-dev，再项目根目录执行，把插件安装到项目中。

三、基本操作

1、增加webpack配置文件配置（webpack.config.js）。

const htmlWebpackPlugin = require('html-webpack-plugin'); //导入插件

module.exports = {

plugins:[ //配置插件的节点

new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件

template:path.join(__dirname,'./src/index.html'), //指定模板页面

//将来会根据此页面生成内存中的页面

filename:'index.html' //指定生成页面的名称，index.html浏览器才会默认直接打开

})

]

}

2、运行webpack-dev-server，不需要手动处理bundle.js的引用了（托管于根路径页面需要修改引用路径），html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的bundle.js的

-- webpack拷贝插件 copy-webpack-plugin

安装

npm install --save-dev copy-webpack-plugin

作用：在webpack中拷贝文件和文件夹

from 定义要拷贝的源文件 from：__dirname+'/src/components'

to 定义要拷贝到的目标文件夹 to: __dirname+'/dist'

toType file 或者 dir 可选，默认是文件

force 强制覆盖前面的插件可选，默认是文件

context 可选，默认base context可用specific context

flatten 只拷贝指定的文件可以用模糊匹配

ignore 忽略拷贝指定的文件可以模糊匹配

用法

import CopyWebpackPlugin=require('copy-webpack-plugin');

new CopyWebpackPlugin([

{

from: __dirname+'/src/components',

to: __dirname+'/dist',

ignore: ['.*']

}

])

G：modao、禅道、yapi软件的使用

项目模块分析

项目模块分析

一、电商平台

1、注册模块：由于form表单提交会跳转页面，一般采用异步上传（ajax形式），发出注册请求前，通过正则表达式对用户名、密码、手机号进行格式验证（长度、敏感字符等），当用户名表单失去焦点时，向后端发送请求校验用户名是否存在，如果存在则提示用户重新填写。当用户输入手机号点击获取验证码时，携带用户输入的手机号向后端发送请求，接收后端响应的验证码内容（发送到用户手机的短信验证码），用户输入收到的短信验证码填写之后，验证输入内容是否与后端响应内容一致，确认所有内容准确无误后，提交注册请求，注册成功跳转到登录页。

2、登录模块：校验用户名、密码格式，向后端发送请求获取图形验证码路径及验证码内容，当用户输入验证码后，验证是否与后端响应内容一致，若不一致，则重新发送请求更新验证码，若一致，则发起登录请求，登录成功后端响应token，将token存储在cookie或本地存储中(发送请求获取敏感数据时，需携带此token，后端可以根据token获取当前用户信息)，跳转到网站首页。

3、列表模块：向后端请求对应第一页列表数据，根据请求结果更新页面，js中添加触底加载功能（检测浏览器滚动到列表底部时，请求下一页内容）。添加图片懒加载功能（先给图片设置占位图，监听窗口滚动事件，当图片即将出现在视图区域时，赋值真实图片路径，加载图片）。

4、详情模块：请求列表数据时，后端响应内容中会包含商品ID，渲染列表时指定每件商品路径拼接ID参数，当跳转到详情页时，获取路径中携带的ID参数，向后端发起请求，获取当前商品详细信息，进行页面渲染。根据商品ID向后端同类商品接口发起请求，更新页面相似商品列表模块。

5、购物车模块：添加购物车前获取本地存储的token如果不存在则跳转登录页，存在的话，获取token及商品ID向后端发送请求，根据后端响应状态提示用户是否添加成功。进入购物车页面，携带token向后端发起请求，后端根据解析的用户信息响应对应用户的购物车列表，根据结果渲染页面。Js实现商品数量控制及价格总计。点击购买时，让用户选择收货地址及支付方式，携带token、购买商品列表及结算总价向后端发起支付请求。

6、订单模块：进入订单页面，携带token向后端发起请求获取购买商品列表，点击查看进度按钮，获取当前订单商品ID向后端发起请求获取物流进度，根据请求结果进行展示。

7、分享模块：使用qrcode二维码生成工具，将当前页面网站地址生成二维码形式，提示用户使用移动设备扫描分享。（也可以使用bshare应用快速在网页中插入分享功能）

8、评论模块：商品到货之后，可以给商品进行评分，并可晒图评论，提交评论时，通过formdata整合评分信息、评论内容、图片资源、商品ID、token向后端发起请求，根据响应结果提示用户是否提交成功。

9、反馈模块：用户可选择有图反馈，选择图片点击提交，携带反馈文本、手机号、图片信息发起请求。

二、管理系统（罗列常见后台系统包含的模块，通过ajax前后端交互）

1、商品模块：商品管理：商品和商品包的添加、修改、删除、复制、批处理、商品计划上下架、SEO、商品多媒体上传等。商品目录管理：树形的商品目录组织管理，并可以设置关联/商品推荐。商品类型管理：定义商品的类型，设置自定义属性项和商品评论项。品牌管理：添加、修改、删除、上传品牌 LOGO。商品评论管理：回复、删除。

2、销售模块：促销管理：包含目录促销、购物车促销和优惠券促销三类，可以定义不同的促销规则。促销活动：购物折扣、购物赠送积分、购物赠送优惠券、购物免运输费、特价商品、特定会员购买特定商品、折上折、买二送一等。礼券管理：添加、发送礼券。关联/推荐管理，可以支持多种推荐类型。

3、订单模块：订单管理：编辑、解锁、取消订单、拆分订单、添加商品、移除商品、确认可备货等。订单处理完可发起退货、换货流程。支付：常用于订单支付信息的查看和手工支付两种功能。手工支付订单，常用于"款到发货"类型的订单，可理解为对款到发货这类订单的一种补登行为。

4、库存模块：库存管理：引入库存的概念，不包括销售规则为永远可售的商品，一个商品对应一个库存量。库存管理提供增加、减少等调整库存量的功能;另外，也可对具体的产品设置商品的保留数量、最大库存量、再进货数量。每条商品的具体库存操作都会记录在库存明细记录里边。退/换货：对退/换货的订单进行收货流程的处理。

5、内容模块：内容管理：包括内容管理以及内容目录管理。内容目录由树形结构组织管理。类似于商品目录的树形结构，可设置目录是否为链接目录。创建独立内容网页，比如关于我们，联系我们。广告管理：添加、修改、删除、上传广告、定义广告有效时限。设置商城导航栏目以及栏目内容、栏目链接。

6、客户模块：客户管理：添加、删除、修改、重设密码、发送邮件等。 2.反馈管理：删除、回复。消息订阅管理：添加、删除、修改消息组和消息、分配消息组、查看订阅人。会员资格：添加、删除、修改。

7、系统模块：安全管理：管理员、角色权限分配和安全日志。系统属性管理：用于管理自定义属性。可关联模块包括商品管理、商品目录管理、内容管理、客户管理。运输与区域：运输公司、运输方式、运输地区。支付管理：支付方式、支付历史。数据导入管理：商品目录导入、商品导入、会员资料导入。邮件队列管理：监控邮件发送情况，删除发送异常邮件。

8、报表模块：统计报表，支持时间段过滤、支持按不同状态过滤、支持HTML、PDF和Excel格式的导出和打印。包含用户注册统计、低库存汇总、缺货订单、订单汇总、退换货。
高频面试题

什么是跨域请求，怎样实现跨域请求。

一个页面发送到非本身来源的请求叫做跨域请求，浏览器只禁止ajax跨域请求。

三种跨域请求的方式：

1，cors，服务器在响应头中添加access control allow origin字段，浏览器在收到请求之后就会认为本次请求时允许跨域的。

2，JSONP,浏览器使用创建script标签的形式发送请求，将一个函数名作为请求参数发给服务器，服务器将需要返回的数据封装在一段js代码中（把前端发来的函数名进行调用，把要发送的数据作为参数），然后把这段代码返回给前端，前端立刻执行这个函数。

3，代理服务器，将请求先发送给代理服务器，代理服务器装发给目标服务器。

Ajax中get和post两种请求方式的区别

（1）运行速度：get请求简单，运行速度也更快（存在缓存）；

（2）缓存：get存在缓存（优：提升速度，缺：不能及时获取最新数据）post没有缓存；

（3）数据储量：get有数据量的限制，post则没有限制

（4）数据安全：发送包含未知字符的用户输入时，post比get 更稳定也更可靠；

（5）传参方式：get参数拼接在url后，post放在send里面并且需要设置请求头xmr.setRequestHeader("content-type","application/x-www-form-urlencoded")

webpack工具的功能是什么？

Webpack是为前端开发设计的自动化打包工具，能够对项目中的js、css、图片等资源进行打包（其中js可以直接打包，其他类型资源需要各自对应的loader支持），相比于传统的grunt、gulp等构建工具，webpack在打包js代码时，能够识别多种模块化语法，进行模块化打包。

Webpack还可以配合脚手架工具构建项目的框架

什么是WebWorker？在哪些场景下需要使用WebWorker？

箭头函数和普通函数的区别

箭头函数内部this跟函数所在上下文this保持一致
没有arguments参数集合，可以用rest替代
不能使用call、bind、apply来改变this的指向

怎么隐藏页面中的某个元素？

Display:none; 隐藏且不占用位置。

Visibility:hidden; 隐藏但保留位置。维斯贝类忒

Opacity:0; 隐藏但保留位置。欧怕四提

怎样实现元素上下左右都居中？

(1，实现元素本身内容居中：text-align:center+行高。

(2，实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。

(3, 使用flex弹性布局

(4, 绝对定位+left,top:50%+transform:translate:-50%。

vue create demo 创建项目、

cd demo

npm run serve

npm install axios -s 请求axios数据

npm install element-ui -s

npm install vue-lazyload -s 懒加载

的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

vue组件中如何获取dom元素?

使用ref属性获取, 在组件模板元素中添加r ef属性, 在js中用this.$refs获取

说几个vue中的指令和它的用法？

v-model双向数据绑定；

v-for循环；

v-if, v-show 显示与隐藏；、

v-bin*d 动态绑定属性

v-on事件绑定；

v-once: 只绑定一次。 V-忘词

v-if 和 v-show 到底有什么区别何时用v-if 何时用v-show

1.共同点

都是动态显示DOM元素

2.区别

（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：v-if切换有首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

v-on指令可以同时监听多个函数吗?

可以, v-on的事件监听类似于DOM原生api添加事件监听者addEventListener add伊文特雷斯特

vue循环中为什么使用key?

分别简述computed和watch的使用场景

computed:

当一个属性受多个属性影响的时候就需要用到computed

例子：购物车商品结算的时候

watch:

当一条数据影响多条数据的时候就需要用watch

例子：搜索数据

列举一下Vue组件生命周期函数，什么时候需要在destroyed中写代码？

1 beforeCreate: 可以发请求，但是不能赋值给data里面的数据科瑞特

2 created 发请求初始渲染的工作在此处执行亏诶特得

3 beforeMount 虚拟DOM生成，数据未挂载 ·

4mounted 虚拟DOM解析。数据已经挂载进行获取DOM元素毛武特

5 beforeupdate 数据更新之前调用

6 updated 数据更新之后调用

7 beforedestroy 在销毁之前调用得死错

8 destoryed 在销毁之后调用定时器清除，事件移除都可以在此处去写当前页面有事件监听器或者计时器时,需要在destroyed中取消或销毁得死搓耳的

vue路由的钩子函数有哪些?

全局的路由钩子函数：beforeEach、afterEach

单个的路由钩子函数：beforeEnterg 比fro安特

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

如特安特如特礼物如特啊珀得特

介绍以下vue组件内的路由守卫(即路由的生命周期/钩子函数)，有哪些参数+（to，from，next）

vue组件中的路由钩子方法有

beforeRouteEnter 进入路由前调用。这里组件还未创建, 不能使用this

beforeRouteUpdate 路由更新之前被调用, 组件不会重新初始化, 可以使用this

beforeRouteLeave 离开路由之前被调用，可以访问里面的this属性

方法中都有三个参数:

to:即将要进入的目标路由对象；

from:当前导航即将要离开的路由对象；

next ：调用该方法后，才能进入下一个路由钩子函数内科斯特

vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？

Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。

v-model相当于 v-bind:value 加 v-on:input

vue中怎么实现非父子组件之间的传值？

在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。

大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。四座e

也可以在路由跳转时,通过路由传值

vue中路由如何传值?

(1, 使用url拼接字符串的形式传值使用 r o u t e . q u e r y 接收奎锐 ( 2 , 使用友好 U R L 传值使用 route.query接收奎锐 (2, 使用友好URL传值使用 route.query接收奎锐(2,使用友好URL传值使用route.params接收派瑞e门市

vue中有哪些数据传递方式?

(1, 组件传值: 父传子,通过props属性或slot插槽传递, 子传父,通过$emit发射自定义事件传递, 非父子,通过bus总线传递

(2, 路由传值: 可通过url路径传值和编程式导航对象传值

(3, vuex状态管理传值

vuex如何使用?

首先在项目中 npm install vuex 安装

新建vuex状态管理文件,导入vuex并添加状态数据

在组件中使用mapState()函数映射状态数据并使用四得特

在组件中使用commit()函数提交申请修改状态数据

可门特

vue中如何处理跨域请求

vue中处理跨域请求一般要设置代理服务器实现跨域, 得色舞

在vue项目的根目录中手动创建vue.config.js配置文件,在devServer字段中配置服务器代理

在使用axios请求数据时直接使用代理地址艾科谁藕丝

axios和ajax的区别：

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

vue和react有哪些异同点?

相同点

(1, 都通过虚拟DOM实现了视图的渲染与更新

(2, 都是组件化编程, 把整个项目分割成一个个的组件来实现

(3, 都有单向数据流的规则执行数据流动, 父组件通过props属性向子组件传值

不同点瑞爱科特

(1, vue常用html标签模板,使用js实现逻辑,视图与逻辑分离, react使用jsx语法实现模板, html与js相结合

(2, vue组件中的data数据可以直接调用并更新而react中的state数据需要使用setState()函数执行更新

(3, vue属于渐进式前端框架,更适用于开发小型,灵活的项目, react生态更丰富,更适用于开发专业,大型的项目

(4, vue在组件中提供了指令,过滤器,属性监听等,可以方便快捷的操作DOM

vue有哪些常用的UI组件库

element (PC端)，

VUX (移动端),

Mint UI(移动端) 门特

Vant (移动端) 万特

vue中v-if和v-show有什么区别

v-if的原理是根据判断条件来动态的进行增删DOM元素, 比较耗费性能和内存, 频繁显示隐藏不建议使用

v-show是根据判断条件来动态的进行显示和隐藏元素, 通过设置样式display为block和none来实现, 适用于频繁显示隐藏的情况

vue有哪些优缺点:

优点:

(1 简单好用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。

(2 单页面应用, 使用单文件组件结构, 用户体验好,

(3 性能比较好：相比其他框架, 它占用更少的空间，并提供更好的性能。

(4 基于MVVM模式, 数据驱动视图, 更高效

(5 适应性强：组件化设计可以提高开发效率,方便代码复用, 提升整个项目的可维护性

缺点:

(1, vue生态环境不如react和angular, 但有追赶和超越的趋势安哥拉

(2, vue不支持IE8

(3, vue封装的比较深入,不利于seo优化, 报错不明显,

什么是MVVM?

vue项目怎么打包app ?

(1 首先使用webpack打发布包, npm run build 文帕克

(2 然后通过Hbuilder 新建H5+App项目

(3 把第一步打包出的dist文件夹导入项目

(4 在项目中的manifest.json文件中进行打包配置没类粉丝特

(5 点击Hbuilder工具菜单栏发行中的原生App-云打包

vue中虚拟DOM的实现原理

vue组件中如何监听路由?

也可以在全局路由守卫beforeEach函数中操作全局路由

vue中如何实现父子组件间的双向数据绑定?

Vue中父子组件双向绑定利用父子组件传值原理,

父组件向子组件传值, 通过给子组件定义value属性来接收传值

子组件向父组件传值, 通过子组件$emit发射名为input的自定义事件

在父组件中使用子组件标签时, 在子组件标签上通过v-model绑定父组件数据,实现父子组件的双向绑定

vue项目中如何使用sass?

1, 下载安装sass模块 npm install sass --save

2, 在组件的style标签上添加lang="scss"

Vue.nextTick()方法有什么作用？内克斯泰克

当vue中动态数据修改时,会导致界面的更新,而界面的更新属于异步更新, 当打印界面数据时, 异步更新尚未完成, 所以打印结果是更新之前的数据

Vue.nextTick表示异步更新函数, 其参数是更新完成的回调函数

Js数据类型有哪些？

数值、字符串、布尔、undefined、null、数组、对象、函数

React中有哪些生命周期函数?

componentWillMount() 渲染前 (不建议使用) 卡姆破楞特围殴毛恩特

componentDidMount() 渲染后得特毛恩特

componentWillReceiveProps() 接收props传值时围殴瑞随无铺肉思

shouldComponentUpdate()控制组件是否更新瘦的卡姆破楞特啊破得特

componentWillUpdate() 组件将要更新

componentDidUpdate() 组件已经更新

componentWillUnmount() 组件将要移除卡姆破楞特围殴安某欧特

react路由跳转时如何传递数据?

路由传值一共有4中方式:

(1)使用url添加?拼接字符串形式传值, 目标组件使用this.props.location.search 接收路k欣涉恶器

(2)使用友好url动态传值, 目标组件使用this.props.match.params接收

(3)使用query对象传值, 目标组件使用this.props.location.query接收

(4)使用state对象传值, 目标组件使用this.props.location.state接收

此外还可以使用编程式导航跳转路由并传值this.props.history.push()

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

React组件之间传递数据有哪些方式?

组件传值: 包括父传子, 子传父, 兄弟组件

路由传值: 包括url拼接传值, 友好url传值和对象传值

Redux传值: 把需要传递的数据放入状态管理中,各组件共享

说一下你对高阶组件的理解

高阶组件有哪些实现方式?

属性代理。高阶组件通过被包裹的React组件来操作props, 可以增强组件模板和props

反向继承。高阶组件继承于被包裹的React组件可以更新state

说说你对Hooks组件的理解

hooks组件即使用了hooks语法构建的函数式组件

hooks语法是向下兼容的, 在旧版本的react项目中可用.

hooks 可以很好的替代高阶组件实现组件的抽象和复用

hooks只能在函数式组件中使用, 不能在普通函数或class类组件中使用, 也不建议在循环或判断逻辑中使用

Hooks 与 React 生命周期的关系

Hooks可以模拟实现react组件的生命周期,通过API函数useEffect并控制其第二个参数的传入可以模拟组件不同时期的生命周期钩子

Hooks 与高阶组件有何区别?

什么是渲染劫持?

,react严格模式有什么作用?

StrictMode严格模式是一个用来突出显示应用程序中潜在问题的工具, 它可以识别不安全的生命周期调用, 警告过时或已弃用的API, 并检测意外的副作用

react有状态组件和无状态组件有什么区别?

有状态组件通过class类结构定义,也叫类组件,主要用于处理业务逻辑和做数据交互

无状态组件通过函数结构定义, 也叫函数式组件, 主要用于定义模板,用于数据的展示

,函数式组件有没有生命周期?

什么是受控组件和非受控组件?

受控组件和非受控组件是针对表单组件处理数据时的不同概念

总之一句话: 受控组件就是内部表单通过了value和onChange绑定的组件

说一说你对react虚拟DOM的理解

说一下react虚拟DOM优化性能的实现步骤

用JavaScript对象结构表示DOM树的结构(虚拟DOM)；然后用这个js对象构建一个真实DOM树，插到文档当中

当状态变更的时候，重新构造一棵新的虚拟DOM树。然后通过diff算法比较新的树和旧的树，记录两棵树差异

把diff算法比较的差异更新到步骤1所构建的真正的DOM树上，视图就更新了

说一说虚拟DOM中diff的原理

react中如何监听路由

1, 使用react-router-dom路由模块提供的WithRouter高阶组件给根组件props中添加路由对象

2, 在根组件app.js的componentDidMount钩子函数中this.props.history,listen()监听全局路由

注意: 不要在react页面组件中监听路由,因为页面销毁时,路由监听不会取消, 可能造成重复监听

react中如何实现样式隔离?

React组件之间默认没有样式隔离, 所有组件的样式都是全局样式,

我们可以给每一个组件根组件添加class值, 在设置这个组件样式时,以根组件class选择器开头, 只在根标签中起效, 以实现组件的样式隔离

两种情况：

用户登录，购物车存入redis中

用户未登录，购物车存入cookie中

比较两种方式的优缺点：

cookie：优点：数据保存在用户浏览器中，不占用服务端内存；用户体检效果好；代码实现简单

缺点：cookie的存储空间只有4k；更换设备时，购物车信息不能同步；cookie禁用，不提供保存

redis：优点：数据能够持久化；实现了购物车同步

缺点：增加了数据库的压力，速度慢

先介绍使用cookie存储购物车的实现思路

1、用户未登录状态下，用户添加购物车，首先从cookie中查询购物车中的商品列表

2、判断cookie的商品列表中是否有要添加的商品信息

3、如果cookie中有该商品信息，将商品的数量相加

4、如果没有，根据商品的id值查询商品信息

5、将商品添加到购物车列表中

6、将购物车列表写入cookie中，设置cookie的过期时间

7、将cookie返回给客户端。

购物车的实现：

登录基本流程
验证码
后端生成验证码：

• 前端生成验证码：

•

HTTP与HTTPS有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要如下：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

$router是一个VueRouter的实例可以导航到不同的路由里 r o u t e 是 route是 route是router跳转到的当前一个对象，里面包含该对象的path、query、name 、params 在Vue中，$ router指向的是大路由，routes是路由配置数组， r o u t e 指向的是当前活跃的路由。 1 x x 信息响应：这些状态码表示临时的响应，等待客户端继续操作 2 X X 请求成功 s s s （ 1 ） 200 − O K （请求成功）（ 2 ） 204 − N o C o n t e n t （无内容）（ 3 ） 206 − P a r t i a l C o n t e n t （部分内容） 3 X X 重定向（ 4 ） 301 − M o v e d P e r m a n e n t l y （永久移动）（ 5 ） 302 − F o u n d （临时移动）（ 6 ） 303 − S e e O t h e r （查看其他地址）（ 7 ） 304 − N o t M o d i f i e d （未修改）（ 8 ） 307 − T e m p o r a r y R e d i r e c t （临时重定向） 4 X X 客户端错误（ 9 ） 400 − B a d R e q u e s t （错误请求）（ 10 ） 401 − U n a u t h o r i z e d （未经授权）（ 11 ） 403 − F o r b i d d e n （拒绝请求）（ 12 ） 404 − N o t F o u n d （无法找到） 5 X X 服务器错误（ 13 ） 500 − I n t e r n a l S e r v e r E r r o r （内部服务器错误）（ 14 ） 503 − S e r v i c e U n a v a i l a b l e （服务不可用）传值的方式父传子：在子组件标签上绑定自定义属性名 t o C h i l d V a l , 属性值为父组件需要传递的数据 v a l ; 子组件内部通过 p r o p s 接受自定义属性名 t o C h i l d V a l 子传父：在子组件 m e t h o d s 中通过 t h i s . route指向的是当前活跃的路由。 1xx信息响应：这些状态码表示临时的响应，等待客户端继续操作 2XX 请求成功sss （1）200 - OK（请求成功）（2）204 - No Content（无内容）（3）206 - Partial Content（部分内容） 3XX 重定向（4）301 - Moved Permanently（永久移动）（5）302 - Found（临时移动）（6）303 - See Other（查看其他地址）（7）304 - Not Modified（未修改）（8）307 - Temporary Redirect（临时重定向） 4XX 客户端错误（9）400 - Bad Request（错误请求）（10）401 - Unauthorized（未经授权）（11）403 - Forbidden（拒绝请求）（12）404 - Not Found（无法找到） 5XX 服务器错误（13）500 - Internal Server Error（内部服务器错误）（14）503 - Service Unavailable（服务不可用）传值的方式父传子：在子组件标签上绑定自定义属性名toChildVal,属性值为父组件需要传递的数据val; 子组件内部通过props接受自定义属性名toChildVal 子传父：在子组件methods中通过this. route指向的是当前活跃的路由。1xx信息响应：这些状态码表示临时的响应，等待客户端继续操作2XX请求成功sss（1）200−OK（请求成功）（2）204−NoContent（无内容）（3）206−PartialContent（部分内容）3XX重定向（4）301−MovedPermanently（永久移动）（5）302−Found（临时移动）（6）303−SeeOther（查看其他地址）（7）304−NotModified（未修改）（8）307−TemporaryRedirect（临时重定向）4XX客户端错误（9）400−BadRequest（错误请求）（10）401−Unauthorized（未经授权）（11）403−Forbidden（拒绝请求）（12）404−NotFound（无法找到）5XX服务器错误（13）500−InternalServerError（内部服务器错误）（14）503−ServiceUnavailable（服务不可用）传值的方式父传子：在子组件标签上绑定自定义属性名toChildVal,属性值为父组件需要传递的数据val;子组件内部通过props接受自定义属性名toChildVal子传父：在子组件methods中通过this.emit提交自定义事件

在子组件标签上绑定这个自定义事件,之后通过自定义事件的传参msg接收参数输入框输入值，点击按钮后方可传值

3、兄弟组件传值：

新建bus.js,新建空的vue对象，导出空对象

A，B组件导入bus.js,组件A通过bus. e m i t ( " x x x " , v a l ) 推送数据组件 B 通过 b u s . emit("xxx",val)推送数据组件B通过bus. emit("xxx",val)推送数据组件B通过bus.on接收数据

输入框输入值，点击后方按钮传值

4、如何向服务端上传图片文件？

form上传文件

这是最原始的一种方式，最开始学习web的时候就是使用这种方式提交。

注意：在form表单中如果要上传文件，一定要设置这个参数： enctype="multipart/form-data"表示封装数据类型，把数据分成一个一个小段传输。

在后端要注意上传过来的文件是通过request.FILES.get()方法接收的。

5、数组api中filter和map的区别?

filter做了一个过滤，返回的新数组并不会改变原子项。
2.map做了一个映射，返回的新数组可以改变原来的原子项。

vue和react的主要区别有:

1、vue是响应式的数据双向绑定系统，而react是单向数据流，没有双向绑定。

2、vue的语法较为简单，适用于小型项目创建，而react更适用于Web端和原生App的开发侧重于大型应用。

3、vue拥有更快的渲染速度和更小的体积,react则拥有更大的生态圈可以带来更多的工具支持。

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计其核

心库只关注视图层，并且非常容易学习，也易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组

件和Vue生态系统支持的库开发的复杂单页应用。

Vue通过以下措施来提升diff的性能:

1.优先处理特殊场景，特殊场景一般有:

（1）、头部的同类型节点、尾部的同类型节点

就是这类节点更新前后位置没有发生变化，所以不用移动它们对应的DOM

（2）、头尾/尾头的同类型节点

这类节点位置很明确，不需要再花心思查找，直接移动DOM就好

"原地复用"

例如：2个不同的div，在DOM上它们是不一样的，但是它们又属于同类节点，如果是同类节点，那么Vue会直接复用这个DOM，这样的好处是不需要移动DOM。假如10个节点都是div，那么整个diff过程中就没有移动DOM的操作了。

关于使用代理解决跨域问题的原理

为了安全着想浏览器会设置同源安全策略

即不在同一个域名下的资源就不能够互相访问

要解决这个问题方法有很多，但大致分为两类：

1 是服务端进行设置默认允许某些域名跨域访问

2 从客户端入手想办法绕开同源安全策略

主要介绍从客户端入手，用代理的方式实现跨域访问的原理

举个栗子：

用node起了一个localhost:8080的服务器

那么在这个服务器下访问的网页也就是默认在8080这个域下面

假设服务端所在的域是www.njc.com

这样通过ajax发送请求的话

由客户端直接传过去的就是一个域名为localhost：8080的请求

而服务端所在的域是 www.nj1c.com

域名不同跨域请求失败

把栗子放下；

到这里可以看出跨不跨域实际上是由客户端(浏览器)来告诉服务器的

这也就为实现跨域访问提供了实现的基础

通过一些方法设置代理，在请求发送(接收)之前加入中间层，

将不同的域名转换成相同的

就解决了跨域的问题

依旧以上面的栗子：

客户端发送请求时

不直接到服务器

而是先到代理的中间层

在这里将 localhost:8080 的这个域名装换为 www.nj1c.com，

再将请求发送到服务器

这样在服务器端收到的请求就是使用的www.nj1c.com域名

同理，当服务器返回数据的时候，也是先到代理的中间层

将 www.nj1c.com 转换成 localhost:8080；

前端优化性能的方法；

优化的目的

优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。

网络优化

减少 http 请求数，css，js, image 等文件压缩合并，合理设置 http 请求缓存。
样式放头部，脚本放底部。
使用 CDN。
按需加载，显示进度条或者 loading
css优化
避免使用 CSS 表达式
尽可能减少CSS选择器的层级
减少 TABLE 布局
移除空的样式
图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；
JS优化
减少闭包的使用。过多使用闭包会产生很多不销毁的内存，内存过多会导致内存溢出。
避免使用iframe, iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢。
减少 dom 操作，减少页面重绘和重排。使用 css3 动画
尽可能使用事件委托。事件委托可以给动态元素绑定事件，而且基于事件委托实现，整体性能会比一个一个绑定事件高50%。
注意防抖和节流
图片优化：
不用图片，尽量用 css3 代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用 CSS 达成。
使用矢量图 SVG 替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持 SVG 了，所以可放心使用！
使用恰当的图片格式。我们常见的图片格式有 JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于 JPEG。而修饰图片通常更适合用无损压缩的 PNG。GIF 基本上除了 GIF 动画外不要使用。且动画的话，也更建议用 video 元素和视频格式，或用 SVG 动画取代。
按照 HTTP 协议设置合理的缓存。
使用字体图标 webfont、CSS Sprites 等。
图片懒加载与预加载
图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载
为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址;

Vue组件封装过程

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

1）能够把页面抽象成多个相对独立的模块

2）2）实现代码重用，

3）提高开发效率和代码质量，使得代码易于

webpack部分

webpack的构建流程

初始化流程：从配置文件和shell语句中读取和合并参数，并初始化需要使用的插件和配置插件执行环境所需要的参数

编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理

输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统，比如dist

loader

一种对模块源码转换的工具，让webpack有处理不同类型文件的能力，原理是链式调用，就是把模块给第一个loader处理，再把这个处理结果给下一个，直到最后一个loader处理完，返回处理结果。常见的有：

style-loader

css-loader

less-loader

scss-loader

url-loader

babel-loader：转换es5

插件

一种用于扩展webpack功能的工具，用于对webpack进行优化和扩展，优化打包效率、提取公共代码、自动生成html代码等等，常见的有：

htmlwebpackplugin：自动生成html文件

cleanwebpackplugin：自动清空目录，比如打包回删除dist文件

minicsswebpackplugin：将css打包成单独的文件

copywebpackplugin：复制静态文件到目录

hotmodulereplacementplugin：热更新

webpackbundleanalyzer：分析打包结果，可视化打包报告

热更新

hmr，可以理解为模块热替换，就是你启动项目了之后，替换、添加、更新模块不用重新启动，刷新整个应用

通俗的来说就是可以让开发者实时看到更新，它会启动一个websocket服务器来监听文件变化，当文件变化的时候通过hmr给浏览器发送通知，浏览器根据这个消息进行更新操作

Vite4部分

Webpack配置方法

https://blog.csdn.net/m0_60505147/article/details/127236252?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171738359616800178574223%2522%252C%2522scm%2522%253A%252220140713.130102334...%2522%257D\&request_id=171738359616800178574223\&biz_id=0\&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive\~default-1-127236252-null-null.142^v100^pc_search_result_base6\&utm_term=webpack配置\&spm=1018.2226.3001.4187

vite是什么

vite就是一个开发服务器

vite为什么能做到秒开

利用现代浏览器的es模块的特性，不需要打包，可以快速构建环境

因为vite的预构建做到了以下四点：

自动补全模块 -- lodash

统一导出格式，把第三方包的导出格式统一为 export default格式

把内部多个模块的依赖项变成一个模块

vite.config.js配置

optimizeDeps{

exclude:['依赖包']，//不进行变成单一模块

//include 强制进行预构建

}

把缓存做成了俩种

文件缓存：依赖项缓存在nodemodules里面

浏览器缓存：依赖项使用强缓存Cache-Control和协商缓存If-None-Match

vite的分包

原理：基于es module的动态导入特性

分包方式：

手动分包：手动分包需要在代码中显示指定哪些模块需要分包，然后使用动态按需加载。

自动分包：根据代码的模块导入关系自动将相关模块打包

cdn

vite的内容分发网络

作用：

提高访问稳定性

加速静态资源加载

减轻服务器压力

工作原理：

内容缓存：cdn服务器会储存静态资源在全球各地的节点上，如果用户访问需要加载静态资源就会从最近的cdn节点获取，提高加载速度

请求转发：用户访问浏览器需要请求获取数据会自动转发请求到最合适的节点获取资源数据，并且缓存以备后续访问

负载均衡：cdn可以根据当前节点的负载情况和网络状态来动态选择最合适的节点来处理请求，实现负载均衡，提高访问稳定性

vite查看项目体积

通过rollup-plugin-visualizer插件

Vite配置方法

https://blog.csdn.net/UserLiangjia/article/details/132845392?ops_request_misc=\&request_id=\&biz_id=102\&utm_term=vite配置\&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb\~default-2-132845392.nonecase\&spm=1018.2226.3001.4187

qiankun微前端

什么是 qiankun 微前端？

qiankun 是一个基于 single-spa 的微前端实现库，可以帮助我们将多个独立的前端应用整合成一个整体，并且可以独立开发、独立部署、独立运行。
qiankun 微前端的优势是什么？

qiankun 微前端的优势包括：

可以将多个独立的前端应用整合成一个整体，提高了代码复用性和可维护性。

可以独立开发、独立部署、独立运行，提高了开发效率和部署灵活性。

可以实现子应用之间的通信和数据共享，提高了应用之间的协作能力。

可以实现子应用的按需加载和动态卸载，提高了应用的性能和用户体验。

qiankun 微前端的核心概念有哪些？

qiankun 微前端的核心概念包括：

主应用：整个微前端应用的入口，负责加载和管理子应用。

子应用：独立的前端应用，可以独立开发、独立部署、独立运行。

生命周期：主应用和子应用之间的生命周期钩子，用于控制应用的加载、启动、卸载等过程。

沙箱：用于隔离子应用的 JavaScript 执行环境，防止子应用之间的冲突和污染。

应用间通信：主应用和子应用之间的通信机制，用于实现数据共享和事件传递。

qiankun 微前端的基本使用流程是什么？

qiankun 微前端的基本使用流程包括：

在主应用中安装 qiankun 库，并注册需要加载的子应用。

在子应用中导出一个生命周期对象，并在主应用中注册该子应用。

在主应用中启动 qiankun 应用，并指定需要加载的子应用。

在主应用中渲染子应用的容器，并在容器中加载子应用。

在主应用和子应用中实现应用间通信和数据共享。

qiankun 微前端的子应用如何实现按需加载？
qiankun 微前端的子应用如何实现动态卸载？
qiankun 微前端的子应用如何实现与主应用的通信？
qiankun 微前端的子应用如何实现与其他子应用的通信？
qiankun 微前端的子应用如何实现路由跳转？
qiankun 微前端的子应用如何实现样式隔离？

Gitfolw

https://zhuanlan.zhihu.com/p/432381986