作业帮web面试总结

   都是些很基础的东西  平时不太留意的。甚至是函数的参数，每个参数都是干嘛的。养成好习惯，做东西的时候需要认真！另一方面自己语言组织能力超级烂，很多东西表述的太差。继续努力，自勉！

1.盒模型是必问的。

•   分为标准盒模型和IE盒模型

          标准 content +padding+border+marigin    width = content

         IE盒模型的宽高包含了width = content+padding+border

•    可以通过css box-sizing来进行设置

          box-sizing:content-box;(标准盒模型)

         box-sizing:border-box;(IE盒模型怪异盒模型)

2.两侧固定 中间自适应。回答的越多越好 

• 使用绝对定位 

      左右使用绝对定位 由于绝对定位脱离标准流  center会自动在左右的下面 使用margin 留出左右元素的宽度 这样可以使中间自适应了

     div 元素

		<div class="boxleft">left</div>
		<div class="boxcenter">content</div>
		<div class="boxright">right</div>

   css 样式

      /*考虑到浏览器兼容性 最好还是加上这句*/
  	   html,body{ margin: 0px; padding:0; }

	  .boxleft, .boxright {
			position: absolute;
			top:0;
			width: 200px;
			background-color:blue;
		}
		.boxleft {
			left:0;
		}
		.boxright {
			right: 0;
		}
		.boxcenter {
		   margin: 0 200px;
		   background-color: pink;
		}

• 使用浮动定位

        左右浮动   左右脱离标准流 center 在正常的文档流中 使用margin指定左右边距

		<div class="boxleft">left</div>
		<div class="boxright">right</div>
		<div class="boxcenter">content</div>

	.boxleft {
  		float: left;
  		width: 200px;
  		background-color:blue;
  	}
  	.boxright {
  		float:right;
  		width: 200px;
  		background-color:blue;
  	}
  	.boxcenter {
  		margin: 0 200px;
  	}

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行

• 使用flex布局

   在外围包裹一层div，设置为display:flex；两侧设为固定的不缩放 宽度中间设置flex：1   。

     flex 0 0 200px；可能几个属性会问到 分别是 flex-grow放大比例, flex-shrink缩小比例 和 flex-basis项目将占据固定空间的简写

  	<div class="wrapper">
	  	<div class="boxleft">left</div>
	  	<div class="boxcenter">content</div>	
	  	<div class="boxright">right</div>
  	</div>

.wrapper {
	display: flex;
}
.boxleft, .boxright {
	flex: 0 0 200px; 
	background-color:blue;
}
.boxcenter {
	flex: 1;
	background-color: pink;
}

3.this 指向。是否严格模式指向的区别

全局情况下 this始终指向window

作为函数调用时，非严格模式指向window ， 严格模式指向undefined

普通函数调用的时候 this 指向window

  	 var x = 10;
  	 function foo(){
  	 	console.log(this); //window
  	 	 console.log(this.x);  //10 
  	 }
     foo()

严格模式下调用的时候this 指向undefined

    "use strict" 
  	 var x = 10;
  	 function foo(){
  	 	console.log(this); //window
  	 	 console.log(this.x);  //10 
  	 }
     foo()  Uncaught TypeError: Cannot read property 'x' of undefined

作为对象方法调用时 指向它的直接调用者  

 如果在对象方法中定义函数，那么也就是闭包,this是会指向window

  var obj = {
        x: 10,
        foo: function () {
            console.log(this)   //{x: 10, foo: ƒ}
            function f(){
                console.log(this);      //Window
                console.log(this.x);    //10 
                console.log(obj.x===window.x)  //true,obj===window.obj
            }f();
        }
    }
    obj.foo();

 

作为构造函数调用时 指向新new 出来的对象 

加上new关键字来调用，那么就会创建一个连接到该函数的prototype成员的新对象，同时，this会被绑定到这个新对象上

若构造函数返回一个对象，该对象将作表达式的返回值，而传入构造函数中的this 将被丢弃

 

4.跨域 什么是跨域？ 几种方式解决方式

协议、域名、端口有任何一个不同，都被当作是不同的域。

jsonp方式

后端设置

Access-Control-Allow-*头   jsonp的方式虽然简便，但有个缺点，就是只支持get请求，对于只支持post的接口就不支持了。通过后台设置Access-Control-*等header，可以解决跨域问题，而且get,post都支持。

/**
     * 测试ajax 设置head跨域请求
     * */
    @RequestMapping(value = "/testCrossOrigin.do", method = RequestMethod.POST)
    @ResponseBody
    public String crossOrigin(Model model,String number,HttpServletRequest request,HttpServletResponse response)throws Exception{
 
        //设置response header，允许跨域请求
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Methods","POST");
        response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
        response.setHeader("Access-Control-Allow-Max-Age","1728000");//单位：秒，这里是20天
 
        Integer result = Integer.parseInt(number);
        result = result*result;
 
       return result.toString();
    }

Access-Control-Allow-Origin设置允许跨域的白名单，在白名单里的跨域请求是允许的。

Access-Control-Allow-Methods设置接受的方法，这里只接受POST方法。

Access-Control-Allow-Headers设置接受的请求头，用逗号分隔。

Access-Control-Allow-Max-Age设置预检的有效期，单位为秒。发送正式请求前，浏览器会预先发送一个预检请求，如果服务器返回了上述信息，表明是可以跨越请求的，然后才会正式发送请求。预检成功后，在有效期内就不用再发送了。
 

使用代理

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。
 

5. ajax 是什么？ 原理  步骤

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

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

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

<script type="text/javascript" >
        var XHR = new XMLHttpRequest();
        XHR.open( 'get', './a.php');
        XHR.send(null);
        XHR.onreadystatechange = function () {
          if ( XHR.readyState === 4 ) {
            if ( XHR.status === 200 ) {
              alert(XHR.responseText);
            }
          }
        }

6.数组方法

7.es6中 有几种for循环 分别用在什么情况下 以及里面的参数

• filter() 返回的数组元素是调用的数组的一个子集，并且是新数组
• map() 返回的是新数组
• indexOf() 返回找到的第一个元素的索引值，没有则返回-1
• reduce() 返回单个值
• forEach() 返回一个数组的拷贝，不会修改原数组
• find() 返回第一个找到的元素，没有找到就返回undefined1

8. promise 有几种状态 分别代表什么 如何让一个promise 成功或者失败都能被调用

9.伪类

10.伪元素

 区别：伪类添加元素的特殊效果，而伪元素则是添加元素的内容，当然内容可以是空的，相当于空的div。

· 伪类

属性	描述	CSS
:active	选择正在被**的元素	1
:hover	选择被鼠标悬浮着元素	1
:link	选择未被访问的元素	1
:visited	选择已被访问的元素	1
:first-child	选择满足是其父元素的第一个子元素的元素	2
:lang	选择带有指定 lang 属性的元素	2
:focus	选择拥有键盘输入焦点的元素	2
:enable	选择每个已启动的元素	3
:disable	选择每个已禁止的元素	3
:checked	选择每个被选中的元素	3
:target	选择当前的锚点元素	3
:first-of-type	选择满足是其父元素的第一个某类型子元素的元素	3
:last-of-type	选择满足是其父元素的最后一个某类型子元素的元素	3
:only-of-type	选择满足是其父元素的唯一一个某类型子元素的元素	3
:nth-of-type(n)	选择满足是其父元素的第n个某类型子元素的元素	3
:nth-last-of-type(n)	选择满足是其父元素的倒数第n个某类型的元素	3
:only-child	选择满足是其父元素的唯一一个子元素的元素	3
:last-child	选择满足是其父元素的最后一个元素的元素	3
:nth-child(n)	选择满足是其父元素的第n个子元素的元素	3
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素	3
:empty	选择满足没有子元素的元素	3
:in-range	选择满足值在指定范围内的元素	3
:out-of-range	选择值不在指定范围内的元素	3
:invalid	选择满足值为无效值的元素	3
:valid	选择满足值为有效值的元素	3
:not(selector)	选择不满足selector的元素	3
:optional	选择为可选项的表单元素，即没有“required”属性	3
:read-only	选择有"readonly"的表单元素	3
:read-write	选择没有"readonly"的表单元素	3
:root	选择根元素	3

· 伪元素

属性	描述	CSS
::first-letter	选择指定元素的第一个单词	1
::first-line	选择指定元素的第一行	1
::after	在指定元素的内容前面插入内容	2
::before	在指定元素的内容后面插入内容	2
::selection	选择指定元素中被用户选中的内容	3

11.闭包 什么时候用 有什么特点

闭包的三大特点为：

1、函数嵌套函数

2、内部函数可以访问外部函数的变量

3、参数和变量不会被回收。

function test( ){ 
var a = 0;
return function( ){ 
a++;
alert(a);
} 
}
var atest = new test( ); //引用返回的函数
atest( ); // 1
atest( ); // 2

 

12. http 协议状态码 

 1**(信息类)：表示接收到请求并且继续处理
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本
  2**(响应成功)：表示动作被成功接收、理解和接受
    200——表明该请求被成功地完成，所请求的资源发送回客户端
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到，但返回信息为空
    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求

  3**(重定向类)：为了完成指定的动作，必须接受进一步处理
    300——请求的资源可在多处得到
    301——本网页被永久性转移到另一个URL
    302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
    303——建议客户访问其他URL或访问方式
    304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码，现行版本中不再使用
    307——申明请求的资源临时性删除

  4**(客户端错误类)：请求包含错误语法或不能正确执行
       400——客户端请求有语法错误，不能被服务器所理解
       401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
         HTTP 401.2 - 未授权：服务器配置问题导致登录失败
    　　HTTP 401.3 - ACL 禁止访问资源
    　　HTTP 401.4 - 未授权：授权被筛选器拒绝
        HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败
        402——保留有效ChargeTo头响应
        403——禁止访问，服务器收到请求，但是拒绝提供服务
        HTTP 403.1 禁止访问：禁止可执行访问
    　　HTTP 403.2 - 禁止访问：禁止读访问
    　　HTTP 403.3 - 禁止访问：禁止写访问
    　　HTTP 403.4 - 禁止访问：要求 SSL
    　　HTTP 403.5 - 禁止访问：要求 SSL 128
    　　HTTP 403.6 - 禁止访问：IP 地址被拒绝
    　　HTTP 403.7 - 禁止访问：要求客户证书
    　　HTTP 403.8 - 禁止访问：禁止站点访问
    　　HTTP 403.9 - 禁止访问：连接的用户过多
    　　HTTP 403.10 - 禁止访问：配置无效
    　　HTTP 403.11 - 禁止访问：密码更改
    　　HTTP 403.12 - 禁止访问：映射器拒绝访问
    　　HTTP 403.13 - 禁止访问：客户证书已被吊销
    　　HTTP 403.15 - 禁止访问：客户访问许可过多
    　　HTTP 403.16 - 禁止访问：客户证书不可信或者无效
        HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效
    404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖，请求资源不可访问
    407——类似401，用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态，请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

  5**(服务端错误类)：服务器不能正确执行一个正确的请求
        HTTP 500 - 服务器遇到错误，无法完成请求
    　　HTTP 500.100 - 内部服务器错误 - ASP 错误
    　　HTTP 500-11 服务器关闭
    　　HTTP 500-12 应用程序重新启动
    　　HTTP 500-13 - 服务器太忙
    　　HTTP 500-14 - 应用程序无效
    　　HTTP 500-15 - 不允许请求 global.asa
    　　Error 501 - 未实现
       HTTP 502 - 网关错误

HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

13. 浏览器缓存

14. 箭头函数和普通函数有什么区别

• 1.箭头函数相当于匿名函数，是不能作为构造函数的，不能使用new
• 2.箭头函数不绑定arguments,取而代之用rest参数…解决
• 3.箭头函数会捕获其所在上下文的this值，作为自己的this值。即箭头函数的作用域会继承自外围的作用域。
• 4.箭头函数当方法使用的时候没有定义this的绑定

obj = {
  a:10,
  b:()=>{
    console.log(this.a);//undefined
    console.log(this);//window
  },
  c:function(){
    return ()=>{
      console.log(this.a);//10
    }
  }
}
obj.b();
obj.c();

b箭头函数运行时的外围环境是全局作用域，this指向了window 
c内部返回的箭头函数运行在c函数内部，其外围的作用域是外部函数的作用域，外部函数的this值指向调用它的obj，所以输出的值是10

• 5.使用call()和apply()调用 

通过call()或者apply()调用一个函数时，只是传入参数而已，对this并没有影响。

var obj = {
  a:10,
  b:function(n){
   var f = (v) => v + this.a;
   var c = {a:20};
   return f.call(c,n);
 }
}
console.log(obj.b(1));//11

• 6.箭头函数没有函数原型

var a = ()=>{
  return 1;
}
function b(){
  return 2;
}
console.log(a.prototype);//undefined;
console.log(b.prototype);//object{...}

 

• 7.箭头函数不能当做Generator函数，不能使用yield关键字 
• 8.箭头函数不能换行

var a = () 
          => 1;//SyntaxError:Unexpected token
 

15.bootstrap 解决中间间隔问题
16.  交换变量值

17.路由模式 跳转 子路由

history模式

区别：hash模式背后的原理是onhashchange事件

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
}

（localtion是js里管理地址栏的内置对象，是window对象的一部分，可通过window.localtion访问，在w3cshool里的详细介绍) 
由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有亲求服务器，但是页面状态和url关联起来。后来人们称其为前端路由，成为单页应用标配。

比如http://www.abc.com/#/index，hash值为#/index。hash模式的特点在于hash出现在url中，但是不会被包括在HTTP请求中，对后端没有影响，不会重新加载页面。

hash模式（默认模式）
history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法。MDN相关介绍（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。 
当使用history模式时，url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。 
通过history api，我们丢弃了丑陋的#，但是有一个缺点，当刷新时，如果服务器中没有相应的相应或者资源，会分分钟刷出一个404来（刷新需要请求服务器）。所以history模式不怕前进，不怕后退，就怕刷新

hash模式和history模式对比
pushState()设置新的url可以是和当前url**同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档**的url。
pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。
pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。
pushState()可额外设置title属性供后续使用。
不过，hash模式也有比history模式优势的地方。

hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误。
history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。 
history模式官方文档

18. css 实现水平垂直居中

使用flex弹性布局

  	<div class="wrapper">
  		<div class="box">
  		</div>
  	</div>

.wrapper 
{
	display: flex;
	display: -webkit-flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	height: 500px;
	background-color: black;

}
.box {
	width: 200px;
	height: 200px;
	background: pink;
}

绝对定位和负边距

.wrapper {
	position: relative;
	width: 600px;
	height: 600px;
	background-color: black;
}
.box {
	position: absolute;
	top:50%;
	left:50%;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	background-color: pink;
}

translate

.wrapper
{
	width: 600px;
	height: 600px;
	background: black;
}
.box 
{
	width: 300px;
	height: 300px;
	background: pink;
	position: relative;
	top: 50%; /*偏移*/
	left: 50%;
	transform: translate(-50%,-50%);
}

 

19.css 实现轮播 

理论基础

• CSS3 animation 属性和 @keyframes 规则

主体思想

1. 准备相同大小的多个图片
2. 将要展示图片横排放在一个图片容器里面
3. 在图片容器外再加一个展示容器，展示容器大小为图片大小
4. 给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值

注意事项

1. 动画效果分为切换和停留两部分
2. 自定义动画阶段与图片数量相关
3. 动画各阶段偏移值与图片大小相关
4. 本文中示例最后一个图片到第一个图片没有切换效果，一个思路是可以由最后一个图片再挨个切换到第一个图片

<div class="box">
	<div class="imgwraper">
		<img src="../1.png" alt="">
		<img src="../1.png" alt="">
		<img src="../1.png" alt="">
	</div>
</div>

.box {
	width: 400px;
	height: 300px;
	overflow: hidden;
}

.imgwraper {
 	width: 1200px;
 	animation: frames 5s ease-out infinite;
}

.img {
	float: left;
	width: 400px;
	height: 300px;
}

@keyframes frames {
	0%,25% {
		margin-left: 0;
	}
	35%,60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

animation简介：

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成： 
1）通过类似Flash动画中的帧来声明一个动画； 
2）在animation属性中调用关键帧声明的动画。

animation属性值：

animation 属性是一个简写属性 
语法：animation: name duration timing-function delay iteration-count direction; 
animation设置的六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。取值： 
none：（默认）规定无动画效果（可用于覆盖来自级联的动画）。 
keyframename：规定需要绑定到选择器的 keyframe 的名称。

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。取值： 
time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function：规定动画的速度曲线。取值： 
ease：默认。动画以低速开始，然后加快，在结束前变慢。 
linear：动画从头到尾的速度是相同的。 
ease-in：动画以低速开始。 
ease-out：动画以低速结束。 
ease-in-out：动画以低速开始和结束。 
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是从 0 到 1 的数值。

animation-delay：规定在动画开始之前的延迟。取值： 
time：（可选）定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

animation-iteration-count： 规定动画应该播放的次数。取值： 
n：定义动画播放次数的数值。 
infinite：规定动画应该无限次播放。

animation-direction：规定是否应该轮流反向播放动画。取值： 
normal：默认值。动画应该正常播放。 
alternate：动画应该轮流反向播放。

js 实现轮播 

20.css 有哪几种定位 以什么为基准

• static：相当于没有定位，元素会出现在正常的文档流中。
• fixed：元素框的表现类似于absolute，但是fixed是相对于视窗本身，也就是浏览器窗口而定位的。所以，采用该定位的元素在页面下拉的时候，其位置并不会发生变化。
• relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。
• absolute：生成绝对定位的元素，相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位，所以absolute定位实际上就是相对于有定位的第一个祖先元素定位，如果所有的祖先元素都没有定位，则相对于初始包含块或者画布，一般就是body元素定位。

21.取交集  js

22. es6  了解那些

23. BFC

24. cookie  如何使用 优缺点 加密 参数

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如下所示:

username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe"

写入 cookie 的过期时间时在GMT或UTC时间格式上的兼容问题

用 JavaScript中的 Date 类，可以得到格式为“年/月/日 时:分:秒”的当前本地时间。这种格式是合法的，可以用静态方法 Date.parse() 解析的,否则返回NaN的话，说明格式为非法，不能解析。

从北京时间转换成GMT/UTC时间有8个小时的时间差。计算方法为：

UTC时间 + 时间差(+8) = 本地时间

兼容问题为：

在 web 浏览器中写入cookie的过期时间的实现是不同的。Google chrome 浏览器会把转换成GMT/UTC后的时间写入cookie的过期时间，而IE和FF浏览器还是把本地时间写入cookie的过期时间，toGMTString()/toUTCString()没有起作用了。

写入cookie的函数JS代码如下：

function setCookie(key, val, expires, domain, path, secure){
    if (!path) path = '/';
    
    document.cookie = 
        key + '=' + encodeURIComponent(val)
        + (expires ? '; expires=' + expires : '')
        + (domain ? '; domain=' + domain : '')
        + (path ? '; path=' + path : '')
        + (secure ? '; secure' : '');
}

参数详解：

以下可选的cookie属性值可以跟在键值对后，用来具体化对cookie的设定/更新，使用分号以作分隔：

• ;path=path (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
• ;domain=domain (例如 'example.com'， 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。与早期规范相反的是，在域名前面加 . 符将会被忽视，因为浏览器也许会拒绝设置这样的cookie。如果指定了一个域，那么子域也包含在内。
• ;max-age=max-age-in-seconds (例如一年为60*60*24*365)
• ;expires=date-in-GMTString-format 如果没有定义，cookie会在对话结束时过期

这个值的格式参见Date.toUTCString() 

• ;secure (cookie只通过https协议传输)

cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).

写入cookie的代码如下：

var dat = new Date();
var dateTime = dat.getFullYear()+'/'+(dat.getMonth()+1)+'/'+(dat.getDate()+1)+ ' 8:00:00';
setCookie('bookInfoCounts', counts, new Date(Date.parse(dateTime)).toUTCString());

弊端
cookie虽然在持久保持客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限。

1、IE6或更低版本最多20个cookie；

2、IE7和之后的版本最后可以有50个cookie；

3、Firefox最多50个cookie；

4、chrome和Safari没有做硬性限制；

5、IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie；

6、cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

1）通过良好的编程，控制保存在cookie中的session对象的大小；

2）通过加密和安全传输技术（SSL），减少cookie被**的可能性；

3）在cookie中不存放敏感数据，即使被盗也不会有重大损失；

4）控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1）Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。在当今新的浏览器和客户端设备版本中，支持 8192 字节的 Cookie 大小已愈发常见。

2）用户配置为禁用。有些用户禁用了浏览器或客户端设备接收 Cookie 的能力，因此限制了这一功能；

3）由于在HTTP请求中的cookie是明文传递的，潜在的安全风险，Cookie 可能会被篡改；

4）有些状态不可能保存在客户端；

5）cookie会被附加在每个HTTP请求中，所以无形中增加了流量。

6）cookie一般不可跨域使用；

7）没有封装好的setCookie和getCookie方法，需要开发者自省封装。

25. mvc mvvm的区别
      MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此试图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

     MVC ，用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）

26.display 属性值

27.vue 父子通信

父组件传递给子组件 通过props属性来实现

父组件：

<parent>
    <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子组件: （通过props属性来接收数据）

方式1：

props: ['childMsg']

方式2：

props: {
    childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

.子组件与父组件通信   通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

子组件:

<template>
    <input v-model='inputmsg' />
</template>

watch: {
    inputmsg：function(){
        this.$emit('parentFun',this.inputmsg); 
        //一旦inputmsg改变就会触发父组件的parentFun方法，input的值为向父组件传递的数据
    }
}

父组件:

<parent>
    <child @parentFun="change"></child>  <!--监听子组件触发的parentFun事件,然后调用change方法-->
</parent>
methods: {
    change(msg) {
         console.log(msg);  
    }
}

28. vue非父子直接通信

vuex

在vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。然而在一些小型的项目，就需要一个比较便捷的解决方法。那么，eventBus的作用就体现出来了。 

bus 中央事件总线

主要实现途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

1.我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js

import Vue from 'vue';  
export default new Vue();  

2.这样我们就创建了一个新的vue实例。接下来我们在需要通信的组件中import它。

import Bus from 'common/js/bus.js';  

3.组件A中进行操作

methods: {  
   addCart(event) {  
       Bus.$emit('getTarget', event.target);   
   }  
}  

//这里我们在组件A中每次执行addCart，都会在bus中触发这个名为'getTarget'的事件，并将点击事件的event.target顺着事件传递出去。
4.接着，我们要在组件B中的created()钩子中调用bus监听这个事件，并接收参数：

created() {  
  Bus.$on('getTarget', target => {  
     console.log(target);  
  });  
}  

//这样，在每次组件A触发addCart事件，就会把event.target传递到组件B中，并console出来。

所以eventBus的使用还是非常便捷的，但是如果是中大型项目，通信比较复杂，还是建议大家直接使用vuex。
29. vuex 缺点

不能数据持久化 每次刷新页面都要重置所有页面 持久化只能通过localstorge才能实现