• 值得看看的前端面试题


    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;

  • 相关阅读:
    javascript 中 "undefined" 与 "is not defined" 分析
    css常用总结
    关于reset.css的疑问:为什么一定要重置浏览器样式?
    一些关于Viewport与device-width的东西~
    JS获取IMG图片高宽
    一个input标签搞定含内外描边及阴影的按钮~
    javascript 取整,取余数
    我刚知道的WAP app中meta的属性
    使用 jquery 获取当前时间的方法
    当前头像跟随着当前内容移动...(修改版)
  • 原文地址:https://www.cnblogs.com/jj-z/p/8572597.html
Copyright © 2020-2023  润新知