2017.02.20 第一次前端面试

今天是第一次参加了前端面试，是海尔下边的做智能冰箱的云厨科技，公司不大，在酒仙桥，以前竟然在他们的写字楼吃过一回饭，好巧。

第一次参加，还是很紧张。约我过来的技术总监到青岛出差了，是一男一女两个年轻人来面试。我发挥的很烂，一是因为过年前后这一段都在总结知识，把跨域的知识总结了一下，没有实际做一些项目，所以好多东西都忘记了，二是就是实力确实差，可能有些东西在学习的时候就不扎实，时间长一点就忘了，所以好多面试时的问题都好像了解过，但是详细说又说不清楚。

结束后，说实话还是挺受打击的，原因不是因为表现不好，而是觉得自己这一年多以来都在干什么。其实挺累，白天上班，有空偷着学，晚上下班自学，这期间又买房又减肥。挺累的，但是感觉战线拉的好长，又很累，进度很慢。特别着急，特别急躁。今天这样的表现让自己深深的怀疑自己，是不是智商和记忆力不够用，感觉学的东西总是会忘，也会质疑自己还是不够努力。最关键的是又开始犹豫是不是还要继续转行，还是赶紧离开现在的这个公司，找一个还可以的新的公司，继续做结构，重新开始，放弃转行。可是这样又不甘心，很不甘心。

现在来看，前端的入行的门槛还是比当初自己预想的要高。

干结束面试又收到了一个中关村的公司的面试，还是要参加，厚着脸皮去吧，没什么大不了的。按照原来自己的目标，再坚持半年，如果连门槛都进不去，就放弃。

整理一下今天面试时遇到的问题：

1、CSS选择器的优先级（回答时候基本说出来了，但是说的乱七八糟没有条理）

选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先,

如果一个选择器规则有多个相同类型选择器，则+1。如果是HTML内样式，那么特殊性最优先，a=1。id选择器的特殊性是b，类选择器、伪类选择器、属性选择器为c，标签选择器、伪元素选择器为d。如果两个规则的特殊性相同，那么后定义的会覆盖先定义的。!important，使用此标记的CSS属性总是最优先的。

2、rem与em区别（这个答出来了）

em 的计算是基于父级元素的，rem始终是基于根元素（html） 的。

3、怎么进行响应式设计（第一和第二条这么重要的竟然忘了）

（1）设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

（2）通过媒体查询来设置样式 Media Queries

（3）宽度需要使用百分比，不用px

（4）弹性图片max-width:100%

（5）字体大小使用rem

4、什么是雪碧图，怎么用（以前只用过smartsprite，结果就答成了smartsprite的用法）

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，该图片使用CSS background和background-position属性渲染。
优点：减少加载网页图片时对服务器的请求次数，提高页面的加载速度。
缺点：耗费内存，影响浏览器的缩放功能，拼图维护比较麻烦，使CSS的编写变得困难

过年放假前重新复习和总结了smartsprites的用法，结果又忘了，弄混了，讲了些smartsprite怎么用，其实smartsprite是 基于 java、利用CSS注释生成雪碧图和相应的css代码，是生成雪碧图的工具。

5、与服务器交互的方法（答出了基本的四种）

Http与服务器交互的不同方法(1)GET(2 POST(3)PUT(4)DELETE(5)HEAD：主机端响应Client端的一些数据文件头。(6)OPTIONS：主机端响应Client端的一些允许的功能与方法。(7)TRACE(8)CONNECT。

最基本的方法是GET，POST，PUT，DELETE。

6、post与get的区别（不同点基本上都点到了，但是也是说的比较混乱)

相同点： GET和POST都是只连接一次服务器

不同点：

（1）GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，POST把提交的数据则放置在是HTTP包的包体中(在HTML HEADER内提交)。

（2）GET方式提交的数据最多只能是2048字节，理论上POST没有限制，可传较大量的数据

（3）GET是从服务器上获取数据，post是向服务器传送数据，实质上，GET和POST只是发送机制不同，并不是一个取一个发

（4）POST的安全性要比GET的安全性高。比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为①登录页面有可能被浏览器缓存，②其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了。

7、ajax传输数据步骤（做例子的时候对步骤就有点迷糊，这次就没有答对）

（1）创建 XMLHTTPRequest对象

var request=new XMLHttpRequest();//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

（2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息，创建HTTP请求可以使用XMLHttpRequest对象的open()方法。

XMLHttpRequest.open(method,URL,flag,name,password)

• method：该参数用于指定HTTP的请求方法，常用的方法为get和post。
• URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
• flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式，默认为true。
• name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
• password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。

（3）设置响应HTTP请求状态变化的函数（onreadystatechange）

创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历5种状态，只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。

readyState=4知识表示异步调用过程完成，并不表示调用成功，status为200才表示调用成功

readyState的各个状态：

①未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。

②初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。

③发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。

④接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。

⑤完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

XMLHttpReuqes.status的各个状态：
①200：找到了请求的文件。
②404：找不到请求的文件。
③500：服务器出错。

XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象状态改变时（也就是readyState属性值改变时）激发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。

 request.onreadystatechange=function(){//根据request.readyState状态（服务器给XMLHttpRequest对象送回响应）触发处理函数    if(request.readyState==4&&request.status==200){        var json=JSON.parse(request.responseText);//服务器返回的值是存在responseText对象里面的,使用JSON.parse()来将一个符合JSON语法的字符串解析成一个对应类型的值或对象        alert(json.message)        }    };

（4）发送HTTP请求
发送HTTP请求可以使用XMLHttpRequest对象的send()方法：

XMLHttpRequest.send(data)

其中data是个可选参数，如果是使用“GET”，请求的数据不需要参数，则send()里面的值为null。如果是POST,则需要传具体的参数比，data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：

name=myName&value=myValue

只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。

（5）局部更新
在通过Ajax的异步调用获得服务器端数据之后，可以使用JavaScript或DOM来将网页中的数据进行局部更新。常用的局部更新的方式有以下3种：

①表单对象的数据更新：通常只要更改表单对象的value属性值：

FormObject.value = "新数值"

①节点内容的更新：

button.childNodes[0].nodeValue="新数值";

（6）完整代码

<script>    var button=document.getElementById("button");    button.onclick=function(){        var request=new XMLHttpRequest();//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。        if(request){            request.open("get","data2/data.json",true);//创建一个新的HTTP请求            request.onreadystatechange=function(){//根据request.readyState状态（服务器给XMLHttpRequest对象送回响应）触发处理函数                if(request.readyState==4&&request.status==200){                    var json=JSON.parse(request.responseText);//服务器返回的值是存在responseText对象里面的,使用JSON.parse()来将一个符合JSON语法的字符串解析成一个对应类型的值或对象                    button.childNodes[0].nodeValue=json.message;                }            };            request.send(null)        }    }</script>

8、什么是jsp（我还以为是后端的脚本的语言呢）

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。

9、nginx的反向代理是什么意思（正好最近在看这个）

所谓反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

10、git的常用命令（我回答说我都用webstorm可视化界面）

整理的git的知识点还没有整理完，也没有完全弄明白，弄明白再说。

11、使用postman怎么处理cookie（完全不知道）

需要处理cookies是为了应对只有登录之后才能测试接口的情况。

①要安装应用商店中“Postman Interceptor”；

②重启postman；

③打开拦截器；

④在Headers中增加Cookie及相应的值，在header中添加key-value，key固定为Cookie，value是cookie具体的k=v，例如

需要注意的是，发送带cookie的时候必须得开着chrome浏览器。

12、jQuery中ready与load事件的区别（以前学习过，当时有点懵，不确定有没有说反）

ready事件：

ready事件在DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没有加载出来，JS代码一样可以执行

load事件：

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一页网页有大量图片的话，则就出现网页文档已经呈现出来但网页数据(脚本初始化)还没加载完毕，导致load事件不能够即时被触发.

DOM文档加载步骤：

1）解析HTML结构；

2）加载外部脚本和样式文件；

3）解析并执行脚本代码；

4）构造HTML DOM模型 ；//ready

5）加载图片等外部文件；

6）页面加载完毕。//load

13、on与bind的区别（我只回答可以用on代替其他bind等等）

http://blog.csdn.net/panfang/article/details/21705681

①bind()

bind(type,[data],fn)

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如”click”或”submit”，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

.bind()是最直接的绑定方法 ，会绑定事件类型和处理函数到DOM element上, 这个方法是存在最久的，而且也很好的解决了浏览器在事件处理中的兼容问题。但是这个方法有一些performance方面的问题。

它会绑定事件到所有的选出来的元素上，不会绑定到在它执行完后动态添加的那些元素上，当元素很多时，会出现效率问题，当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

简单、粗暴、直接

②live()

.live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上，即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。

从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。

③delegate()

.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

④on()

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。

其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的

on多一个[selector] 可以过滤指定元素;

⑤结论
- 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
- 不要再用.live()了，它已经不再被推荐了，而且还有许多问题
- .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
- 我们可以用.on()来代替上述的3种方法

jQuery无法为动态添加的元素绑定事件，解决方法：使用on方法

①on用来bind时，与bind的使用方法相同

②on用来为动态添加的元素绑定事件时：$(“a”).on(“click”,”#id”,function(){})，第一个参数是绑定事件类型，第二个参数是要绑定的动态添加的元素，第三个是执行的函数

14、最后是一道编程题（一阵子不用jquery，又忘了好多，翻着书才能写出来，面试当下肯定不行了）

实现上面这个过程

<body><ul id="brand">    <li>        <label><input type="checkbox" name="brand" value="海尔1"><span>海尔1</span></label>    </li>    <li>        <label><input type="checkbox" name="brand" value="海尔2"><span>海尔2</span></label>    </li>    <li>        <label><input type="checkbox" name="brand" value="海尔3"><span>海尔3</span></label>    </li>    <li>        <label><input type="checkbox" name="brand" value="海尔4"><span>海尔4</span></label>    </li>    <li>        <label><input type="checkbox" name="brand" value="海尔5"><span>海尔5</span></label>    </li></ul><ul id="brand2"></ul><button id="button">33</button><script>    $("#button").click(function(){        var $option=$("#brand").find("input:checked");        for(var i=0;i<$option.length;i++){            var x=$("#brand2").find("li").text().indexOf($option[i].value);            if(x===-1){                $("<li></li>").text($option[i].value).appendTo("#brand2")            }        }    })</script>

主要的点就是：

①判断checkbox是否被选中，用了”input:checked”这个选择器；

②将选中的input的value添加到右侧的div中，用循环创建li,然后用的是appendTo

③多次添加时已有的不能重复，用的indexOf检查是否已有