前端开发面试总结
HTML
-
HTML5 有哪些新特性？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何区分： DOCTYPE声明\新增的结构元素\功能元素
-
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
一、Doctype作用是什么？
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
二、严格模式和混杂模式的如何区分？他们有什么意义？
标准模式（严格模式）的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式（混杂模式或怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
-
如何实现浏览器内多个标签页之间的通信？
一、调用localStorage
在一个标签页里面使用localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听storage事件。通过localstorge.getItem(key)存储的值，实现不同标签页之间的通信。
二、调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取getCookie获取信息，即可随时获取要传递的信息。
-
行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？
行内元素有： a、b、span、img、input、select、strong
块级元素有： div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、 p
空元素： br、hr、img、input、link、meta
区别：
行内元素不可以设置宽高，不独占整行
块级元素可以设置宽高，独占整行
-
简述一下src与href的区别？
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
<script src ="js.js"></script>
<link href="common.css" rel="stylesheet"/>
-
浏览器本地存储 cookies,sessionStorage,localStorage 的区别？
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
XML和JSON的区别？
(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。
-
浏览器是如何渲染页面的？
-
iframe 的优缺点？
iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.如果框架个数多的话，可能会出现上下、左右滚动条，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
-
Canvas 和 SVG 图形的区别是什么？
1.什么是Canvas？
Canvas 是H5新出来的标签
Canvas画布，利用JavaScript在网页绘制图像
2.什么是SVG？
SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML
- 谈一谈meta 标签？
meta标签是用来描述一个HTML网页文档的属性，比如该网页的作者，日期，网页的关键字，刷新，网页等级设定等等
meta标签可以分为两大部分：
- http-equiv： http标题信息
- name：页面描述信息
http-equiv 类似于http的头部协议，作用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。常用的http-equiv 类型有：Content-Type 和 Content-Language(显示字符集的设定)。
CSS 基础
- px rem em区别
一.px
1.相对长度单位。相对于显示器屏幕分辨率而言。
2.存在浏览器不兼容问题。
二.em
1.相对长度单位。相对于当前对象内文本字体尺寸。
2.em值并不是固定的，em会继承父级元素的大小.
3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px.
4.存在容易造成字体设置混乱问题。
三.rem
1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px.
2.如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。
3.浏览器兼容性比较好。
-
display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
-
CSS中 link 和@import 的区别是？
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
-
介绍一下box-sizing属性和盒模型？
盒模型：content + border + padding +margin
盒模型分为：基本模型（w3c标准盒模型）+IE模型（基本模型width=content IE模型width=content+border+padding）
如何区分基本模型还是IE模型
Css3新增的属性Box-sizing 有两个值content-box（基本模型）和border-box（IE模型）
获取盒模型对应的宽高：dom.style.width/height
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
-
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）
可继承的样式：font-size font-family color, text-indent;
不可继承的样式：border padding margin width height ;
优先级为: !important > id > class > tag （important 比 内联优先级高,但内联比 id 要高）
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
-
position的值， relative和absolute分别是相对于谁进行定位的？
absolute
生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
-
CSS3有哪些新特性？
https://www.runoob.com/css3/css3-tutorial.html
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
-
对BFC规范的理解？
BFC是块级格式化上下文，他是页面中相对独立的一块渲染区域，他决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互关系。
特点1.bfc可以包含浮动元素
2.bfc所确定的区域不会与外部浮动元素发生重叠
3.位于同一bfc下的相邻块级子元素在垂直方向上发生margin重叠
如何创建bfc :float值不为none,overflow值为auto,display值为inline-block,position值为flex或absolute
- 常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
* 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>`
* 上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
* ie6对png图片格式支持不好(引用一段脚本处理)
- 清除浮动有哪些方法？
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
.clearfix:after;{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
- 实现两栏布局的方式？（假设左侧宽200，右侧自适应-）
1.使用浮动：左侧盒子使用浮动float: left;右侧盒子使用margin-left：200px
2.使用定位：absolute+margin
3.使用flex： 大盒子flex 右盒子flex设成1
4.使用浮动＋BFC：左盒子使用float：left 右盒子设置overflow: hidden(float+BFC)
- 实现三列布局的方式？(假设高度已知，请写出三栏布局，其中左右宽度各为300px，中间自适应)
<div class="box1">
<div class="left1"></div>
<div class="right1"></div>
<div class="center1"></div>
</div>
1.利用浮动：左右盒子float left和right center设置margin-left：300px和margin-right：300px
2.利用绝对定位：左右盒子设置绝对定位absolute left：0 right：0 top：0，center设置margin-left：300px和margin-ringht：300px
3.利用弹性布局felx：大盒子box1设置display：felx ，center盒子设置felx：1
4.利用display:table布局：大盒子设置display:table ，left和right盒子设置display:table-cell
- 垂直水平居中？
1.水平居中：给div设置一个宽度，然后添加margin:0 auto属性
2.把元素变成定位元素position:absolute;
设置元素的定位位置，距离上、下、左、右都为0
left:0;
right:0;
top:0;
bottom:0;
margin：auto；
*兼容性较好，缺点:不支持IE7以下的浏览器
3.把元素变成定位元素position:absolute;
设置元素的定位位置，距离上、左都为50%
left:50%;
top:50%;
设置元素的左外边距、上外边距为宽高的负1/2
margin-left:-100px;
margin-top:-200px;
}
*兼容性好;缺点:必须知道元素的宽高
4.把元素变成定位元素position:absolute;
设置元素的定位位置，距离上、左都为50%
left:50%;
top:50%;
设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)
transform:translate(-50%,-50%);
*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
5.利用flex布局
父盒子设置display:flex;
align-items:center;/*垂直居中*/
justify-content:contenr/*水平居中*/
三角样式
JavaScript 基础
- 问题1、前++、后++、区别
var i=2 ;
a = i++ //将i的值赋给a ， 即a = i,之后再执行i = i + 1; 2
a = ++i //将i+1 的值赋给a，即a = i + 1 ,之后再执行i = i + 1; 3
console.log(a)
【总结】：
前++是先自加后计算、后++是后自加先计算
1：前置++ 是将自身+1 后的值赋给变量，同时自身加1；
2：后置++ 是将自身的值赋给变量，之后自身再加1；
- JS 有哪些数据类型？
Js常用数据类型undefined null boolean number string
Js引用类型object Array function
ES6基本数据类型多了个symblo
- js判断类型
1、typeof
检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型
2、instanceof
不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系
3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。但是contructor的指向是可以被改变，所以不安全
4、Object.prototype.toString.call
全类型都可以判断
- 数据类型怎么检测
1、typeof 例：console.log(typeof true) // boolean 2、instanceof 例：console.log([1,2] instanceof Array) // true 3、constructor 例： console.log([1, 2].constructor === Array) // ture 4、Object.prototype.toString.call 例：Object.prototype.toString.call([1, 2]) // [object Array]
- Js数组的方法
join()数组转换成字符串
push()尾部添加
pop()尾部删除
shift() 头部删除
unshift() 头部添加
sort()排序
reverse()反转
concat()链接两个或多个数组
slice()
var arr=[1,2,3,4,5]
console.log(arr.slice(1)) //[2,3,4,5]选择序列号从1到最后的所有元素组成的新数组
console.log(arr.slice(1,3)) //[2,3]不包含序列号，序号为3的元素
splice()
splice(index,howmany,item1,...itemx)
index参数：必须，整数，规定添加或删除的位置，使用负数，从数组尾部规定位置
howmany参数：必须，要删除的数量，如果为0则不删除项目
item1,...itemx参数：可选，向数组添加的新项目
var arr=[1,2,3,4,5]
console.log(arr.splice(2,1,"hello"));//[3]返回的新数组
console.log(arr);//[1,2,"hello",4,5]
indexOf()和 lastIndexOf() （ES5新增）
forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）
every() （ES5新增）
some() （ES5新增）
reduce()和 reduceRight() （ES5新增）
-
JS中的Array.splice()和Array.slice()方法有什么区别
话不多说，来看第一个例子：
var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组 console.log(arr.slice(2,7));//2,3,4,5,6 console.log(arr.splice(2,7));//2,3,4,5,6,7,8 //由此我们简单推测数量两个函数参数的意义, slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置) splice(start,length)第一个参数开始位置,第二个参数截取长度
接着看第二个：
var x=y=[0,1,2,3,4,5,6,7,8,9] console.log(x.slice(2,5));//2,3,4 console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组并未改变 //接下来用同样方式测试splice console.log(y.splice(2,5));//2,3,4,5,6 console.log(y);//[0,1,7,8,9]显示原数组中的数值被剔除掉了
slice和splice虽然都是对于数组对象进行截取,但是二者还是存在明显区别,函数参数上slice和splice第一个参数都是截取开始位置,slice第二个参数是截取的结束位置(不包含),而splice第二个参数(表示这个从开始位置截取的长度),slice不会对原数组产生变化,而splice会直接剔除原数组中的截取数据!
slice不会改变原数组，splice会改变原数组
- 数值转换
JSON.parse() 转json对象
JSON.stringify() 转json字符串
String(),toString() 转字符串类型
Number parseInt()字符串转数值类型
split 字符串转数组
join 数组转字符串
- 什么是跨域，常见跨域
由于浏览器获取数据遵循同源策略，所以当访问非同源资源的时候，就需要跨域，常见的跨域方式有jsonp，a img src cors
同源策略:同协议，端口，域名的安全策略
jsonp原理
动态创建script标签，利用callpack回调函数获取值
function callbackFunction(){
alert("回滚");
}
var script=document.createElement("script");
script.src="http://frergeoip.net.json/?callback=callbackFunction";
CORS的原理：
当传输数据量比较大，get形式搞不定的时候，可以用到cors跨域，cors原理是定义一种跨域访问的机制，可以让ajax实现跨域访问。Cors允许一个域上的网络应用向另一个域提交跨域ajax请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
Jsonp是get形式，承载的信息量有限，所以信息量较大的时cors是不二选择。
http协议：
http协议是定义服务器端和客户端之间文件传输的沟通方式
请求服务器上的资源,请求html css js 图片文件等
请求方法（所有方法全为大写）有多种，各个方法的解释如下：
GET （get） 请求获取Request-URI所标识的资源 --获取资源
POST （post） 在Request-URI所标识的资源后附加新的数据 ---传输资源
HEAD （head） 请求获取由Request-URI所标识的资源的响应消息报头 ---获取报文首部
PUT （put） 请求服务器存储一个资源，并用Request-URI作为其标识 ---更新资源
DELETE （delete） 请求服务器删除Request-URI所标识的资源 ---删除资源
TRACE （trace） 请求服务器回送收到的请求信息，主要用于测试或诊断
CONNECT（connect） 保留将来使用
OPTIONS（options） 请求查询服务器的性能，或者查询与资源相关的选项和需求
常见状态码：
200 请求成功
301 资源（网页等）被永久转移到其他url
404 请求的资源不存在
500 内部服务器错误
- 说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
闭包用途
1缓存
设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。
2 实现封装
可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：
var person = function(){
//变量作用域为函数内部，外部无法访问
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());
-
如何阻止事件冒泡？
ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
-
如何阻止默认事件？
(1)return false；(2) ev.preventDefault();
-
添加 删除 替换 插入到某个节点的方法？
1）创建新节点 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2）添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
-
document load 和document ready的区别？
document.onload 是在结构和样式,外部js以及图片加载完才执行js
document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)
-
Javascript的事件流模型都有什么?
“事件捕捉”：是从上往下，window,document,document.documentelment（获取的html） document,body 、……..目标元素
“事件冒泡”：是从下往上：反之
“DOM事件流”：三个阶段：事件捕捉、目标阶段、事件冒泡
Dom事件类：
Dom0 element.onclick=function(){}
DOM2 element.addEventlistener(‘click’,function(){},flase)
DOM3 element.addEventlistener(‘keyup’,function(){},flase)
Event.preventdefault() 阻止默认事件
Event.stoppropagation() 阻止冒泡
Event.currenTtarget()事件代理
Event.target 当前被点击元素
-
null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
-
js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
-
call() 和 .apply() 的区别和作用？
相同点：两个方法产生的作用是完全一样的，都是改变this指向的
不同点：方法传递的参数不同
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
Apply()接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
Call()方法的第一个参数与apply（）相同，但传递的参数必须列举出来。
-
mvc和mvvm模式原理:
- JS为什么要区分微任务和宏任务？
（1）js是单线程的，但是分同步异步
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script，setTimeout，setInterval、setImmediate
（4）微任务：原生Promise
（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
- setTimeout和setInterval
//setTimeout是3秒后执行 setTimeout(function(){ alert(123) },3000) //setInterval是每隔三秒执行一次，不断的重复执行 setInterval(function(){ alert(1121222) },3000) //两个执行都是异步进行的
- 深拷贝浅拷贝
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
假设B复制了A，修改A的时候，看B是否发生变化：
如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）
浅拷贝实现：
var a = [1, 2, 3, 4, 5]; var b = a; a[0] = 2 console.log(a);//[2,2,3,4,5] console.log(b);//[2,2,3,4,5] ////b会随着a的变化而变化
深拷贝实现：
var a = [{"name":"weifeng"},{"name":"boy"}]; var a_copy =[].concat(JSON.parse(JSON.stringify(a)));//深拷贝 a_copy[1].name = "girl" console.log(a);//[{"name":"weifeng"},{"name":"boy"}] console.log(a_copy );//[{"name":"weifeng"},{"name":"girl"}]
- 重排重绘
回流（重排）：
重绘：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
区别：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。
- 防抖和节流？
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove keyup 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。
1、防抖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input1">
</body>
<script>
const input1 = document.getElementById('input1')
//1、不加防抖 ，会一直触发change事件
input1.addEventListener('keyup', function(){
console.log(input1.value)
})
//2、简单实现防抖
let timer = null
input1.addEventListener('keyup', function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
//模拟触发change事件
console.log(input1.value)
//清空定时器
timer = null
}, 1000)
})
//3、将防抖函数这个工具进行封装
function debounce(fn, delay = 50){
//timer是闭包中的,不能被别人修改
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
input1.addEventListener('keyup', debounce(function(){
console.log(input1.value)
}, 600))
</script>
</html>
则封装后的防抖函数为：
function debounce(fn, delay = 50){ let timer = null //timer是闭包中的,不能被别人修改 return function(){ if(timer){ clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, delay) } }
2、节流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
border: 1px solid #ccc;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id = "div1" draggable="true">可拖拽</div>
<script>
const div1 = document.getElementById('div1')
//1、简单实现节流
let timer = null
div1.addEventListener('drag', function(e){
if(timer){
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null //定时器执行了，才让timer为空
}, 1000)
})
//2、将节流函数这个工具进行封装
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
},delay)
}
}
div1.addEventListener('drag', throttle(function(e){ //形参e会传给throttle函数运行后返回的函数
console.log(e.offsetX, e.offsetY)
},200))
</script>
</body>
</html>
则封装后的节流函数为：
function throttle(fn, delay = 100){ let timer = null return function(){ if(timer){ return } timer = setTimeout(() => { fn.apply(this, arguments) timer = null },delay) } }
- 说说你对语义化的理解？
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
你如何对网站的文件和资源进行优化？
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）
其他
- 请说出三种减少页面加载时间的方法？
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作
你有哪些性能优化的方法？
（详情请看雅虎14条性能优化原则）。
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如 页面 模块 开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放 命名以该JS功能为准的英文翻译。
-
你如何优化自己的代码？
代码重用
避免全局变量（命名空间，封闭空间，模块化mvc…）
拆分函数避免函数过于臃肿
注释
- 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。
- js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
- 什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样
对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术。
说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。
网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等
- es6相关知识点
- Map、Set
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024181109440
https://www.runoob.com/w3cnote/es6-map-set.html
初始化Map需要一个二维数组，或者直接初始化一个空Map。
-
Maps 和 Objects 的区别?
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
- for in 、for of区别？
例一：
const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a、 b、c } for (let i of obj) { console.log(i)// Uncaught TypeError: obj is not iterable 报错了 }
例二：
const arr = ['a', 'b', 'c'] // for in 循环 for (let i in arr) { console.log(i)//0,1,2 返回的数据下标 } // for of for (let i of arr) { console.log(i)//a,b,c }
例三：
const arr = ['a', 'b'] // 手动给 arr数组添加一个属性 arr.name = 'qiqingfu' // for in 循环可以遍历出 name 这个键名 for (let i in arr) { console.log(i) // a，b，name } for (let i of arr) { console.log(i)//a,b }
结合上面的例子,分析得出：
for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
for in得到对对象的key或数组,字符串的下标
for of和forEach一样,是直接得到值
for of不能对象,会报错
简单说，for in是遍历键名，for of是遍历键值。
- var let const的区别
var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
箭头函数的理解？
https://www.cnblogs.com/mengff/p/9656486.html
普通函数和箭头函数区别？
//箭头函数 let fun = () => { console.log('lalalala'); } //普通函数 function fun() { console.log('lalla'); }
使用箭头函数应注意什么？
（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
（2）不能够使用arguments对象
（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数
- 代码算法之类
数组去重indexOf
var arr=[1,1,2,2,3,4,5,7,8,9,6,4,6,2,]
var arr2=[]
for(var i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])<0){
arr2.push(arr[i])
}
}
console.log(arr2)
es6方法数组去重
let a = [1,5,6,3,8,0,5,7,0,4,2,7,5,4,5,9,22] let b=new Set([...a]) console.log(b); b=[...b]; console.log(b)
冒泡排序
var arr=[1,3,4,6,8,0,2,5,7,4,9,2];
var temp=0;
for (var i=0;i<arr.length;i++) {
for(var j=0;j<arr.length-i;j++){
if(arr[j]<arr[j+1]){
temp=arr[j+1];
arr[j+1]=arr[j];
arr[j]=temp;
}
}
}
console.log(arr)
获取url中的参数
//测试地址：http://www.runobb.com/jqur/dfev.html?name=xiaohong&age=22
function showWindowHref(){
var sHref=window.location.href;
var args=sHref.split('?');
if(args[1]==sHref){
return '';
}
var aa=args[1].split('&');
var obj={}
for (var i=0;i<aa.length;i++) {
var bb=aa[i].split('=')
obj[bb[0]]=bb[1]
}
return obj;
}
降维数组
//利用[].concat.apply实现降维
var arr=[[1,2],[3,4]];
function Jw(obj){
console.log(Array.prototype.concat.apply([],obj))
return Array.prototype.concat.apply([],obj);
}
Jw(arr);
//递归
function reduceDimension(arr){
let ret = [];
let toArr = function(arr){
arr.forEach(function(item){
item instanceof Array ? toArr(item) : ret.push(item);
});
}
toArr(arr);
console.log(ret)
return ret;
}
reduceDimension([1, 2, [3, 4, [5, 6]]])
js判断一个字符串中出现次数最多的字符，统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次'); //出现次数最多的是:a出现 9次
写一个function,清除字符串前后的空格。(兼容所有浏览器)
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
如何用jquery禁用浏览器的前后进退按钮？
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>
获取页面中所有的checkbox怎么做？（不使用第三方框架）
var inputs = document.getElementsByTagName("input");//获取所有的input标签对象
var checkboxArray = [];//初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
var obj = inputs[i];
if(obj.type=='checkbox'){
checkboxArray.push(obj);
}
}
程序中捕获异常的方法？
try{
}catch(e){
}finally{
}
Vue框架
https://zhuanlan.zhihu.com/p/92407628
那首先谈谈你对Vue的理解吧？vue.js是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue是一个渐进式框架，相当于view层, 双向数据绑定, 他更轻量, 性能上更高效, 比其他框架更容易上手, 学习成本低, vue需要一个el对象进行实例化,
Vue与Angular以及React的区别？
angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有个vue实例
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
vue 的生命周期？
实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
应用场景
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted
vue获取数据在哪个周期函数？
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
mvvm 框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
Vue中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
vue是如何实现响应式数据的呢？（响应式数据原理）❗
https://blog.csdn.net/kzj0916/article/details/108298865
原理：
相信用过vue的都知道，vue中data中定义的数据会随着我们通过方法改变该数据的同时，页面上相关此数据的也会相应的刷新，实现响应式数据。可你知道它是如何实现这一功能的吗？下面让我们来了解了解它是如何做到这神奇操作的。
Object.defineProperty 监听修改读取数据：
Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
第一个值传入要修改的对象
第二个值传入该对象中要修改的key
第三个值是一个对象，里面有set 和get两种方法 set为值发生修改是所做的操作 get为读取改值时的操作
默认配置如下
现在我们来研究下vue是如何利用Object.defineProperty 监听修改读取数据的
我们创建一个对象，并利用Object.keys（）将对象中的key返回到一个数组中，并对该数组forEach遍历
将key对应值先取过来，对这个对象中每个不同的key通过Object.defineProperty修改并监听数据的变化，在修改该key对应的value值时，调用set方法 打印下监听xxxx数据改变 并将修改值赋给value
在读取该key对应的value值时，调用get方法 打印下获取xxxx对应的值 并直接返回当前value值
vue中是如何检测数组变化的呢？
vue.set()
分别简述computed和watch的使用场景?
答：computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子：搜索数据
created和mounted的区别?
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
params和query的区别?
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。
//query语法： this.$router.push({path:"地址",query:{id:"123"}}); //这是传递参数 this.$route.query.id； //这是接受参数 //params语法： this.$router.push({name:"地址",params:{id:"123"}}); //这是传递参数 this.$route.params.id; //这是接受参数
$nextTick的使用?
答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
// 修改数据 vm.msg = 'Hello' // DOM 还未更新 Vue.nextTick(function () { // DOM 更新 })
<keep-alive></keep-alive>的作用是什么?
答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
为什么使用key?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
vue组件中的data为什么是函数？
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
vue常用的修饰符?
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
vuex
https://blog.csdn.net/u012967771/article/details/114132555
关于VueX
VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。
使用Vuex的目的
实现多组件状态管理。多个组件之间需要数据共享时，Vuex是个很好的帮手哦
Vuex 的五大核心
其中state和mutation是必须的，其他可根据需求来加
1、state：负责状态管理，类似于vue中的data，用于初始化数据 //状态管理
2、mutation：专用于修改state中的数据，通过commit触发 //修改state
3、action：可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值 //异步操作
4、getter：Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter
5、module：模块化管理 //模块
// 导入vue及vuex import Vue from 'vue' import Vuex from 'vuex' // 挂载vuex Vue.use(Vuex) // 创建vuex对象并向外暴露 export default new Vuex.Store({ // 全局属性变量 state: { }, // 全局同步方法, 调用方法,this.$store.commit("xxx") mutations: { }, // 异步方法 调用方法,this.$store.dispatch("xxx") actions: { }, // Vuex属性计算,在视图里面当变量使用 getters: { }, // 模块化注册 modules: { } })
action与mutation的区别？
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
微信小程序
登录流程是调wx.login获取code传给后台服务器获取微信用户唯一标识openid及本次登录的会话密钥（session_key）等）。拿到开发者服务器传回来的会话密钥（session_key）之后，前端要保存wx.setStorageSync('sessionKey', 'value')
持久登录状态：session信息存放在cookie中以请求头的方式带回给服务端，放到request.js里的wx.request的header里
navigator 跳转页面标签
wx.redirectTo关闭当前页面，跳转到新的页面（类似重定向）
wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<navigator url="./../classificationdetails/classification">
wx.navigateTo({url: './../shouquan/index'})
wx:for、 wx:if
bindtap点击触发函数
bindtap和catchtap （bindtap不会阻止事件冒泡catchtap可以阻止事件冒泡）
https://segmentfault.com/a/1190000018689948
计算机网络基础
