值得看看的前端面试题
1、JS一道面试题求y的值是？ z 的值是？ s的值是？
<script type="text/javascript">
var x = 1;
var y = 0;
var z = 0;
function add(n){n=n+1;}
y = add(x);
function add(n){n=n+3;}
z = add(x);
s=y+z;
</script>
求：
y的值是？
z 的值是？
s的值是？
我相信，肯定有同学会答错，当然，不是说他们不会，而是他们可能太大意了！
我们首先看function add，两个add都没有返回值，而我们知道，没有明确返回值的，全部返回undefined，所以，y和z都会是undefined，那么s自然也就不会是一个数字了，没错，s应该是NaN。
假如我们将题目改一下呢？如下：
<script type="text/javascript">
var x = 1;
var y = 0;
var z = 0;
function add(n){return n=n+1;}
y = add(x);
function add(n){return n=n+3;}
z = add(x);
s=y+z;
</script>
两个function add都有返回值了，那么，y,z,s会是多少呢？
不错，y和z都是4，s是8，为什么y不是2而是4呢？因为在javascript中，直接通过function申明的函数，后面定义的，会影响到之前的引用，如下：
<script type="text/javascript">
function x(){alert(2)};
x();//output 3
function x(){alert(3)};
x();//output 3
</script>
如果是通过var来申明的函数会是什么情况呢？我们看看：
<script type="text/javascript">
var x = function(){alert(0)};
x();//output 0
var x=function(){alert(1)};
x();//output 1
x();//output 1
</script>
通过var申明的函数，后面定义的并不会影响前面的引用。
如果两种模式混合，又会是什么情况呢？
<script type="text/javascript">
function x(){alert(2)};
x();//output 3
var x = function(){alert(0)};
x();//output 0
var x=function(){alert(1)};
x();//output 1
function x(){alert(3)};
x();//output 1
</script>
结果是这样的，你猜到了吗？
通过function定义的函数，后面定义的，照旧影响了前面的引用，但是不能改变通过var申明函数后的引用，反而，通过var申明的函数，改变了后来通过function申明函数之后的引用。
所以，如果：
<script type="text/javascript">
var x=function(){alert(1)};
x();
function x(){alert(3)};
x();
</script>
后面的x()出来的也会是1。
2、前端面试题整理：实现一个对页面某个节点的拖拽
3、如何通过 JS 识别怪异模式和标准模式？两种模式有什么区别？
要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。
<html>
<head>
<title>重庆PHP</title>
</head>
<body>
<h3>重庆PHP，最专业的PHP社区</h3>
</body>
</html>
如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>重庆PHP</title>
</head>
<body>
<h3>重庆PHP，最专业的PHP社区</h3>
</body>
</html>
上面的代码，浏览器会按HTML 4.01的标准进行解析。
标准模式中IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，要想写出跨浏览器CSS，你最好采用标准模式。
到底都有哪些声明呢？哪种声明更好呢？我们建议你使用XHTML 1.0最严格模式，从一开始我们就应该严格的要求自己，具体声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，那么，我们建议你使用XHTML兼容模式，声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
那么如何的识别呢?举一个简单的例子
方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式
方法二：jquery为我们提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)
var compat=window.top.document.compatMode;
var cw=compat=="BackCompat"?
window.top.document.body.clientWidth:
window.top.document.documentElement.clientWidth;
