前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）

前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）

前端理论考核题

---

1 / HTML

---

1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?
!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。

标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！

具体区别
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
2.html5为什么只需要写?你知道多少种Doctype文档类型？
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。
3.行内元素有哪些？块级元素有哪些？ 行内块元素有那些？
行内元素：
特点：就可以和其他元素在一行显示，不能自动换行，不能设置宽高
常见行内元素：a，span,i,u,em,sub,sup
块级元素：
特点：不可以和他的元素在一行，可以自动换行，可以设置宽高
常见的块级元素：div,p,h,ul,li,dl,dt,dd
行内块级元素：
特点：可以和其他元素保持在一行，还能设置宽高
常见元素：textarea,input,img,button。
4.请说出五种html5的特性
兼容模式

（1）语义化标签：header,footer,nav etc.
（2）canvas 画布
（4）drag 拖拽
（5）本地存储 localStorage, sessionStorage
（6）webSocket 长连接
（7）定位
（8）增强型表单 input number, datalist, keygen, output, progress
（9）svg 矢量绘图
（10）webWorker 实现js多进程。

6.简述a标签target属性的取值和作用？
_black：点击一次打开一个新窗口
_new：始终在同一个新窗口中打开
_self：默认，在当前窗口打开
_parent：在父级窗口打开
_top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开
framename：在指定的框架中打开被链接文档
7.请列举几个html5新增的标签？
video 表示一段视频并提供播放的用户界面，audio 表示音频，time 日期和时间值，source 为video和audio提供数据源，nav 导航，aside 在一边，article 文章，footer 页尾，header 页眉，main 主要的，menu 菜单
canvas 表示位图区域，track 为video和audio指定字母，svg 定义矢量图code 代码段，figure 和文档有关的图例，figcaption 图例的说明，mark 高亮的引用文字，Datalist 提供给其他控件的预定义选项，keygen 秘钥对生成器控件，output 计算值，progress 进度条，embed 嵌入的外部资源，menuitem 用户可点击的菜单项，template 模板，section 部分
8.如何定义一个单选按钮？
input[type=‘radio’]radio定义单选按钮
9.标签上的title属性与alt属性的区别是什么？
alt是在图片不能正常加载时候显示的提示语
title属性是鼠标划上去显示的内容
10.如何处理html5新标签的浏览器兼容问题？
（1）使用静态资源的html5shiv包（2）载入后，初始化新标签的css
11.分别写出以下几个HTML标签：文字加粗、下标、居中、斜体
加粗：、，下标：_，居中：

，字体：
12.对WEB标准以及W3C的理解与认识
web标准，简单来说就是将页面的结构、表现和行为各自独立实现
尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
使用外 链css和js脚本、
结构行为表现的分离、文件下载与页面速度更快、
内容能被更多的用户所访问、
内容能被更广泛的设备所访问、
更少的代码和组件，容易维护、改版方便，不需要变动页面内容、
提供打印版本而不需要复制内容、
提高网站易用性。
13.前端页面有哪三层构成，分别是什么，作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层：
网页的结构或内容层是该页面的基础HTML代码。
CSS：样式层：
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改
14.请讲述一下iframe框架的优缺点？
优：　iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决
缺：　会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差
现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
15.form表单实现上传文件必不可少的属性是什么？
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
16.src和href的区别是什么？
href 是指向网络资源所在位置，建bai立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
17.input不可编辑，必填属性分别是什么？
disabled不可被编辑； required必填项；
18.请写出input常用的13种type类型，并写出每种类型的应用场景
text 这是默认的输入类型。
password 输入字符会经过掩码处理，表现为一连串的点。
file 定义文件上传控件。
radio 定义单选按钮
checkbox 定义复选框
hidden 定义隐藏的输入字段，用于在表单中添加对用户不可见，
button 定义按钮
image 定义图像形式的提交按钮
reset 定义重置按钮,重置按钮会清除表单中的所有数据
submit 定义提交按钮,提交按钮会把表单数据发送到服务器
color 定义调色板
tel 定义包含电话号码的输入域
email 定义包含email地址的输入域
url 定义包含URL地址的输入域
search 定义搜索域
number 定义包含数值的输入域
range 定义包含一定范围内数字值的输入域
date 定义选取日、月、年的输入域
month 定义选取月、年的输入域
week 定义选取周、年的输入域
time 定义选取月、年的输入域
datetime 定义选取时间、日 月、年的输入域(UTC时间)
datetime-local 定义选取时间、日 月、年的输入域(本地时间)
19.请简述一下你对语义化标签的理解
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊及时在没有样式CSS情况下也以一种文档格式显示，并且时任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
20.如何区分html和html5
1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。
2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签。

---

2 / CSS

---

1.css性能优化的方法，至少说出五种
1.异步加载CSS
2有选择地使用选择器
3优化重排与重绘
4不要使用@import
5.去除无用CSS
6.压缩css文件
2.Css选择器有几种？选择器的优先级是怎样的。
元素选择器，id选择器，class 选择器，后代选择器，子代选择器，伪类选择器，通配符
内联样式> id>class>元素>通配符>继承样式
3.浮动的原理什么？浮动有几种？
将排成一列的元素变成一行，脱离文档流。
主要是为了让一些标签并排显示
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
向下浮动向上浮动两种
4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？
STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中
RELATIVE(相对）
相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。
ABSOLUTE(绝对)
绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。
FIXED(固定)
固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置
粘性定位
粘性定位的语法格式如下：
选择器 { position: sticky; top: 10px; }
1、粘性定位可以认为是相对定位和固定定位的混合；
2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；
3、粘性定位继续占有原先的位置；
4、必须添加top、bottom、left、right其中一个才有效；
5、一般都是跟页面滚动搭配使用；
5.如何设置背景透明？
background-rgba（四个参数）
background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
background-color:transparent
6.请列举几种布局方式，并列举各自优点
弹性布局
静态布局
流式布局
响应式布局
浮动布局
自适应布局
1 静态布局:布局简单，没有兼容性问题。
2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局
3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局
7.css引入方式有几种？link和@import有什么区别？
4种，行内样式，内嵌式，导入式，外链式
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, rel连接属性等作用；
@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载
@import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱
8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？
px：长度单位，值是固定的
em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em
9.请列举几种隐藏元素的方法？（至少三种）
display:none (通过隐藏盒子属性，脱标)
visibility:hidden (通过隐藏盒子属性，不脱标)
opacity: 0 ； (通过改变元素的透明度，不脱标)
10.css3中有哪些新属性？（至少五种）
background-size
padding-box
text-shadow
transform：
Transition
11.请写出清除浮动有几种方式，分别是什么.
clear：both：
父级添加overflow属性（父元素添加overflow:hidden）
使用after伪元素清除浮动
使用before和after双伪元素清除浮动
12.如何初始化css样式？为什么要初始化css样式？
初始化CSS时候将为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。
13.如何让一段文本中的所有英文单词的首字母大写？
Text-transform：capitalize 首字母大写
Text-transform ：uppercase 全部都是大写
Text-transform ：lowercase 全都是小写
14.rgba()和opacity的透明效果有什么不同？
opacity作用于元素，以及元素内的所有内容元素
.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果
15.行内，块状，行内块元素之间如何进行转换？
Display:inline； 行内样式
Display:inline-block；行内块元素
Display：block; 块状元素
16.如何设置一个元素，固定到网页的底部
Bottom：0；
Position：fixed；
17.如何使用css将多出范围的字变为…
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
css能做到文本超出第二行显示省略号
width:100px;
overflow : hidden;/必须结合的属性,当内容溢出元素框时发生的事情/
text-overflow: ellipsis;/可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。/
display: -webkit-box;/必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。/
-webkit-line-clamp: 2;/用来限制在一个块元素显示的文本的行数。/
-webkit-box-orient: vertical;/必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。/
https://www.cnblogs.com/murenziwei/p/10831776.html
18.如何解决浮动引起的高度坍塌
1.给父元素设置高度
2.设置一个空标签，并且给此标签加上
clear:both；
19.margin和padding的区别是什么？
Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。
20.如何取消a链接点击时的背景颜色
-webkit-tap-highlight-color:transparent;
21.display：none；和visibility：hidden；的区别是什么？
display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、
display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。
22.css3新增的伪类有哪些？
elem:last-child
elem:only-child
elem:only-of-type
elem:empty
last-of-type
first-of-type
23.请描述一下渐进增强与优雅降级
优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。
渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的
24.请简述你所了解的css中z-index的权重问题
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
后面的数值越大，表示越要优先显示
25.有哪几种方法可以使html元素脱离文本流？
1:float 2:absolute 3:fixed
26.超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）
27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
28.CSS中哪些属性可以继承？
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor
29.width: auto 和 width: 100% 的区别？
1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。
2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。
30.什么是FOUC？你如何来避免FOUC
如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。
31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box///
content-box是先根据设定的样式确定元素content的宽高，有border和padding的情况下再额外增加盒子的宽高，内容宽高不受影响，设定多少就是多少。

border-box是先根据设定的样式固定盒子的宽高，如果有border和padding的情况下，再根据盒子的宽高减去border或者padding，内容的宽高会受到影响，会被减去border或者padding。
32.如何让一个容器成为弹性容器？
display: flex;
33.弹性布局的布局原理是什么？什么场景下使用弹性布局？
该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持
34.如何让实现一个元素在网页中垂直居中？
弹性布局用给父元素加上{ display:flex;align-items:center; }
普通元素用：magin:auto
35.请简述弹性布局与传统盒模型布局的区别和优缺点？
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中
如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化.
弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理

3/ JavaScript

1.变量命名规则
1.变量命名必须以字母或是下表符号“_”或者“$”为开头
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。（javascript是区分大小写的语言）
2.数据类型有几种，判断数据类型的方法
七种数据类型：numeber，null,undefinde,string,boolean,object，symbol
JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call()
typeof
3.哪些运算符常用作布尔判断 简述运算符的优先级
逻辑运算符 ||,&&,!。 算术运算符>关系运算符>逻辑运算符>赋值运算符，
4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素
rand()生成随机数，
round() 四舍五入
Search字符串查询子串
split（）字符串分割
Indexof检索数组中的元素
join("")数组拼接成字符串
push（）增加
remove（）删除
5.怎样改变元素的内容、属性、样式
修改内容：通过dom获取标签的id，使用inner HTML修改该元素的内容
修改样式：通过dom获取标签的id，使用.style.(要修改的样式)如color
修改属性：通过dom获取标签的id，.修改属性。
6.怎样获取浏览器窗口尺寸
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
7.怎样控制浏览器前进、后退、页面跳转
后退
前进
刷新
停止
返回主页
第一个方法
跳转页面;在当前页面进行跳转 location前可加 window 也可不加
location.href = “http://127.0.0.1:8080/news”;
第二个方法
跳转页面;打开新的标签页进行跳转
window.open(“http://127.0.0.1:8080/news”);
8.遍历数组和对象的常用方法有哪些
for循环
foreach遍历（可以同时取出数组中的值和值对应的下标）
for — of遍历
for — in遍历（常见用在对象中，遍历对应的key值和value值）
map循环
every循环
Each循环
9.Js数据类型强制转换的方法（写出三种即可）
转换函数parseInt（）、强制类型转换bool()、利用js变量弱类型转换。-+
10.说明全局变量和局部变量的作用范围和生命周期
局部变量：
1.局部变量：在函数内部用var声明的变量
2.局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量
（函数参数只在函数内起作用，属于局部变量）
3.局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁
全局变量：
全局变量：变量在函数外定义，网页上的所有脚本和函数都能访问它
变量生命周期：
1.变量生命周期在声明变量时开始
2.局部变量在函数执行完毕后被销毁-
3.全部变量在页面关闭后被销毁
11.例举3种强制类型转换和2种隐式类型转换?
强制：to string string number Boolean
隐式：“+”“-”
12.向数组中添加和删除元素的方法有哪些？至少各写一个
1.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
2.unshift方法就是将要添加的元素添加到数组头部
3.pop方法是与push对应的，删除最后一个元素，数组长度-1
4.splice方法是修改方法，具有添加和删除功能
5.Shift删除数组中第一个元素
13.什么是事件委托
事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。
14.闭包是什么？有什么特性？对页面有什么影响？
闭包是将函数内部和函数外部连接起来的桥梁。 特性：函数嵌套函数；内部函数可以读取到外部函数的变量和参数；不会被垃圾回收制度回收。
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出，影响页面刷新速度。
15.如何创建新元素并添加到页面中
先在html页面创建一个空div var div = document.createElement(‘p’);
Div.appendChild§;先创建元素然后插入页面中的空div
16.希望获取到页面中所有的checkbox怎么做
var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len–) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
　　checkBoxList.push(domList[len]);
　　}
}
console.log(checkBoxList)
17.创建一个数组 每一项都是0到50之间的随机数字，请写出关键代码
var randNums = [];
for (i = 0; i < 51; i++) {
var randNum = Math.floor(Math.random() * i);
randNums.push(randNum);
console.log(randNums);
}
18.函数调用的方式有几种（写出三种即可）

1. 方法调用：方法调用，this指向window，相当于window调用
2. 对象调用
3. 构造函数调用
4. 上下文调用模式
   19.JS有几种引入方式
   内部引入。行内引入，外部引入

20.null和undefined的区别是什么？
Null是空值typeof返回的是object
Undefined是未定义的，返回的是Undefined
21.js的特点是什么
简单性，安全性，动态性，跨平台
22.怎样获取到页面中的

DocumentgetElementById(‘con’);
23.JavaScript输出数据的方法?
弹窗，console.log（）,document.write,innnerhtml,innertext。
24.什么是JavaScript
Js是一种脚本语言，不需要编译。主要用于web，它用于增强html页面；可以嵌入html和代码中。
25.javascript的typeof返回哪些数据类型？（写英文）
Object，undefined，number，string，boolean
26.请写出添加 删除 替换 插入节点所用的方法？
1、创建元素节点：createElement
创建文本节点：createTextNode;
2、插入节点：appendchild:在要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。
3、删除节点：removeChild;从文档树中删除一个节点（先找到要删除节点的父节点，用父节点删除）；
4、替换节点：replaceChild;将一个节点替换为另一个节点（先找到要替换的节点的父节点，用父节点替换）；
27.什么是数组，什么是对象，并说出他们的区别
对象，就是一种无序的数据集合，由若干个“键值对”构成
数组：组也是对象，数组只是将对象里面无序的数据有序化。
区别1、数组表示有序数据的集合，而对象表示无序数据的集合。
数组的数据没有”名称”，2但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引
28.请写出js中的两种定时器，区别是什么？
setTimeout 和 setInterval。
区别setTimeout 只执行一次 setInterval重复执行
29.js两要素是什么
选择器和函数
30.split和join的区别
join() 方法用于把数组中的所有元素放入一个字符串
split(a,b)方法：用于把一个字符串分割成字符串数组
31.请写出js的入口函数？并讲解入口函数的作用。
window.onload
作用：由于js的优先级很高，与css配合使用时往往都是先运行js函数，所以这里就有必要加入一个入口函数，使js函数在css运行加载完之后再运行js函数，代码如下：
32.pop、Push、unshift、shift的作用？
push：在数组的尾部加入一个元素，并返回原有length+1的长度。
unshift：在数组的头部加入一个元素，并返回原有length+1的长度。
pop：删除数组尾部第一个元素，并返回这个元素。
shift：删除数组头部的第一个元素，并返回这个元素。
33.函数分为几种，区别是什么
声明函数：使用function声明一个函数，并指定函数名，调用时直接调用该函数名
匿名函数：使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，
闭包函数：内部函数可以调用外部函数的参数和变量
34.如何判断一个数是不是整数？
If判断用praseint把这个数转换为整数再与的数
35.innerHTML和innerText的区别是什么？
innerHTML ：innerHTML设置或获取标签所包含的HTML+文本信息
innerText： innerText设置或获取标签所包含的文本信息
36.Break和continue的区别是什么？
“break是结束循环。 continue是结束本次循环并进行下一轮循环
37.this是指向的哪个全局变量，改变this指向的方法有几种（请写出三种）？
Apply，bind，call
38.addEventListener()方法中有几个参数，作用分别是什么?
三个参数
1：要触发的事件名称
2.触发时执行的函数
3：ture跟flase ture为捕获阶段 flase为冒泡阶段 默认为flase
39.http和https分别是什么？区别是什么？
http：是超文本传输协议；
https：是超文本传输安全协议；
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443,
申请证书方式不同，https是具有安全性的ssl加密传输协议，
40.请讲述一下什么是dom？作用是什么？
Dom是文件对象模型；
使JS有访问HTML的能力，能够实现对HTML中内容的操作
41.dom中的节点分为几种类型？
元素节点 　　Node.ELEMENT_NODE(1)
属性节点 　　Node.ATTRIBUTE_NODE(2)
文本节点 　　Node.TEXT_NODE(3)
42.访问节点和创建节点的方法都有什么？
创建： document.write()
innerHTML
document.createElement()
访问：getElementById() 和 getElementsByTagName()
43.数组是什么？声明数组的方法有几种？数组的三大特性是什么？
利用new array（）直接var 一个[]
数组是种将一组数据存储在单个变量名 下的优雅方式
索引可以是任意对象，动态存储，存放任意数据类型
44.new关键字的作用？
使用new关键字是将函数当作构造函数调用，即为构造对象，若没有人为的重写调用构造函数时返回的值，那么返回的对象是由解析器自己生成的。
1.创建一个空对象，并使该空对象继承构造函数的.prototype；
2.执行构造函数，并将this指向刚刚创建的新对象；
3.返回新对象；
45.js绑定事件的方法有几种？
在DOM元素中直接绑定；function divFun(){}
在JavaScript代码中绑定；div.Onclick=function{}
绑定事件监听函数。addEventlistener（）
46.你对面向对象编程的理解
面向对象是基于万物皆对象这个哲学观点. 把那里一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.
面向对象具有封装性,继承性,多态性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.
总之,面向对象的特性提高了大型程序的重用性和可维护性.
47. 请讲讲原型链
原型链是实现继承的主要方法，基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法，层层递进，就构成了实例与原型的链条。
48.创建对象的方法有哪些？
一、直接创建方式 二、对象初始化器方式 三、构造函数方法
49.如何阻止事件冒泡和浏览器默认事件？
事件冒泡：e.preventDefault()
默认事件：return：false；
50. 请谈谈cookie、localStorage和SessionStorage的区别和特点
51.事件流有几种？dom事件流分为几个阶段？
两种:捕获阶段，冒泡阶段
Dom分为：捕获阶段，冒泡阶段，目标阶段。
52.return的作用是什么?
可以阻止浏览器默认事件
也可以返回值
53.函数声明与函数表达式的区别？
以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的。
以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。
以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。
54.什么是cookie？cookie的优缺点。
cookie 是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript
cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。
（1）cookie可能被禁用；
（2）cookie与浏览器相关，不能互相访问；
（3）cookie可能被用户删除；
（4）cookie安全性不够高；
（5）cookie存储空间很小(只有4–10KB左右)
55.js本地存储有两种，分别是什么？区别是什么？
localStorage和SessionStorage
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
56.cookie和本地存储的区别是什么？
cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。
SessionStorage不同浏览器之间无法共享，同一浏览器不同标签页或者页面无法共享，如果是同源页面也是可以共享的，同源保证协议相同，主机名相同，端口相同
Local Storage永久，甚至在浏览器关闭之后，除非用户自己去清理浏览器缓存，否则这些信息会一直存在，不同浏览器之间无法共享，同一浏览器不同标签页或者页面可以共享

57.什么是json？json的三种值类型是什么？
Json是数据传输格式之一；
第一种类型是scalar（标量）
第二种类型是sequence（序列）
第三种类型是mapping（映射）
58.请解释一下冒泡排序的原理？
1.原理：比较两个相邻的元素，将值大的元素交换到右边
2.思路：依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。
59.HTTP和HTTPS是什么？为什么HTTPS更安全？ ///
HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
　　HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
　　HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

60.js常用的几种事件，请分别描述一下
鼠标事件、键盘事件、滚动事件、监听事件
61.请将此数组进行排序，arr=[22,1,43,12,75,32]（两种方法）

62. IE和标准下有哪些兼容性的写法
    Var ev = ev || window.event
    document.documentElement.clientWidth || document.body.clientWidth
    Var target = ev.srcElement||ev.target
    63.call和apply的区别
    apply：最多只能有两个参数——新this对象和一个数组argArray。
    call：它可以接受多个参数，主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针
63. js延迟加载的方式有哪些？
    1、defer属性
    2、async属性
    3、动态创建DOM方式
    4、使用jQuery的getScript()方法
    5、使用setTimeout延迟
    6、让JS最后加载
    65.说说TCP传输的三次握手四次挥手策略
    握手：
    1）Client：嘿，李四，是我，听到了吗？
    2）Server：我听到了，你能听到我的吗?
    3）Client：好的，我们互相都能听到对方的话，我们的通信可以开始了。
    挥手：
    1）Client：我所有东西都说完了
    2）Server：我已经全部听到了，但是等等我，我还没说完
    3）Server：好了，我已经说完了
    4）Client：好的，那我们的通信结束

66.网络传输的七层协议是哪七层？
1、应用层
2、表示层
3、会话层
4、传输层
5、网络层
6、数据链层
7、物理层

4 / Jquery

1.请写出js和jquery的入口函数，并简述他们的不同
window.οnlοad= function () {}原生js
$(document).ready(function () {}jquery
（1）原生Js和jQuery入口函数加载模式不同。
（2）编写多个入口函数的区别。
2.请写出jquery动画的显示和隐藏
Show（）显示，hide（）隐藏
3.请写出jquery中绑定事件的四种方式
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。
4.什么是jQuery？
jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，duHTML文档遍历，Ajax交互和动画，以便快速开发网站。
5.jQuery 库中的 $()是什么在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换。
6.网页上有 5 个

元素，如何使用 jQuery来选择它们？
$(“div”)，
7.jQuery 里的 ID 选择器和 class 选择器有何不同？
ID选择器使用ID来选择元素，例： KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲idtest1"). 而 cl…(".classtest1")。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。
8. jQuery 里的 each() 是什么函数？你是如何使用它的？
each() 函数就像是 Javascript里的一个 for，它允许你遍历一个元素集合。
${(}^{\prime }di{v}^{\prime }).each(function(selected)执行的代码);9.$(this) 和 this 关键字在 jQuery 中有何不同？
1、表示对象不同：this表示的是javascript提供的当前对象， $(this)表示的是用jquery封装的当前对象。2、过程不同：this对象可以直接用this.style修改样式，$(this)可以使用jquery提供的方法访问样式。
10.你如何利用jQuery来向一个元素中添加和移除CSS类?
Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类
11.什么是ajax，为什么使用ajax？
AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。
在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。
性能会有所降低(一点内容，刷新整个页面！)
用户的操作页面会中断(整个页面被刷新了)
Ajax就是能够做到局部刷新！
12.ajax都有哪些优点和缺点？
ajax的优点：
1、最大的一点是页面无刷新。
2、使用异步方式与服务器通信。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术。
Ajax的缺点：
1,ajax干掉了back按钮，即对浏览器后退机制的破坏。
2,安全问题
3,对搜索引擎的支持比较弱。
4,破坏了程序的异常机制。
5,另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。
6,一些手持设备（如手机、PDA等）现在还不能很好的支持ajax.
13.post请求和get请求的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。
2. GET请求把参数包含在URL中，将请求信息放在URL后面，POST请求通过request body传递参数，将请求信息放置在报文体中。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
4. get安全性非常低，get设计成传输数据，一般都在地址栏里面可以看到，post安全性较高，post传递数据比较隐私，所以在地址栏看不到， 如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。
5. GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。
6. HTTP的底层是TCP/IP，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。
   7.GET产生一个TCP数据包，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；POST产生两个TCP数据包，对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据），并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
   14.什么是跨域?
   当协议、域名、端口三者之间任意一个不同即为跨域
   15.请简述同步和异步的区别.
   在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
   16.HTTP协议中，GET和POST有什么区别？分别适用什么场景？
   Post使用方法：
   1、请求的结果有持续的副作用，例如数据库内添加新的数据行
   2、若使用GET方法，则表单上收集的数据可能让URL过长
   3、要传送的数据不是采用7位的ASCII编码
   GET使用方法：
   1、请求是为了查找资源，HTML表单数据仅用来帮助搜索
   2、请求结果无持续性的副作用
   3、收集的数据及HTML表单内输入字段名称的总长度不超过1024个字符
   区别：
   ①传送方式不同：get通过地址栏传输，post通过报文传输。
   ②get产生一个TCP数据包，post产生两个数据包，对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200；而对于post浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200。
   ③get参数有长度限制，传送数据量不能大于2kb，post传送数据量不受限制（一般会受服务器配置限制或者内存大小）。
   ④get安全性非常低，post安全性较高，但是执行效率比post方法好。
   ⑤get方式服务器端用Request.QueryString获取变量的值，post方式服务器端用Request.Form获取提交的数据。
   ⑥get是从服务器上获取数据，post是向服务器传送数据。

17.将以下jquery选择符翻译成中文描述：$(“#d div.cls input[type=text][name^=text_]”);
找到ID选择器d 的元素从中找到class为cls的DIV，然后找到input的输入框，输入的typt类型等于text,name为text_开头的元素
18.请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
window.name来跨域（最常用）window.name=“父页面的值”;
document.domain
jsonp
使用HTML5中的window.postMessage方法来跨域传送数据
利用WebSocket跨域
19.常见请求头与响应头你了解哪些？
HTTP请求头：
请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。
HTTP响应头：
响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。
20. 如何设置ajax为同步或异步
Async：ture；异步
Async：flase; 同步
21.请写出ajax框架格式，并简述每个属性的作用
$.ajax({
url:’’,//接口地址
type:‘POST’,//传值方式
data:’’,//需要提供的参数
success:function(res){
//成功后需要进行的操作
}
})

22.$(document).ready()方法和window.onload有什么区别？
1.执行时间不同
window.onload必须等到页面内的所有元素（）加载完毕后才能执行
$(document).ready()是页面DOM结构绘制完毕后就执行，不必等到加载完毕
2.执行次数不同
window.onload不能同时执行多个，如果同一个页面上面有多个window.onload方法（包括关联js文件中），只会执行最后一个window.onload，也就是向上覆盖。
$(document).ready()可以同时执行多个，如果同一个页面上有多个$(document).ready()方法（包括关联js文件中），JQuery能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行
3.简化写法不同
window.onload没有简化写法。
$(document).ready()有两种简化写法：$().ready(function)、$(function)
23.Flash、Ajax各自的优缺点，在使用中如何取舍
Flash ajax对比
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

5 / vue

1.简述框架和函数库的区别
库更多是一个封装好的特定的集合，提供给开发者使用；
框架则是为解决一类问题而开发的产品；
库的使用非常灵活，但没有框架方便，这就是框架和库本质的区别。
2.什么是渐进式框架
https://www.zhihu.com/question/51907207
https://zhuanlan.zhihu.com/p/140378027
https://www.jianshu.com/p/8944070b41de
可以先使用vue的基础功能，然后在此基础上逐渐使用你所需要的其他的功能
3. Vue有哪些优点
优点：
1.组件化开发
2.单页面路由
4.双向的数据绑定
5.单向数据流
6.易于结合其他第三库
7.轻巧、高性能
8.渐进式框架
9.是已数据驱动执行的
缺点：
生态系统不够完善
可扩展性稍差
吃内存
报错不明显
不支持IE8
入门简单,但是缺少高阶文档
不利于seo优化
5. Vue常见属性和指令有哪些？（各写出7个以上）
属性：el、data、methods、computed、watch、component、props、filters、render
指令：v-text、v-html、v-if、v-else-if、v-else、v-bind:src或@:src、v-model、v-on或@click、v-show、v-for、v-pre、v-clock
6. 计算属性和侦听属性–有什么区别？怎样选择
区别：
1、computed不会主动监听数据变化，但是watch会去主动监听，也就是说watch会主动处理数据变化，computed是依赖数据变化才去计算。
2、computed在依赖数据未发生改变时/或者没有依赖数据，自动缓存到应用中，下次获取时不重新计算。
各自使用场景：
watch：适合处理 一个数据影响多个数据更适合处理数据相互独立的场景，主动监听
computed：适合处理一个数据受多个数据的影响 / 多个数据影响一个数据时。数据相互不独立的场景。
7. Vue的生命周期函数有哪些？
参考链接
创建：beforecreate、created
挂载：beforemount、mounted
更新：beforeupdata、updated
销毁：beforedestroy、destroyed
8.vue怎样自定义指令？
使用

{ {nav}}

设置自定义指令 directive 9.简述axios的安装和引入 安装插件依赖包 npm install axios --save 在命令提示符中进行安装； 在项目中的main.js中引用 import axios from 'axios'; Vue.prototype.$axios = axios; import qs from 'qs'; Vue.prototype.qs = qs;

10.DOM 渲染在哪个周期中就已经完成？
mounted中
11.请说明Vue父组件向子组件传值的方法（代码或文字描述均可）
父组件在调用子组件的时候通过添加自定义属性向子组件传值。子组件通过props接收。
在父调用子的时候添加自定义属性，如：传一个字符串< zi mydata=”father”>,子组件中使用props接收，简单的值可以用数组接收props:[‘mydata’]。当父组件没有传值的时候也可以有默认值，这时候就得使用对象进行接收
props: {
myclass: {
default: “默认值”
},
text: {
default: “”
}
},

12.请说出下列axios配置项的含义（五条）
method:创建请求时使用的方法
url:请求的服务器地址
header:即将被发送的自定义请求头
data:请求接口所需要传递的参数
params:即将与请求一起发送的 URL 参数
13.V-for中 key 值的作用
https://www.cnblogs.com/leafarmyarmy/p/10253845.html
key的作用主要是为了高效的更新虚拟DOM！！！下次v-for不用再重新渲染
15.v-show和v-if指令的共同点和不同点?
https://www.cnblogs.com/liutianzeng/p/10978890.html
相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：
实现本质方法不同
v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if
16.子组件向父组件传参的方式？（请写出关键代码）
子组件通过 $emit触发自定义事件（一个是父组件事件的名字，一个是传递的参数），通过回传参数向父组件传值。子：this.$emit(“name”,”param”)
父：@name=fun methods:{fun(data){console.log(data)}}
子组件向父组件传值成功总结一下：
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。17.axios有哪些常用的方法？格式是什么？写出两种即可post，get18.axios请求成功和失败时分别执行哪个函数？成功：then()失败：catch()19.使用axios发送请求的格式是什么？请写出示例代码get:this.$axios({
url:‘请求的接口路径’,
params: {3
id:要传递的参数
}
}).then(function(res) {
}).catch（function(err) {
})
gost：this.$axios(url{:}^{\prime }要请求的接口地{址}^{\prime },method{:}^{\prime }pos{t}^{\prime },data:this.qs.stringify(id:参数)).then(function(succ)).catch(function(err))20.需要在axios中，用post方式传递参数：id=5，请写出示例代码post：this.$axios({
url: ‘要请求的接口地址’,
method: ‘post’,
data: that.qs.stringify({
id:参数
})
}).then(function(succ) {
})
})
21.现从接口获取到如下内容{ name:’小米’,price:[15,18,21] }要将价格price中的第三个（21）赋值给data数据中的price，请写出代码（接口数据对象用result代表）
22.从接口获取到数组：arr = [‘1’,’2’,’3’,’a’,’b’,’c’],需要将其转化成{number:’123’,char:’abc’}的形式，请写出操作方法。（提示：slice（start,end）从已有数组从返回选定的元素作为新数组,参数start：开始位置，end：结束位置，示例arr.slice(0,3)；join（separator）用指定的分割符讲数组放入一个字符串，参数separator：分隔符，可以为空字符串，示例arr.join(‘’) ）

23.Vue中引入组件需要哪三步？
https://blog.csdn.net/weixin_44893500/article/details/105360563
1）使用import 别名 “@/components/组件名”进行组件引用，
2）然后在components 中注册，
3）在html输出别名标签即可
24.在Vue中使用插件的步骤？
https://www.cnblogs.com/zhang134you/p/10947795.html
1、安装插件依赖包
#npm install -D open-browser-webpack-plugin
2、引入文件
import Vue from ‘vue’
3、引入使用的组件
import 组件 from ‘组件包名’
Vue.use(组件)
4、在需要位置使用
25.说一下你对dom驱动和数据驱动的理解
https://www.squirrelzoo.com/archives/642
dom驱动：直接通过代码操作页面上的html元素。更改页面内容时需重新获取并赋值
数据驱动：通过数据来驱动页面的变化。数据改变时，页面上的内容也会改变
在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。
26.请说出路由传参和获取参数的三种方式
https://blog.csdn.net/jiandan1127/article/details/86170336
先在index.js中注册组件{name：,path: ,component: }
1）需要配置路由参数xxx/:p1/p2
:to="{path:’/btn/p1/p2’}" param=this.$route.params;2）需要命名路由:to="name{:}^{\prime }bt{n}^{\prime },params:"param=this.$route.params;
3）需要用query接收
:to="{name:‘btn’,query:{ }}" param=this.$route.query;

27.子路由的配置方法？
子路由：在父路由中配置children:[]
子路由中的path不能加/，否则会成为跟路径
当匹配到子路由时会将内容放置在子页面的路由出口，而不是跟路由的出口，匹配到的非子
28.Vue-router的编程式导航有哪些方法？
https://blog.csdn.net/weixin_42862614/article/details/88811925
router.go() router. push()可以返回上一页 router.replace()不能保存，直接替换了
29.导航守卫有哪三种？分别有什么作用
全局路由守卫:
router.beforeEach
router.beforeResolve
router.beforeAfter

组件路由守卫:

路由独享守卫:

30.Vuex中改变store状态值的方法是什么？为什么？

31.简述vuex中的常用属性
vuex： 这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。
1.state： 用来存储变量。在别的页面就可以使用this.KaTeX parse error: Expected 'EOF', got '#' at position 367: …uerySelector(‘ #̲tet‘)来获取 方法二：使用…refs.name获取到该元素
34.使用过滤器实现字符串反转，请写出相应代码

{ {message}}

反转字符串

35.怎样创建和调用一个能插入自定义元素等内容的组件？请写出示例代码 36.Vue中双向数据绑定是如何实现的？ https://www.cnblogs.com/chenhuichao/p/10818396.html https://www.cnblogs.com/Zz-maker/p/10711506.html

37.单页面应用和多页面应用区别及优缺点
单页面：
概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
多页面：
概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
缺点：页面跳转较慢
38.vue组件中data为什么必须是一个函数？
https://blog.csdn.net/lareinalove/article/details/94019594
如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

6 / 小程序

1. 简单描述下微信小程序的目录结构？

      app.js 	小程序逻辑
      app.json 	小程序公共配置
      app.wxss 	小程序公共样式表
            js 	页面逻辑
            wxml 	页面结构
            json 	页面配置
            wxss  	页面样式表
   

2. wxml与标准的html的异同？

开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，
同时避免开发者写出低质量的代码。
没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

3. 小程序怎样进行本地存储的读写？

同步：（1）wx.setStorageSync(); //存储值
（2）wx.removeStorageSync(); // 移除指定的值
（3）wx.getStorageSync(); // 获取值
（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
（5）wx.clearStorageSync(); // 清除所有的key

异步：（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key

4. 分析下微信小程序的优劣势？

微信小程序优势：
1）、使用方便：扫码即用，相较于APP而言不用下载、不用安装，
还可以直接添加到手机桌面，为手机节省了电量和大量内存；
2）、流量入口众多：公众号菜单、朋友圈（太阳码）、微信群、
支持长按二维码识别、附近的小程序、统一的小程序入口、搜一搜、
公众号图文推送、支持发会员卡券（官方的）、支持会员卡直接打开小程序；
3）、潜在用户多：小程序依托在微信9亿多用户群体上，不用担心找不到用户，
只需专心做好小程序营销；
4）、助力新零售：小程序是新零售的最好载体，将是未来线下门店的发展趋势，
如果企业拥有线下实体门店，小程序是最佳选择，可以为企业更好地切合线上线下的流量；
5）、符合消费场景：小程序可以与消费者在任意场景建立链接，即用即走，符合大多数消费场景。

  微信小程序劣势：
  1）、功能不多：微信小程序属于微信，自然也就受限于微信。
       由于API的限制，小程序的总代码量不能超过2M，这意味着小程序规模有限，
       这对一些中大型的应用而言是一个致命的缺陷。
       目前相较于APP而言，微信小程序只是能够实现基本操作，
       虽然随着开发技术的发展，小程序已经和APP很接近，但差距肯定是存在的；
  2）、所有更新需要经过腾讯的审核，才能应用到小程序中，
        这给应用的更新带来一定的风险，企业希望新加的功能若无法审核通过，
         则毫无解决办法；
  3）、不能用小程序来发推送通知，必须要由用户操作才可以；
  4）、小程序无法被分享到微信朋友圈，错失这一流量巨大的入口；
  5）、用户留存差，正是因为即用即走的特点，微信小程序对于用户的留存相较于APP、
         微信公众号都是非常薄弱的，这就要求企业的营销能力非常突出，
        才能持续增加用户对小程序的粘性。

5. 小程序的数据驱动和vue的双向绑定有何异同？

小程序中的数据双向绑定
（1）、通过 bindinput 绑定文本框的输入事件
（2）、在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值
（3）、在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值
（4）、通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定

vue中的数据双向绑定
（1）、首先为文本框绑定 @input 监听文本框的输入事件
（2）、为文本框动态绑定 value 属性，其值是在data中定义的变量
（3）、在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值
（4）、将其重新获取到的 value 赋值给 value值动态绑定的那个变量

区别
绑定事件不同，以及获取value值的具体方式不同，
以及在小程序中设置data中的数据，
需要调用 this.setData方法进行设置

6. 简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？

（1）wx.navigateTo（）：
用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。
对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，
以便返回原页面，以提高加载速度。
当页面特别多时，则不推荐使用。

（2）wx.redirectTo（）：
当页面过多时，被保留页面会挤占微信分配给小程序的内存，
或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。
wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。
这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，
增加了返回页面的显示时间。

（3）wx.reLaunch（）：
wx.reLaunch()与 wx.redirectTo()的用途基本相同，
只是 wx.reLaunch()先关闭了内存中所有保留的页面，
再跳转到目标页面。

（4）wx.switchTab（）：
对于跳转到 tabbar 的页面，
最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。
其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，
或在 tab bar 间跳转，效果等同 wx.switchTab()。
使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

（5）wx.navigateBack（）：
用于关闭当前页面，并返回上一页面或多级页面。
开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
这个 API 需要填写的参数只有 delta，表示要返回的页面数。
若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。
当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

7. 小程序页面路由传参方法？

通过路径传递参数：wx.navigateTo（）、wx.redirectTo（）和标签等
参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔
例：test?id=1 中id为参数键，1 为参数值
在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值

8. 请说明小程序的生命周期以及页面生命周期
   小程序生命周期：
   onLaunch()
   onShow()
   onHide()
   onError()
   onPageNotFound()
   页面生命周期：
   onLoad()
   onReady()
   onShow()
   onHide()
   onUnload()

小程序生命周期
小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。
接受一个 Object 参数，指定其小程序的生命周期回调；一般有onLaunch监听小程序初始化、
onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。

页面的生命周期
页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数。
Page(Object) 函数用来注册一个页面。接受一个Object类型参数，
其指定页面的初始数据、生命周期回调、事件处理函数等。

9. 小程序如何刷新当前页面？

方法一：this.onLoad()
方法二：this.onReady() 或者 this.onShow()
方法三：定义标志
在app.js中，定义一个全局变量Flag，默认值为false，
进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话，
先将它的值设置为false，再调用接口获取数据。

10. 小程序中获取openid的方法？

第一步，获取code
第二步，根据code获取openid和session_key
第三步，检测用户登录状态是否有效

具体内容见：“https://blog.csdn.net/llayjun/article/details/78291641”

11. 小程序中获取用户的手机号需要请求哪些aip？并且解密的参数有哪些？
    登录状态检测checkSession
    登录login
    通过bindgetphonenumber绑定的事件来获取回调
    回调参数有：
    errMsg：用户点击取消或授权的信息回调。
    iv：加密算法的初始向量（如果用户没有同意授权则为undefined）。
    encryptedData：用户信息的加密数据（如果用户没有同意授权同样返回undefined）

12. 在小程序中设置背景图片在开发者工具中可以显示背景图片，但是在手机上背景图片不显示，怎么解决？
    图片转成Base64格式
    在线转换：https://www.sojson.com/image2base64.html

13. 小程序中页面跳转传参的方式有哪些？

微信小程序导航有两种形式：一种是在写在js中进行跳转，
另一种是写在wxml页面中进行跳转。

14. webview页面的使用有哪些要求

15. bindtap和catchtap的区别？

    bindtap会一直触发上边的点击事件，不会阻止冒泡事件
    catchtap只会执行自己的事件，直接阻止冒泡事件。

16. wx:if 和v-show 的区别？

17. 如何实现下拉刷新？
    wx.startPullDownRefresh（）
    开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

18. 请写出小程序的完整开发流程
    （1）申请小程序账号
    （2）申请服务器域名
    （3）下载并安装开发工具（登录注册的账号）
    （4）小程序框架配置并开发
    （5）window服务器IIS配置和搭建打包文件上传服务器

• 前端理论考核题-