今天又经历了两场面试,先说说感受,比想象中的简单。
第一家公司做了一套题目,面聊基本没问技术,只是展示了一些线上作品,当场给的offer,只是期望薪资略高,hr说需要去申请,如果能申请下来下周三就可以入职啦。第二家公司简单聊了聊简历上的项目,问了一些很基础的问题,不过他们公司使用angular做的,而我只用过vue,虽然CTO说感觉差不多,不过觉得他们应该更希望找到一个有过angular经验的人。
下面来说说关于笔试和面试题目。
第一家公司笔试题如下:
1、js中阻止事件冒泡方式及区别
方法1: 使用event.stopPropagation( )阻止事件冒泡。(对于IE浏览器,使用event.cancelBubble = true)
方法2: 使用 event.target判断当前点击的元素是否为this,通过this匹配只触发所点击元素。
方法3: 使用 event.preventDefault()取消默认事件
2、解释说明jsonp的工作原理
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服
务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
3、一个URL,用js获取参数的值,写出实例
function getParse(){
var url = window.location.href();
var str = url.split("?")[1]; //找到一个数组,通过?分割,取?后面的参数
var items = str.split("&");//通过&分割成数组
var arr,name,value;
for(var i=0;i<items.length,i++){
arr = items[i].split("=");
name = arr[0];
value = arr[1];
this[name] = value;
}
}
4、Call() 和 Play() 的区别
相同点:两个方法产生的作用是完全一样的,都用来改变当前函数调用的对象。
不同点:调用的参数不同 ,apply最多只能有两个参数——this对象和一个数组,call可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。
总结: foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
5、JQuery插件的写法,写一个验证表单输入合法性的插件,要求输入以英文单词开头,数字结尾(要求正则进行匹配)
(function($){
var reg = /^[a-zA-Z].*\d$/;
var test = "a@JDSH1";
reg.test(str);
})(jQuery)
6、var test =[["北京","上海","深圳"],["南京","无锡","苏州"],["杭州","金华","上海"]],把该函数组去重
function cutname(){
var temp = [];
for(vari=0;i<test.length:i++){
var items[] = test[i].split(",");
for(var j=0;j<items.length,j++){
if(temp.indexOf(items[j]==-1)){
temp.push(items[i]);
}
}
}
return temp;
}
第二家公司面试问题:
1、display:none与visibility:hidden的区别
display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;
visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见;
display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;
visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显示;
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容
2、display的参数block、inline、inline-block、Flexible Box的区别
1)display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
2)display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的 margin-left, margin-right 会产生边距效果;但竖直方向的 margin-top, margin-bottom 不会产生边距效果。padding 属性会产生边距效果。
3)display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
4)Flexible Box
意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。它即可以应用于容器中,也可以应用于行内元素。
3、对于响应式布局有没有什么需要注意的地方
4、怎样让元素一个一个的横着排列
1)使用float浮动
2)使用绝对定位
5、说说浏览器的兼容性问题
列举几个例子就ok
6、你知道你们后台用的是什么框架吗?或者说整体用的是什么框架?
开放式题目,用的什么答什么就OK。