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