前端面试(二)

今天又经历了两场面试,先说说感受,比想象中的简单。

第一家公司做了一套题目,面聊基本没问技术,只是展示了一些线上作品,当场给的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布局以后,子元素的floatclearvertical-align属性将失效。它即可以应用于容器中,也可以应用于行内元素。

3、对于响应式布局有没有什么需要注意的地方

4、怎样让元素一个一个的横着排列

         1)使用float浮动

         2)使用绝对定位

5、说说浏览器的兼容性问题

         列举几个例子就ok

6、你知道你们后台用的是什么框架吗?或者说整体用的是什么框架?

        开放式题目,用的什么答什么就OK。

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试