// 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 if (n.indexOf(array[i]) == -1) n.push(array[i]); } return n; }1、简述以下常见标签的语言以及默认的display值：p,li,ul,form,b,img，这几个display值的区别是什么?
<p> 与 </p> 之间的文本被显示为段落
li定义列表的项目
ul定义无序列表。
<form>定义供用户输入的 HTML 表单
<b> 定义粗体字。
<img> 定义图像。
p，ul,li,form, display:block
img,b, display:inline
2、有哪些方法可隐藏元素?
{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间，无法点击 */
}
3、什么是跨域？都有哪些方式可以进行跨域?
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制
所谓同源是指，域名，协议，端口均相同，
http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
解决办法：
1、JSONP：
使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。
2、代理：
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
或通过passmessage实现跨域
4、写一个布局：（还未答）
5、简述jsonp的原理
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>
也就是这段远程的js代码执行了上面定义的函数，弹出了提示框
3.将前端代码再进行修改，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
var obj = $('<script></script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>
最后jQuery提供了方便使用JSONP的方式，代码如下：
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www.practice-zhao.com/student.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
6、如何设计一个轮播插件(实现原理，思路，需要考虑的点，如何优化等)，请简述思路
7、如何实现一个移动端"tap"事件，请简述思路
其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件
touchstart,touchmove,touchend事件可以类比于mousedown，mouseover
，mouseup的触发。
touchstart ： 当手指触摸到屏幕会触发；
touchmove : 当手指在屏幕上移动时，会触发；
touchend : 当手指离开屏幕时，会触发；
而touchcancel许多人不知道它在什么时候会被触发而忽略它，其实当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗。
二、关于tap的点透处理
在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。
处理方式：
（1）、
github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：
1
2
3
$(function(){
newFastClick(document.body);
})
然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击
实践开发中发现，当元素绑定fastclick后，click响应速度比tap还要快一点点。哈哈
（2）、为元素绑定touchend事件，并在内部加上e.preventDefault();
$demo.on('touchend',function(e){//
改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
$demo.hide()
e.preventDefault();//
阻止“默认行为”
})
手机端事件触发过程
touchstart>touchend>tap +300ms>click
这个是移动端一次点击的流程吗？
为什么zepto中有个延时250呢？
//zepto中的代码
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
}, 250)
这个延迟是singleTap事件的延迟，用来区分single和double tap
如果是单击的话：touchstart>touchend>tap>250ms>singleTap
如果是双击的话：touchstart>touchend>tap>touchstart>touchend>doubleTap
回到你的问题tap事件是怎么模拟的，源码上还是挺清楚的，具体过程如下：
首先tap是在touchend之后时触发的
触发条件一，位移不能大：touchstart和touchend两个位置之间不能有超过横向或者纵向30px的位移
触发条件二，时间不能长：touchstart到touchend之间超过750ms
8、简术前端有几种本地存储方式，简述各自的特点：
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给
服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时
仍然能够把session id传递回服务器。
经常被使用的一种技术叫做URL重写，就是把session id直接附加在URL路径的后面。还有一种技术叫做表单隐藏字段。就是服务器
会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把session id传递回服务器。比如：
<form name="testform" action="/xxx">
<input type="hidden" name="jsessionid" value="ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764">
<input type="text">
</form>
Cookie的优缺点：
优点：极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小。77
通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。