平安壹钱包二面

问题总结

1 浏览器标签页通信方式

方式一：cookie+setInterval
关于cookie
cookie最初是在客户端用于存储用户的会话信息的。cookie实际上是一小段文本信息，客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端会把cookie保存起来，当浏览器再次请求该网站时，把请求的网址和cookie一同提交给服务器。服务器检查该cookie以此来辨认用户状态。服务器也可根据需要修改cookie的内容。
document.cookie可以读取、写入、删除cookie。
cookie的特性：一个页面产生的cookie能被与这个页面同一目录或其他子目录下的页面访问，由此产生了一个共享的存储空间。通常把cookie的path设置为一个更高级别的目录从而使更多页面共享。cookie所在的域默认为请求的地址，也可以设置document。domain为父域等方式扩大cookie可被访问的域。
实现原理
需求：新闻详情页修改数据提交后，列表页可显示

//列表页 间隔1s检测tid字段是否更新
window.onload=function(){
  var tid='';
  setInterval(function(){
    if(tid!=QQ.cookie.get('tid')){
      alert('数据更新');
      tid=QQ.cookie.get('tid');
    }
  },1000);
}

//详情页 有数据修改时 写入cookie
<input id='content' type='text'>
<button id='btn'></button>
<script>
window.onload=function(){
  var oBtn=document.getElementById('btn');
  var oInput=document.getElementById('content');
  oBtn.onclick=function(){
    var val=oInput.value;
    QQ.cookie.set('tid',val);
  }
}
</script>

不足
1 cookie空间有限，浏览器在每一个域名下最多能设置30-50个cookie，容量最多4K左右
2 每次HTTP请求会把当前域的cookie发送到服务器上，而有些cookie只是浏览器才能用到，浪费网络带宽
3 setInterval的频率设置，过大影响浏览器性能，过小影响时效性
优点
兼容性好几乎所有浏览器都支持

方式二：localStorage

HTML5中加入了一个localStorage特性，主要是用来作为本地存储使用的，解决了cookie存储空间不足的问题。一般浏览器支持的是5M大小，不同浏览器中localStorage也会有所不同。
localStorage提供了JS的读写操作。

if(！window.localStorage){
  alert('浏览器不支持localStorage');
  return false;
}else{
  var storage=window.localStorage;
  storage.a=1;
  storage.setItem('b',2);
  storage.clear();
}

除了读写之外，比cookie多了一个优点，提供了onstorage以及storage事件，可以绑定一个回调函数。

window.onstorage=function(e){
  console.log(e);
}
window.addEventListener('storage',function(e){
  console.log(e);
});

localStorage是Storage对象的实例，对Storage事件进行任何修改都会触发storage事件。属性/setItem保存数据 delete/removeItem删除数据 clear都会触发，通过这个事件我们可以实现页卡之间的变动监听。
实现原理

//列表页
<script>
window.addEventListener('storage',function(event){
  console.log('newValue is'+localStorage.getItem('tid'));
  console.log('oldValue is'+event.oldValue);
  alert('数据更新');
},false);
</script>
//详情页
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
    window.onload=function(){
        var oBtn=document.getElementById("btn");
        var oInput=document.getElementById("content");
        oBtn.onclick=function(){
            var val=oInput.value;
            localStorage.setItem("tid",val);
        }
    }
</script>

注意
onstorage以及storage事件都是针对非当前页面对localStorage进行修改时才会触发。并且，在对原有的数据的值进行修改时才会触发，比如原本有一个key为a，value为1的localStorage，再执行localStorage.setItem(‘a’,1)是不会触发监听函数的
不足
浏览器对于localStorage的容量大小不统一，并且高版本浏览器才支持localStorage这个属性
目前所有浏览器中都会把localStorage的值类型限定为string类型，需要JSON转换
localStorage本质上是对字符串的读取，存储内容多的话会消耗内存空间，导致页面变卡
只能监听非己页面的数据变化，这一点严重影响使用
优点
解决了cookie容量小和时效性不足的问题

方式三：WebSocket
WebSocket API是下一代客户端-服务器的异步通信方法，双向实时通信。WebSocket并不局限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket两端可以彼此相互推送。XHR受到域的限制，而WebSocket允许跨域通信。

//使用方式
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  //发送
  socket.send('I am the client..listening..');
  //监听消息
  socket.onmessage=function(event){
    console.log('client received a message',event);
  };
  //监听socket关闭
  socket.onclose=function(event){
    console.log('client notified socket has closed',event);
  };
  //关闭socket
  socket.close();
}

send和onmessage用于发送、接收数据。onmessage事件提供了一个data属性，包含消息的body部分。body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多数据。
实现原理

//列表页通过onmessage监听socket服务器发送过来的消息
<script>
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  socket.onmessage=function(event){
    console.log('Client received a message',event);
  };
};
</script>
//详情页有数据修改时，通过socket连接，通知列表页更新数据
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
var socket=new WebSocket('ws://localhost:8080');
window.onload=function(){
  var oBtn=document.getElementById("btn");
  var oInput=document.getElementById("content");
  oBtn.onclick=function(){
    var val=oInput.value;
    socket.onopen=function(event){
      socket.event('数据更新');
    }
  }
}
</script>

WebSocket的语法简单，不过需要IE10+浏览器才支持WebSocket通信。如果需要兼容IE8、9，通常使用第三方库来解决这个问题，比如Socket.IO。
不足
需要浏览器端支持才能完成任务。如果socket数据量比较大的话，会严重消耗服务器的资源。
优点
简单可实时

方式四：BroadcastChannel
BroadcastChannel即广播频道，是window下面的一个API，用于同源不同页面之间完成通信。postmessage传递数据，onmessage监听消息。只要初始化实例时传入相同的频道值，就会被接入到一个相同的广播频道中。
实现原理

//详情页传递数据
let listCast=new BroadcastChannel('mychannel');
myObj={tid:'123',title:'更改后的标题'};
listCast.postMessage(myObj);
//列表页接收广播
let articleCast=new BroadcastChannel('mychannel');
articleCast.onmessage=function(e){
  console.log(e.data);
}

不足
兼容性差只支持最新版Chrome和Firefox,完全不支持IE和Safari。
优点
简单单一

方式五：SharedWorker
SharedWorker是HTML5新提供的浏览器API，叫做共享工作线程。允许多个页面共享使用线程，每个页面都链接到该共享工作线程的某个端口号上。页面通过该端口与共享工作进程进行通信。
实现原理

//列表页
<script>
var s=new SharedWorker('x.js');
s.port.onmessage=function(e){
  console.log(e.data);
  alert('数据变化');
};
s.port.start();
</script>
//详情页 通过SharedWorker通知列表页更新数据
<input id="content" /><input type="button" id="btn" value="发送"/>
<script>
var s=new SharedWorker('x.js');
btn.onclick=function(){
  s.port.postMessage(document.getElementById('content').value);
  s.port.start();
}
</script>
//共享线程x.js 双向 每一个页面都能用来发送和接收数据
// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]
  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

SharedWorker可以被多个window同时使用，但是必须保证这些标签页同源。
不足
兼容性差，不支持IE
API简单，配置繁琐
优点
另启一个新线程，不影响主线程代码业务，无需借助服务器。

2 Ajax提交表单怎么写

先复习提交表单的GET和POST区别

GET会在Request URL后面添加参数，POST参数在消息体内(在chrome里Form Data就是请求的第四部分-消息体)
GET安全性比POST低
GET请求可被缓存，有长度限制(添加到URL中而URL有长度限制 2048个字符)。POST没有。
ajax提交表单使用jquery如下

function login(){
  $.ajax({
    type:'POST',
    dataType:'json',//预期服务器返回的数据类型
    url:'users/login',
    data:$('#form1').serialize(),
    success:function(result){
      if(result.resultCode==200){
        console.log('SUCCESS');
      }
    },
    error:function(){
      console.log('ERROR');
    }
  });
}

serialize() 方法
通过序列化表单值，创建 URL 编码文本字符串。
可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

3 如何判断json对象

首先复习JSON格式，附上JSON与JS对象的区别
https://www.jb51.net/article/107041.htm
判断方法

function isJson(obj) {
  var isjson =
    typeof obj == 'object' &&
    Object.prototype.toString.call(obj).toLowerCase() == '[object object]' &&
    !obj.length
  return isjson
}

4 BFC

参考地址：
https://www.cnblogs.com/giggle/p/5236982.html
https://www.cnblogs.com/giggle/p/5236770.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

什么是BFC？
根据MDN解释，BFC就是块格式化上下文，可理解为一个区域。
进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。总之，BFC与外部元素互不影响。
触发BFC的条件 ?
1 不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC.
2 何时触发BFC ?
给这些元素添加如下属性就可以触发BFC。
常用方式：
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
3 BFC的作用 ?
清除元素内部浮动(让浮动内容和周围内容等高)
设置父元素overflow:hidden/auto
解决外边距合并
设置其中一个的父元素overflow:hidden/display:table-cell
-自适应布局/防止与浮动元素重叠
以两侧固定中间自适应为例，可以设置两端float为left/right，中间采用overflow:hidden/display:table-cell+width:9000px(一个很大的值)

5 红黑树

参考这篇知乎的漫画专栏https://zhuanlan.zhihu.com/p/31805309
首先复习什么是二叉查找树(BST):
1 左子树所有节点值都小于等于根节点值
2 右子树所有节点值都大于等于根节点值
3 左右子树也分别是二叉排序树
优点：查找所需最大次数约等于树的高度
缺陷：插入节点时可能导致不平衡
由此产生了红黑树：自平衡的二叉查找树
附加特性：
1 节点是红色/黑色
2 根节点是黑色
3 每个叶子节点都是黑色的空节点
4 每个红色节点的两个子节点都是黑色(从每个叶子到根的所有路径上不能有两个连续的红色节点)
5 从任意节点到其每个叶子的所有路径都包含相同数目的黑色节点
完整说明 https://huangxsu.com/2018/08/01/js-data-structure/
代码太长给我整懵了先码再看

6 一天的时间怎么安排的

要具体到时间点我的回答是每天的工作内容怎么安排怎么分块除了起床时间…没有回答固定的时间因为不是很懂这个问题的意义看作息是否健康？每天的任务不同上班时间都是一样的剩下的是根据当天的情况再划分

其余的记不起来了

平安壹钱包二面

问题总结

1 浏览器标签页通信方式

2 Ajax提交表单怎么写

3 如何判断json对象

4 BFC

5 红黑树

6 一天的时间怎么安排的

高頻面試題之HTTP篇

vue教程實踐

0829面試總結

【JavaScript高級】貪喫蛇

高頻面試題之CSS篇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結