使用vue.js仿一个链家

Posted 2020-09-22

Vue全家桶+localstorage+socket.io简单仿一个链家

在线预览地址
首先上项目和预览地址 https://luxroid.com/lianjia/#/
Github地址 https://github.com/mixihome/lianjia

注意 如果要在本地运行安装完依赖之后如果报错
请手动使用淘宝镜像安装node-sass和sass-loader 确保可以运行
建议使用F12移动端模式预览????

使用到的技能点
Vue.js : 前端页面展示
Vuex : 全局状态通信
axios : 网络请求
Vue-router : 页面的切换
socket.io : 实现聊天功能
h5的localstorage : 实现发布卖房和查看租房功能
淘宝flexible和rem : 实现各种设备上的适配兼容
express(阿里云服务器) : 请求的数据和socket.io服务器
mint-ui : swiper组件

部分界面截图

首页

二手房界面

搜索界面

socket.io实现的聊天界面

功能解析

搜索

使用es6新增的filter方法搜索已经访问到了的数据title,比如万科室,天新区等,并在点击跳转时实时的将该index中的内容存入vuex,并在detail中动态变化

租房&卖房

卖房使用了h5的localstorage进行存储,只存一些简单的数据??,并且可以在首页中的查看租房页中看到该信息

Socket.io

这个项目的socket.io其实去网上查询一些例子,就可以很简单的做出来,主要就是在服务端io.on connection之后,回调函数会有一个socket参数,通过他可以监听各种客户端发送的事件,并进行处理,然后使用this.broadcast.emit可以广播给所有连接的用户(除了发送者)

实现细节

server端

服务端通过require(‘socket.io‘)拿到io在服务器端监听connection,当发生这个事件时,会给一个socket对象.该对象可以监听从客户端发来的时间,或者从服务端广播事件给服务端

client端

客户端可以在按钮或者keyup.enter事件中绑定该事件使用socket.emit可以向服务器发送各种事件,socket.on可以监听从服务器发来的时间

4 : 关于vuex,这个项目用了vuex来管理全局某些组件的状态,并且存储了一些跳转页面时需要用到了数据,比如首页随着scrolltop变化出现的下载栏

总结

Vue这个框架是在太厉害了 通过前端路由 免去了传统前端跳转页面带来的页面的全部刷新 这种体验在pc上也许无关痛痒 但是移动设备上 这就是完全不一样的两种体验
在写这个时候,有些情况要在js代码操作dom,当时我想的vue的虚拟dom操作dom节点有点那啥,后来我发现了vue的ref这个属性?? 也算是边写边学习吧
就比如在聊天界面的时候,有一个需求是当聊天界面的长度超多页面长度的时候 页面会自动往下 就可以使用这个元素在vue的updated中写入
this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;就可以实现这个小细节了
在这个项目里也学到不少关于前端的小技巧,一些细节的处理,锻炼了一些逻辑思维，很多知识点掌握得更加的牢固，对 vue vuex 的理解又更深了一些。

 

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学前端！

很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。

html&CSS

1、谈谈你对web标准的理解

web标准的理解

2、列举html中至少三个实体

&amp、&nbsp 、&lt、&gt、&reg、&copy
详细请看w3schoolHTML实体符号参考手册
w3schoolHTML实体符号参考手册

3、cellpadding与cellspacing有何区别？

cellpadding：代表单元格边框到内容之间的距离（留白）
cellspacing：cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有哪些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器( *)
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
可继承的样式： 
font-size font-family color, UL LI DL DD DT;
不可继承的样式：
border padding margin width height
优先级
优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例
p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p>元素。
p:last-of-type 选择属于其父元素的最后 <p>元素的每个<p>元素。
p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

5、display与visibility有何异同？

display可以有很多值，visibility只有两个常用值：visible、hidden。
当display为none、visibility为hidden时都会隐藏元素。但display会隐藏掉元素空间，visibility会保留元素空间。

6、怎么在网页中实现绝对定位？

absolute
绝对定位与相对定位

7、table-layout、border-collapse有何用途？

①table-layout：设置表格是否自动调整宽高
②border-collapse：表格与单元格及单元格间的边框是否融合在一起。

8、简述盒模型

简述盒模型

9、链接标记target属性的_top、_parent、_blank、main、left、top各有何用处?

链接标记target与Dom，Bom

10、你对浏览器兼容怎么看？通常你都做哪些处理？

浏览器的兼容性

11、get和post的区别？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
①无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）。
②发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

12、xhtml和html有什么区别

①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
②最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

13、行内元素有哪些?块级元素有哪些?空(void)元素有那些？
行内元素和块级元素的区别是什么？行内块元素的兼容性使用？（IE8 以下）

块级元素：div p h1 h2 h3 h4 form ul ol dl dt dd
行内元素: a b br i span input select image strong（强调的语气）
常见空元素：
<br>/<hr>/<img>/<input>/<link>/<meta>
不常见空元素：
<area>/<base>/<col>/<command>/<embed>/<keygen>/<param>/<source>/<track>/<wbr>
行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
兼容性：
display:inline-block;*display:inline;*zoom:1;

14、CSS引入的方式有哪些? link和@import的区别是?

CSS引入的方式包括内联 内嵌 外链 导入
link和@import的区别是 ：
①link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；
④后者优先级更高

15、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?介绍一下你对浏览器内核的理解

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opera(blink)
对内核的理解：
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
①渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
②JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

16、解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
适用于以下情况：
①静态图片，不随用户信息的变化而变化
②小图片，图片容量比较小
③加载量比较大

17、清除浮动的几种方式，各自的优缺点

（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
比较好的是第3种方式，好多网站都这么用。

18、Doctype作用？标准模式与兼容模式各有什么区别?

①<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
②标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
注意点：
HTML5 只需要写<!DOCTYPEHTML>不需要对DTD进行引用，因为HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

19、iframe有哪些缺点？

①iframe会阻塞主页面的Onload事件，搜索引擎的检索程序无法解读这种页面，不利于SEO；
②iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

20、如何实现浏览器内多个标签页之间的通信?

①通过WebSocket、SharedWorker来实现；
②也可以调用localstorge、cookies等本地存储方式。
localstorge另一个浏览上下文（另一个标签页）里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。

21、如何在页面上实现一个圆形的可点击区域？

①map+area或者svg
②border-radius
③纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

22、CSS3有哪些新特性？

① CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）；
② 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）；
③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜
④ 增加了更多的CSS选择器 多背景 rgba
CSS3新增属性

Html5

1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？

html5余html4的异同请看以下的链接
html5与html4的异同
兼容性问题
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

Javascript

1、JS如何使页面跳转?怎么引入一个外部JS文件?

①直接在head标签内写入js代码，如下

<Script Language="JavaScript">js 语句</Script>

②引入写好的js文件，使用语句

<script language="JavaScript" src="test.js"></script>

也是直接放入到head标签里头，也有的是放在</body>前面。

2、输入框的验证用什么事件?

change(fn)

3、undefined与null有何异同？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
它们都表示空，转换为boolean后都为false，但是null代表一个对象变量已经被初始化，但未装入对象；undefined表示未初始化变量

4、===与==有何异同？

相同点：都是判定两个值是否相等
不同点：==不会判断类型，而===会判断类型

5、如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？

全局函数isNaN可以判断一个变量的值是否为数字。
可以使用运算符type、instanceof判断变量值的数据类型。

6、什么是Bom什么是Dom?你如何理解Dom?

链接标记target与Dom，Bom

7、Array的join、push、splice、slice各有何用途，splice与slice有何异同？

join：使用指定间隔符连接所有元素为字符串
push：在尾部添加元素并维护array实例的length
splice与slice都是截取一部分元素。不同的在于：slice返回截取后的新实例，splice在原array实例上操作，更详细的请见下文链接。
JS中数组对象详解

8、如何阻止表单提交？

在onsubmit事件中返回false

9、如何动态操作表格？

可以像普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作。

10、String.match与RegExp.exec有何区别？

match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；
而exec可以利用循环返回全部匹配结果。

11、为验证手机号写一个正则。

function checkSubmitMobil()
 {
 if ($("#phoneNum").val() == "") {
 alert("手机号码不能为空！");
 //$("#moileMsg").html("<font color=‘red‘>手机号码不能为空！</font>"); 
 $("#mobile").focus();
 return false;
   }
if (!$("#phoneNum").val().match(/^(?:13\\d|15\\d|18\\d)\\d{5}(\\d{3}|\\*{3})$/)) 
{
 alert("手机号码格式不正确！");
 //$("#moileMsg").html("<font color=‘red‘>手机号码格式不正确！请重新输入！</font>"); 
$("#phoneNum").focus();
  return false;
  }
    return true;
}

12、正则的i标记与g标记各有何用途？

i：不区分大小写；
g：全局匹配。

13、为String添加trim()方法。

String.prototype.trim = function() {
    return this.replace(/^ +| +$/g,"");
}

14、简述COOKIE。在JS中如何操作Cookie?

简述cookie，在JS中如何操作cookie

15、谈谈javascript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制。

JS数组排序方法sort()的使用

16、谈谈innerHTML outerHTML innerText之间的区别。

①innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法；
②innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；
③outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码；
④innerText代表一个元素节点内由所有子文本节点内容组成的文本；

17、在JavaScript中定时调用函数 foo() 如何写？

setTimeout(
    foo,
    1000    //这里设置延时数
);

18、setTimeout与setInterval有何区别?

①setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
②不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

19、你在js中用过array吗？如果用过，array中添加数据用什么方法？

在尾部添加使用push();
在头部添加使用unshift();
在任意位置添加使用splice(),但要注意把它的删除个数设置为0;
array详细介绍请看下文链接
JS中数组对象详解

20、简述javascript的优缺点。

优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；
缺点：不适合开发大型应用程序；

21、Javascript有哪些内置对象?

只有Math和Global（在浏览器环境中，Global就是Window）

22、列举Javascript的本地对象。

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

23、javascript的typeof返回哪些数据类型

object number function boolean undefind string

24、例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== – ===）

25、IE和DOM事件流的区别

①执行顺序不一样、
②参数不一样
③事件加不加on
④this指向问题

26、事件绑定和普通事件有什么区别

①事件绑定就是针对dom元素的事件，绑定在dom元素上
②普通事件即为非针对dom元素的事件

27、事件委托是什么

利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
例子请看以下链接
JS中的事件委托

28、闭包是什么，有什么特性，对页面有什么影响

什么是闭包
“官方”的解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等语言中都能找到对闭包不同程度的支持。
通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在；
对页面的影响
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。
详细请看以下推荐链接
深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

29、javascript的本地对象，内置对象和宿主对象

①本地对象为array obj regexp等可以new实例化
②内置对象为gload Math 等不可以实例化的
③宿主为浏览器自带的document,window 等

30、编写一个数组去重的方法

思路：
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
代码如下：

Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,‘你好‘,112,112,34,‘你好‘,‘str‘,‘str1‘];
alert(arr.unique3());

31、this对象的理解

①this总是指向函数的直接调用者（而非间接调用者）；
②如果有new关键字，this指向new出来的那个对象；
③在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

32、eval是做什么的？

①它的功能是把对应的字符串解析成JS代码并运行；
②应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
③由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(‘(‘+ str +‘)‘);

33、new操作符具体干了什么呢?

①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
②属性和方法被加入到 this 引用的对象中。
③新创建的对象由 this 所引用，并且最后隐式的返回 this 。

34、call() 和 apply() 的区别和作用？

①apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3])；
②call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3)；

如何获取UA

JS代码

function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }

35、请解释一下 JavaScript 的同源策略

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

36、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

Ajax

1、什么是Ajax？

Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。

2、如何使用Ajax从服务器获取数据？

①创建XMLHttpRequest对象，注意兼容IE6的情况
②使用XMLHttpRequest对象的open方法，其中有三个参数：
a.字符串，代表html的请求:GET,POST。
b.要访问的服务器的URL。
c.Boolean值，true表示异步，flase表示同步，一般情况下是异步，默认为true。
③ajax的回调函数。xhr.readyState==4表示请求已经结束，服务器响应完成。
status表示http请求的状态，200表示正常响应；404表示资源找不到；500表示服务器端错误。
④发送ajax请求。如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息：

xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");

再传递参数：

xhr.send(name=liujianhong&password=123);

3、解释XMLHttpRequest是什么？

XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。

4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。

Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。
一个简单的Ajax操作如下。

var xhr = new XMLHttpRequest();
//在环境中需要做浏览器兼容，这里省略了
xhr.onreadystatechange = function() {
//这里注册当xhr状态发生改变后调用事件
if( xhr.readyState == 4 ) {
//通常在读取状态为4的时候才能获取到部分数据
所以一般状态在4的时候才进行处理
if(status==200) {
            //当正常请求到资源时的处理,
可以调用xhr.responseText或xhr.responseXml获取数据
        }
        else {
        //当请求资源失败时的处理
        }
    }
}
xhr.open( "GET", url);
//设置xhr的请求方式和url,这里使用的是GET方式，
 //如果有参数，则连接在url后面
 /*
  如果是POST请求，还当设置请求的Content-Type
  数据使用send作为参数发送
  */
xhr.send();

5、谈谈你对JSON的理解。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
所以它往往在AJAX中替代XML，交换数据。

6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？

①有。
②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。
③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

7、你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？

没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。

8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？

①遇到过。
②一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。

9、解释jsonp的原理，以及为什么不是真正的ajax

①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。
②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加<script>标签来调用服务器提供的js文件。
③Ajax与JSONP的区别也不在于是否跨域，Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。具体请看一下参考：
【原创】说说json和jsonp,也许你会豁然开朗，含jQuery用例
深入浅出jsonp--解决ajax跨域问题
浏览器的同源策略-MDN

10、ajax 有那些优缺点?如何解决跨域问题?

优点：
①通过异步模式，提升了用户体验.
②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
③Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
④Ajax可以实现动态不刷新（局部刷新）
缺点：
①安全问题 AJAX暴露了与服务器交互的细节。
②对搜索引擎的支持比较弱。
③不容易调试。
跨域问题：
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。

11、JavaScript原型，原型链 ? 有什么特点？

①原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

JQuery

1、你使用过jQuery吗？如果有，你为什么要使用jQuery呢？

①用过。
②如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。
③当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等。

2、Javascript与jQuery有什么区别？

jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。

3、在jQuery中如何注册事件？

使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。

4、如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？

可以使用html()获取html内容。
使用text()获取文本内容。
使用attr()可以获取属性值，使用css()可以获取样式属性值。
通过val()便可以获取input的值
把节点元素名加上<、>作为参数调用jQuery方法便可创建新节点,如：jQuery(“<div>”)。

5、如何向页面插入节点？

调用append方法，将新节点作为参数。

6、ajax、get、post、ajaxSetup、getJSON各有何用途？

①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。
②get：专门用于发送get请求的便捷方法。
③post：专门用于发送post请求的便捷方法。
④ajaxSetup：设置调用ajax方法时的默认值。
⑤getJSON：专门用于向服务器请求json格式数据的便捷方法。

7、如何使用从服务器获取一个复杂数据（对象）？

①通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。
②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象。

8、addClass、css有何用途？

①addClass：为元素设置class属性，如果该元素已经存在class属性，则在其值后添加空格及新的class值。
②css：操作元素的style属性的方法。

9、如何获取一个元素的实际位置？

使用position()或offset()都可以。

10、bind()、unbind()、hover()有何用途？

bind()：注册特定事件。
unbind()：删除特定事件。
hover()：同时注册鼠标移入、移出事件。

11、你知道jQuery插件吗？你了解jQuery执行原理和插件机制吗？你都用过哪些jQuery插件？

①知道jQuery插件。
②其原理是扩展jQuery本身及其核心函数的原型实现。可以调用其extend实现对它的扩展。
③jQuery插件有很多，常见的有：jQueryUI、jQuery-Cookie、jQuery-Timer等。

其它

1、HTTP状态码知道哪些？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

2、你有哪些性能优化的方法

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

3、什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

4、哪些常见操作会造成内存泄漏？

①内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
②垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
③setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
④闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

5、线程与进程的区别

①一个程序至少有一个进程,一个进程至少有一个线程。
②线程的划分尺度小于进程，使得多线程程序的并发性高。
③另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
④线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
⑤从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

6、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示

以下自行发挥

①为什么换工作
②你常用的开发工具是什么，为什么？
③对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
④加班的看法？
⑤有没有女朋友