深圳中软国际有限公司（套题）
| 选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
|---|---|---|---|---|
| 0 | 0 | 19 | 0 | 比较难 |
问答题
11、display和position都有哪些值？分别列举一下这些值得用途。display常用的值有none、inline、block、inline-block
none:隐藏元素
inline：内联元素，与其他元素在一行；
block：块级元素
inline-block：行内块元素
position属性有四个可选值，分别为static、relative、absolute、fixed。
static：默认值，元素出现在正常的文档流中。
relative： 相对定位，相对自身位置定位，可通过设置left、top、right、bottom的值来设置位置；
absolute ： 绝对定位，相对于最近的除static定位以外的元素定位，若没有，则相对于html定位；
fixed ： 固定定位 相对于浏览器窗口定位，脱离文档流，不会随页面滚动而变化。
12、设计一个布局方案，使得页面在PC端和pad端显示为一行三列，在手机端为一列三行。<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<style type="text/css">
@media (min-width: 720px) {
.container {
display: flex;
}
.box{
flex: 1;
}
}
</style>
13、请解释ajax的工作原理利用JS原生对象XmlHttpRequest，在不刷新页面的情况下，可以向服务器发送请求，请求回来的数据可以是XML或文本，将请求回来的数据通过DOM操作显示在页面上。具体的步骤是这样的
1.创建XHR(XmlHttpRequest的缩写)对象，这里存在兼容性的问题，IE通过ActiveXObject对象创建，其它的通过XmlHttpRequest对象创建。
2.使用open()方法建立连接，有三个参数，第一个参数是请求类型，通过是get或post请求，第二个是请求的地址，第三个是否为异步请求，true表示异步，false表示同步。
3.使用send()发送请求，接一个参数，需要发送的的信息，以URL参数的形式拼接，如果没有为null
4.数据响应，这个阶段涉及到的API主要有responseText，responseXML，status（状态码），对于异步请求还会涉及到readyState和状态改变事件onreadystatechange。但读取状态改变时会触发这个事件。读取状态有五个阶段
0：未初始化，还没有调用open方法
1：启动，调用了open方法，但还没有调用send方法
2：发送，调用了send方法，但还没有响应
3：接收，收到了部分响应的数据
4：完成，收到全部响应的数据
status表示http的状态码，表示读取的信息是否正确，200表示成功，500表示服务器错误，304表示资源没有改变，使用缓存的数据。
14、自定义一个浏览器兼容的事件绑定方法需要注意哪些问题？要注意浏览器的兼容性,IE9以下的使用attachEvent函数绑定，其它使用addEventListener函数绑定。attachEvent函数需要在事件名称前面加上“on”
15、地址栏输入一个地址后，输入回车，描述一下这时开始浏览器做了什么。答：根据域名查找服务器，下载服务器的文档内容，下载完后浏览器开始解释执行这些html代码，渲染页面，并行下载所需的资源，图片、css、js文件等。
16、使用原生JS技术，加载['pic.jpg','pic2.jpg']数组中的所有图片到一个class名为“imgs”的div里面，并分别设置img的宽高等于它本身的宽高var imgs = ['pic.jpg', 'pic2.jpg']
var div = document.querySelector('.imgs')
var len = imgs.length;
for(var i = 0; i < len; i++) {
var img = document.createElement('img');
img.src = imgs[i];
div.appendChild(img);
}
提示：图片不设置宽高，默认就是原图的大小，如果非要设置，可以在img的onload事件去设置。这个知识点在面试官追问时用。
17、使用原生JS技术，将一个类似无限下级的对象（如：省市区）遍历到一个一维数组里面（如：[{....}....]）答：对于这样的数据结构，使用递归算法来处理，方法的参数为父级，如果有下级，调用函数本身，下级对象作为参数传递，直到没有下级为止。
提示：对于层次不确定的数据结构，有要考虑使用递归算法。
18、用vue.js实现一个基本的图片轮播，说出你的设计方案及思路，并且重点说明功能设计时要考虑的因素。答：
我的思路是将所有要显示的图片，放在一个div容器，并且不换行显示，div的容器大小与图片的大小一致，溢出部分隐藏。每次轮播就是移动水平滚动条，移动长度为一个图片的宽度，移动到最后又从0开始。
需要考虑的因为比较多
1.项目中是不是很多地方需要用到轮播，如果是，就需要组件化设计
2.轮播最多支持多少张图片，要有考虑。
3.点击轮播是否需要跳转其它页面
4.左右导航和指示器是否要显示
5.代码设计上要考虑使用数据驱动dom，而不是直接操作dom
提示：轮播是一个比较复杂的功能，在面试中也不能面面俱全，但要把核心的地方说出来。