0612vivo提前批一面
岗位:软件工程师(前端)
- CSS选择器以及优先级 子绝父相定位 水平垂直居中
CSS选择器有
- 标签选择器、类名选择器、多类名选择器、ID选择器、通配符选择器(*)
- 伪类选择器(链接伪类选择器,lvha,:link 未访问 :visited已访问 :hover鼠标移上去 :active被鼠标选定瞬间的状态;结构伪类选择器,:nth-child(数字、关键词even/odd、公式2n+1)、nth-last-child、first-child、last-child;目标伪类选择器 :target 选择当前处于活动状态的元素)、伪元素选择器(:before、:after在元素开始或结束位置插入新行内元素,必须结合content属性)
- 复合选择器(交集选择器 比如h3.cls、并集选择器 逗号隔开、后代选择器 空格隔开、子元素选择器 >隔开)
- 属性选择器(选取带有特殊属性的标签 比如a[title]表示带有title属性的a标签 div[class^=font]表示类名以font开头的div)
水平垂直居中 参考前端之巅的这篇文章https://mp.weixin.qq.com/s/uTnMr4lv_Hrlt2TH9A01gA 一共10种方式可参考
- 居中元素定宽高 假设宽高都是100px
(1) absolute+负margin
/* 定位代码 */
.wp {position: relative;
}
.box {position: absolute;;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;
}
(2) absolute+margin auto
.wp {position: relative;
}
.box {position: absolute;;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
(3) absolute+css3计算属性 cal
.wp {position: relative;
}
.box {position: absolute;;top: calc(50% - 50px);left: calc(50% - 50px);
}
- 居中元素不定宽高
(1) absolute+transform 因为transform是针对自身的宽高比例 所以不必指定宽高
.wp {position: relative;
}
.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
(2) line-height+text-align+vertical-align initial表示默认值 这里不用initial就会变成父元素的高度 否则是行内元素包裹内容的高度
/* 定位代码 */
.wp {line-height: 300px;text-align: center;font-size: 0px;
}
.box {font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;text-align: left; /* 修正文字 */
}
(3) writing-mode 可以改变文字的显示方向 文字水平变垂直 水平属性变垂直属性 比如text-align 这种方式对我来说不太便于理解
<div class="wp"><div class="wp-inner"><div class="box">123123</div></div>
</div>/* 定位代码 */
.wp {writing-mode: vertical-lr;text-align: center;
}
.wp-inner {writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;
}
.box {display: inline-block;margin: auto;text-align: left;
}
(4) table 因为table单元格的内容本身就是垂直居中的 所以加一个水平居中即可
<table><tbody><tr><td class="wp"><div class="box">123123</div></td></tr></tbody>
</table>
.wp {text-align: center;
}
.box {display: inline-block;
}
(5) css-table table-cell
<div class="wp"><div class="box">123123</div>
</div>
.wp {display: table-cell;text-align: center;vertical-align: middle;
}
.box {display: inline-block;
}
(6) flex
<div class="wp"><div class="box">123123</div>
</div>
.wp {display: flex;justify-content: center;align-items: center;
}
(7) css 网格布局grid
<div class="wp"><div class="box">123123</div>
</div>
.wp {display: grid;
}
.box {align-self: center;justify-self: center;
}
总结:
PC端有兼容性要求,宽高固定,推荐absolute+负margin
PC端有兼容性要求,宽高不固定,推荐css-table
PC端无兼容性要求,推荐flex
移动端推荐使用flex
2. JS 原型链 继承
JS继承
- 原型链:让原型对象等于另一个类型的实例 SubType.prototype=new SuperType()
(1)所有函数的默认原型都是Object的实例,因此默认原型内都会包含一个内部指针,指向Object.prototype。
(2)如何确定实例和原型的关系呢?两种方式:instanceof()和isPrototypeOf(),只要原型链中出现过,就会返回true。所以:
instance instanceof Object与Object.prototype.isPrototypeOf(instance)都会返回true
(3)定义方法需要注意两项:
必须在用SuperType的实例替换原型之后,再添加新方法或者重写父类型中的方法。
不能用字面量方式添加新方法,否则会使原型继承失效。因为这种方式是替换而不是添加。此时原型链已经被切断。
SubType.prototype=new SuperType();
SubType.prototype={getSubValue: function () {return this.subproperty; },someOtherMethod: function () {return false;}
}
var instance=new SubType();
console.log(instance.getSuperValue());//error!
(4) 原型链存在的问题:
所有子类型的实例都共享这一个colors属性,一处修改全部改变。
function SuperType(){this.colors=["red","blue"];
}
function SubType(){
}
SubType.prototype=new SuperType();
var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//red,blue,blackvar instance2=new SubType();
console.log(instance2.colors);//red,blue,black
在创建子类型的实例时,不能向父类型的构造函数中传递参数。
- 借用构造函数
解决了原型链共用引用类型值的问题。在子类型构造函数的内部调用父类型构造函数。
function SuperType(){this.colors=["red","blue"];
}
function SubType(){SuperType.call(this);
}
var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//red,blue,blackvar instance2=new SubType();
console.log(instance2.colors);//red,blue 因为每次都会重新构造一遍
解决了原型链继承不能向父类型传值的问题。
function SuperType(name){this.name=name;
}
function SubType(){SuperType.call(this,"Nicolas");//传值this.age=29;//新增加的属性
}
var instance1=new SubType();
console.log(instance1.name);//"Nicolas"
console.log(instance1.age);//29
这种方式的主要问题就是父类型的原型中定义的方法对于子类型而言是不可见的。
- 组合继承(原型链+借用构造函数)
原型链-原型属性方法的继承,借用构造函数-实例属性的继承
function SuperType(name){this.name=name;this.colors=["red","blue"];
}
SuperType.prototype.sayName=function(){console.log(this.name);
};
function SubType(name,age){SuperType.call(this,name);this.age=age;//子类型的新属性
}SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;//手动指定构造函数SubType.prototype.sayAge=function(){console.log(this.age);
}
var instance1=new SubType("zs",20);
instance1.colors.push("black");
console.log(instance1.colors);//red,blue,black
instance1.sayName();//"zs"
instance1.sayAge();//20var instance2=new SubType("ls",23);
console.log(instance2.colors);//red,blue
instance2.sayName();//"ls"
instance2.sayAge();//23
- 原型式继承
在没必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,可以采用原型式继承。但是,包含引用类型值的属性值会被实例所共享,就像原型模式一样。
function object(o){function F(){F.prototype=o;return new F();}
}
//相当于创建了o的两个副本
ECMAScript5的Object.create()方法规范化了原型式继承。在传入一个参数的情况下和object()方法一样,两个参数的情况下指定的任何属性都会覆盖原型对象上的同名属性。
var person={name: "Nicolas",friends: ["zs","ls"]
};
//每个属性都是通过自己的描述符定义的
var anotherPerson=Object.create(person,{name: {value: "ljs"}
});
console.log(anotherPerson.name);//"ljs"
- 寄生式继承 不一定要采用object方法,返回新对象的函数都适用这个模式。
function createAnother(o){var clone=object(o);clone.sayHi=function(){//在已有对象的基础上添加新成员console.log("hi");}return clone;
}
- 寄生组合式继承
解决了组合继承方式调用两次父类构造函数的问题。本质上,使用寄生式方法继承父类型的原型,再将结果指定给子类型的原型,相当于一个副本。
function inheritPrototype(subType,superType){var protoType=object(superType.prototype);//创建副本prototype.constructor=subType;//指定构造函数subType.prototype=prototype;//指定原型
}
3. 跨域
同源策略:相同域、相同协议、相同端口
通过XHR实现Ajax通信的一个主要限制,来源于跨源安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。解决方案简称CORS(Cross-Origin Resource Sharing,跨域源资源共享),是W3C的一个工作草案,定义了在必须访问跨域资源时,浏览器与服务器的沟通方式。
基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而确定请求或响应是成功还是失败。
实现方式:
(1) IE-XDR
与XHR类似,不同之处在于以下几点:
Cookie不会随请求发送/随响应返回
只能设置请求头部信息中的Content-Type字段
不能访问响应头部信息
只支持GET和POST请求
注意:
这些变化使得CSRF(Cross-Site Request Forgery,跨站点请求伪造)和XSS(Cross-Site Scripting,跨站点脚本)问题得到了缓解。
作为请求的一部分,Origin头部的值表示请求的来源域,以便远程资源明确的识别XDR请求。
XDR也是先创建实例,再调用open()和send()方法,但open()方法只接受两个参数:请求的类型和URL
为了支持POST请求,XDR对象提供了contentType属性,用来表示发送数据的格式。
xdr.contentType="application/x-www-form-urlencoded";
所有XDR请求都是异步执行的。请求返回后会触发load事件,接收到请求后只能访问响应的原始文本responseText
为了检测错误,可以指定一个onerror事件处理程序
var xdr=new XDomainRequest();
xdr.onload=function () {console.log(xdr.responseText);
}
xdr.onerror=function (){console.log("An error occured");
}
xdr.open("get","http://www.somewhere-else.com/page/");
xdr.send(null);
(2) 其他浏览器-XHR
其他浏览器通过XMLHttpRequest对象实现了对CORS的原生支持。要请求位于另一个域中的资源,使用标准的XHR对象并在open()方法中传入绝对URL即可。本地资源最好使用相对URL。
xhr.open("get","http://www.somewhere-else.com/page/",true);
与IE中XDR对象不同,通过跨域XHR对象可以访问status和statusText属性,而且支持同步请求。但也存在一些限制:
不能使用setRequestHeader()设置自定义头部
不能发送和接收cookie
调用getAllResponseHeaders()方法总会返回空字符串。
(3) Preflighted Requests支持开发人员使用自定义头部。
浏览器:
Origin,Access-Control-Request-Method:请求自身使用的方法,Access-Control-Request-Headers:(可选)自定义的头部,多个头部用逗号分隔。
服务器:
Access-Control-Allow-Origin,Access-Control-Allow-Methods(多个方法用逗号分隔),Access-Control-Allow-Headers(多个头部用逗号分隔),Access-Control-Max-Age:应该将这个Preflight请求缓存多少时间。
(4) 带凭据的请求
默认情况下跨域请求不提供凭据(cookie、HTTP认证及客户端SSL证明等),通过将withCredentials属性设置为true可以指定某个请求应该发送凭据。服务器接收到后会用以下HTTP头部来响应:
Access-Control-Allow-Credentials:true
如果发送的是带凭据的请求但服务器响应没有包含这个头部,那么浏览器就不会把响应交给JavaScript,responseText为空字符串,status为0,调用onerror()处理程序。
(5) 跨浏览器的CORS
检测XHR是否支持CORS的最简单方式就是检测是否存在withCredientials属性,再结合检测XDomainRequest对象是否存在,就可以兼顾所有浏览器了。
总结:
XDR和XHR对象的共同属性/方法:
abort()-停止正在进行的请求
onerror()-替代onreadystatechange检测错误
onload()-替代onreadystatechange检测成功
responseText用于取得响应内容
send()用于发送请求
其他跨域技术:不依赖XHR对象的方式
(1) 图像Ping
一个网页可以从任何网页中加载图像,不必担心跨域与否。通过图像Ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,能知道响应是什么时候收到的。
var img=new Image();
img.onload=img.onerror=function(){console.log("Done");
}
img.src="http://www.example.com/test?name=Nico"
请求从设置src属性那一刻开始。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点,一个是只能发送GET请求,二是无法访问服务器的响应文本。用于单向通信。
(2) JSONP
JSONP是通过动态sript标签来使用的,使用时可以为src属性指定一个跨域URL。JSONP由两部分组成:回调函数和数据。回调函数是当响应到来是应该在页面中调用的函数,名字一般在请求中指定。数据就是传入回调函数中的JSON数据。
function handleResponse(response){console.log("You're at IP "+response.ip+",which id in"+response.city+","+response.region_name);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
通过查询地理定位服务显示IP和位置信息。
JSONP的不足:如果其他域不安全,很可能在响应中包含一些恶意代码。其次,要确定JSONP请求是否失败并不容易,H5<script>标签的onerror事件处理程序还没有得到支持,为此不得不使用计时器查看指定时间内是否接收到了响应,但并非完美的解决方式。
(3) Comet
Ajax是一种页面向服务器请求数据的技术,而Comet则是一种服务器向页面推送数据的技术。
实现方式:长轮询和流。
长轮询:浏览器发送请求,服务器接收到后保持连接打开,直到有数据可以发送,发送完数据后又关闭连接。
与短轮询的区别:都需要浏览器先发起对服务器的连接。但服务器如何发送数据是其中区别,短轮询是服务器立即发送响应,无论数据是否有效,长轮询是等待发送响应。
轮询优势:所有浏览器都支持,使用XHR对象和setTimeout()即可实现。
HTTP流:浏览器向服务器发送一个请求,服务器保持连接打开,周期性地向浏览器发送数据。比如sleep(10)
在Firefox、Safari、Opera和Chrome中,通过侦听readystatechange事件以及检测readyState的值是否为3,就可以通过XHR对象实现HTTP流。readystate值为3则根据received属性值对responseText进行分割以取得最新数据。通过progress回调函数处理传入的新数据。当readyState值为4时,执行finished回调函数,传入响应返回的全部内容。
(4) Web Sockets
浏览器API,目标是在一个单独的持久连接上提供全双工、双向通信。要使用支持这种协议的服务器,才能正常工作。
未加密连接http->ws,加密连接https->wss
好处:能够在客户端和服务器之间发送非常少量的数据而不必担心HTTP那样字节级的开销,由于传递的数据包很小,因此web sockets很适合移动应用。
缺点:对于这种自定义协议而言,制定协议的时间比制定JavaScript API的时间还要长。
使用方式:
var socket=new WebSocket("ws://www.example.com/server.php");//必须是绝对URL
socket.send("Hello World");
对于复杂的数据结构而非文本来说,要先序列化为一个JSON字符串再发送到服务器。
var message={time: new Date(),text: "Hello World",clientId: "asdftrj6fk"
};
socket.send(JSON.stringify(message));
//接收到服务器端发来的数据就会触发message事件
socket.onmessage=function(event){var data=event.data;//处理data字符串
}
为确保通过XHR访问的URL安全,常用做法就是验证发送者是否有权限访问相应的资源。有以下几种方式。
1. 要求以SSL连接来访问可以通过XHR请求的资源。(
SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层: SSL记录协议(SSL Record Protocol):它建立在可靠的传输协议(如TCP)之上,为高层协议提供数据封装、压缩、加密等基本功能的支持。 SSL握手协议(SSL Handshake Protocol):它建立在SSL记录协议之上,用于在实际的数据传输开始前,通讯双方进行身份认证、协商加密算法、交换加密密钥等。)
2. 要求每一次请求附带经过相应算法计算得到的验证码。
注意以下方式对CSRF攻击防范不起作用:
要求发送POST请求而不是GET请求-很容易改变
检查来源URL以确定是否可信-来源记录容易伪造
基于Cookie信息进行验证-也很容易伪造
vue 组件通信 vuex
笔试背包问题 数组去重
最近看的技术博客是哪篇?
总体问题不多 会考察逻辑 最后介绍自己优缺点 也是面试官比较看重的
以及 简历要准备多份
0612vivo提前批一面相关推荐
- 上海师范大学提前批计算机科学与技术,2020年上海师范大学提前批录取分数线公布...
2020年大一新生即将入学,2020年提前批的录取分数线也陆续公布.下面是小编整理的2020年上海师范大学提前批的录取分数线,快来查阅吧. 2020年上海师范大学提前批录取分数线代码专业录取分 01汉 ...
- 浙大计算机专业分数线,被浙江大学提前批的冷门专业录取,后悔没选计算机专业:可惜分数...
朋友的儿子考虑到高考分数不一定进入浙大,就报考了浙江大学提前批海洋科学专业,结果被录取了.现在听说海洋科学就业一般,转专业也只能在提前批里的几个专业选择,感觉"可惜了分数",后悔没 ...
- 2019牛客提前批一血:猝不及防的java实习面经
1. 前言: 牛客网2019提前批直通实习专场 咳咳,说来惭愧,假期是划水过来的,刚好赶上牛客提前批投递.顶着头皮海投了几十家,果然简历没料是很难入大公司法眼的. 在石沉大海几天后的元宵节晚上一个陌生 ...
- Kira同学:斩获百度校招提前批offer备战细节全揭秘
kira同学 西北农林科技大学计算机科学与技术专业本科应届毕业生 2021百度前端实战训练营优秀学员,精品班一等奖项目小组成员 毕业季,是个充满选择和可能性的时节.站在读研.考公.就业.选择未来扎根城 ...
- 2022校招百度提前批校园招聘
2022校招百度提前批校园招聘 文章目录 2022校招百度提前批校园招聘 起止日期:2022年07月05日-2022年08月27日 起止日期:2022年07月05日-2022年08月27日 百度202 ...
- 百度提前批-百度智能小程序(面经详解)
文章目录 百度提前批-百度智能小程序(面经详解) 1.定位 2.z-index .层叠 3.作用域(scope) 4.单例模式 5.原型链 6.继承(借用构造函数,寄生组合继承,缺点是什么) 7.闭包 ...
- 提前批无笔试,3天后截止!!字节跳动智能创作实验室-图像团队2022秋招提前批投递...
关注公众号,获取更多AI领域发展机会 提前批优势:无笔试,不影响秋招,处理速度快 字节跳动多篇论文入选 CVPR 2021,精选干货都在这里了 字节跳动校招内推码[ZEA67VS] 『方法一』投递链接 ...
- 字节跳动AI Lab 秋季提前批招聘
1 公司简介 字节跳动AI Lab,成立于2016年,致力于开发为字节跳动内容平台服务的创新技术,不仅仅是进行理论研究,我们的想法还可以通过实验证明和快速跟踪用于产品部署. 人工智能涉及的研究领域极多 ...
- 大量CV职位!奥比中光2020届校招提前批内推启动!
点击我爱计算机视觉标星,更快获取CVML新技术 内 · 推 奥比中光2020届校园招聘 提前批[内部推荐] !!!正式启动!!! 快人一步锁定offer 海投的迷茫.宣讲会的焦灼.双选会的拥挤 通通与 ...
最新文章
- IntelliJ IDEA 的Project structure说明
- 【廖雪峰Python学习笔记】字符串与编码
- [Cocos2d-x For WP8]ActionManager动作管理
- Struts2的properties配置文件详解
- Spring MVC-10循序渐进之文件下载
- 【laravel】docker 部署laravel 遇到的问题?
- 打造Ubuntu下的SLAMP
- 5月24日起,每晚8点,实时数仓入门训练营见!
- python 跳出for循环_python中如何退出for循环
- CSSyphus:烦躁不安的烦恼设计指南。
- 前端学习(1388):多人管理项目8user登录
- php怎么上传函数,【后端开辟】php上传函数怎样封装
- Android studio 去除软件运行时顶部原有的蓝色/绿色框
- 16.PHP脚本的执行
- 2PC 二阶段提交协议与3PC
- python做考勤表_500行Python代码打造刷脸考勤系统,其实也就那么简单
- 谷歌Chrome浏览器无法打开网页,提示您与此网站之间建立不安全连接【解决】
- 家园2简易地图编辑器
- 经典Java练习题 Mars Rover
- python2/3 opencv的fitline函数
热门文章
- python 计算男女电影标准差 coursera男女电影评分差异分析编程
- 计算机教师试讲结束语,教师招聘面试-试讲经典结尾
- 深圳项目可行性研究报告编写要点
- 黑马CSS笔记(二)盒子模型
- 经验:那些年,我在大学接过的外包项目
- 杜伊斯堡 vs 科隆
- python时间控件readonly属性_13-js处理日历控件(修改readonly属性)
- 电脑主机启动,鼠标、键盘指示灯均有亮,屏幕显示无信号输入
- php 读取优酷视频缩略图,PHP优酷土豆酷6采集入库函数(获取视频缩略图,视频swf地址,视频标题)...
- 依托广泛跨界联动,腾讯游戏认证主播持续发力