拼多多面试

来源：互联网发布：java摇奖机转盘编辑：程序博客网时间：2024/04/29 01:32

Q1.实现两列布局

描述：实现这么一个布局，左侧是导航栏，右侧是主区域，导航栏宽度固定为200px，主区域宽度不固定，并且导航栏和主区域中间有20px的间隙。要求，加载时优先加载主区域。
答：问到这个问题，让我想起了圣杯布局和双飞翼布局，这就是一个变体，只不过是把三列改成了两列而已。
上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .container {            padding-left: 220px;            width: 100%;            overflow: hidden;        }        .main {            width: 100%;            height: 300px;            background-color: #ccc;            float: left;        }        .nav {            width: 200px;            height: 300px;            background-color: #eee;            float: left;            margin-left: -100%;            position: relative;            left: -220px;        }    </style></head><body>    <div class="container">        <div class="main"></div>        <div class="nav"></div>    </div></body></html>

note:由于要优先加载主区域，由于页面加载是从上到下的，所以把主区域的div放到前面。上面这个就是模仿了双飞翼布局。

Q2.类型判断

js有哪几种数据类型
js有哪几种数据类型：null、undefined、boolean、string以及number。
怎么判断这几种类型
用typeof进行判断，能判断出几种类型？五种，undefined、boolean、string、number以及object。
怎么区分null和object以及array?

function decideType(obj) {    if(obj === null) {        //为null    }else if (Array.isArray(obj)) {        //数组    }else {        //object类型    }}

note:这里和面试官也说了怎么判断是数组，当时我就是想利用数组的Array.isArray来判断是不是数组，面试官说，可以利用数组的方法来确定，例如push函数，我当时就恍然大悟，哦，对，这样也可以。面试官又说，object也可以利用原型加上这些方法，我。。。。，我还真是太年轻。
数组这个也可以使用构造函数

var arr = [1,2,3];if (arr.constructor === Array) {    alert('array');}//弹出arrayvar myObject = {};if (myObject.constructor === Array) {    alert('array');}//没有弹出array

其实构造函数也是可以修改的，这个问题是不是无休止了。。。。。。

var myObject = {};myObject.constructor = Array;if (myObject.constructor === Array) {    alert('array');}//弹出array

Q3.为DOM添加事件

 var EventUtil = {          addHandler:function (element,type,handler) {               if (element.addEventListener) {                   element.addEventListener(type,handler,false);               }else if (element.atachEvent) {                   element.atachEvent('on'+type,handler);               }else {                   element['on'+type] = handler;               }           } }

Q4.取消冒泡

function cancelBubble(ev) {    if (ev.stopPropagation) {        ev.stopPropagation();    }else {        ev.cancelBubble = true;    }}

Q5.关于addEventListener第三个参数

谈到这个就会想到DOM事件流，它包括三个阶段：事件捕获阶段、处于目标阶段以及事件冒泡阶段。首先发生的是事件捕获，为截获事件提供机会。然后是实际的目标接收到的事件。最后一个是事件冒泡阶段，可以在这个阶段对事件作出响应。
这里写图片描述
而addEventListener第三个参数就是决定是在哪个阶段调用事件处理程序。
如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。

Q6.currentTarget和target的区别

<!DOCTYPE html>  <html>  <head lang="en">      <meta charset="UTF-8">      <title></title>      <style type="text/css" rel="stylesheet">          #fa{              width: 100%;              height: 170px;              padding: 20px 0px;              background-color: cadetblue;          }          #son{              width: 100%;              height: 20px;              padding: 30px 0px;              background-color: black;              color: white;              text-align: center;              cursor: pointer;          }      </style>  </head>  <body>  <div id="fa" onmousedown="getEventTrigger(event)">      <p id="son" onmousedown="getEventTrigger(event)">点我试试</p>  </div>  </body>  <script type="text/javascript">      var fa = document.getElementById('fa');      var son = document.getElementById('son');      function getEventTrigger(event)      {          x=event.currentTarget;          y=event.target;          alert("currentTarget 指向： " + x.id + "， target指向：" + y.id);      }  </script>  </html>

举个例子，当点击段落p的时候，先弹出
currentTarget 指向： son， target指向：son
在弹出：currentTarget 指向： fa， target指向：son

当点击div（fa）的时候，只弹出：
currentTarget 指向： fa， target指向：fa

由此可见，current是被点击的对象，而currentTarget是指在冒泡阶段当前事件正在活动的对象（一般是处理完target事件之后，冒泡到父级元素，处理父级元素定义的事件，就是currentTarget）。

Q7.box-sizing

里面有两个值：border-box，以及content-box两种值。说一下区别
这就得说道CSS的盒子模型
W3C标准中，我们设置的width是指content的width，而IE中，我们设置的width是指border-left+padding-left+content+padding-right+border-right。
而如果给元素设置border-box:border-box;那么在设置width的时候就是相当于设置border-left+padding-left+content+padding-right+border-right的宽度。
如果给元素设置border-box:content-box;那么在设置width的时候就只是设置content的宽度。

Q8.window.onload和document.ready的区别

区别1：执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕之后才能执行。
(document).ready()时dom结构绘制完毕后就执行，不必等到加载完毕。加入用window.onload，页面上的js有个报错或者找不到图片资源，就会一直等着。如果在页面中两个方法都定义了，(document).ready()比document.onload执行的早。
区别2：两个方法重复执行问题
document.onload只能执行一次，如果定义了多个该方法，那么只会执行最后一个。
$(document).ready()可以写多个，执行顺序是按照编写顺序进行执行。
3.区别3：简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写为(function(){});

详细说明：
$(document).ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要标签完成，不用等这个图片加载完成就可以设置图片的宽高属性或者样式等；
window.onload是在整个document文档（包括加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等待这个图标加载完成之后才能设置图片的宽高属性或者样式等。

阅读全文

0 0