常见前端面试题及答案（下）

转自：http://www.cnblogs.com/syfwhu/p/4434132.html

69.你如何从浏览器的URL中获取查询字符串参数。

以下函数把获取一个key的参数。

 1 function parseQueryString ( name ){
      name = name.replace(/[\[]/,"\\\[");
      var regexS = "[\\?&]"+name+"=([^]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
 
      if(results == null) {
          return "";
      } else {
     return results[1];
     }
 }

70.请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

71.请描述一下JavaScript的继承模式。

关于继承请看文章JavaScript之对象的继承。

72.如何实现下列代码：[1,2,3,4,5].duplicator();//[1,2,3,4,5,1,2,3,4,5]。

73.描述一种JavaScript中实现memoization(避免重复运算)的策略。

74.什么是三元表达式？“三元”表示什么意思？

三元表达式：? :。三元–三个操作对象。

在表达式boolean-exp ? value0 : value1 中，如果“布尔表达式”的结果为true，就计算“value0”，而且这个计算结果也就是操作符最终产生的值。如果“布尔表达式”的结果为false，就计算“value1”，同样，它的结果也就成为了操作符最终产生的值。

75.JavaScript里函数参数arguments是数组吗？

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，通过使用下标就可以访问相应的参数。

arguments虽然有一些数组的性质，但其并非真正的数组，只是一个类数组对象。其并没有数组的很多方法，不能像真正的数组那样调用.jion(),.concat(),.pop()等方法。

76.什么是”use strict”;?使用它的好处和坏处分别是什么？

在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

• 消除代码运行的一些不安全之处，保证代码运行的安全；

• 提高编译器效率，增加运行速度；

• 为未来新版本的Javascript做好铺垫。
  坏处：

同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。

77.解释”chaining”。

jQuery方法链接。直到现在，我们都是一次写一条jQuery语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

78.解释”deferreds”。

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是”延迟”，所以deferred对象的含义就是”延迟”到未来某个点再执行。

79.你知道哪些针对jQuery的优化方法？

• 1.总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。

例如有一段HTML代码：

  




    
 id="content">
      
 method="post"action="#">
          
交通信号灯
          
 id="traffic_light">
              
                   type="radio"class="on"name="light"value="red"/>红色
              
              
                   type="radio"class="off"name="light"value="yellow"/>黄色
             
             
                  type="radio"class="off"name="light"value="green"/>绿色
             
         
          class="button"id="traffic_button"type="submit"value="Go"/>
     
 

比如需要选择红绿单选框，那么可以使用一个tag name来限制(修饰)class，如下所示：var active_light= ( “ i n p u t . o n ” ) ; 当 然 也 可 以 结 合 就 近 的 I D ， 如 下 所 示 ： v a r a c t i v e l i g h t = " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> ( “ i n p u t . o n ” ) ; 当 然 也 可 以 结 合 就 近 的 I D ， 如 下 所 示 ： v a r a c t i v e l i g h t = ( “ i n p u t . o n ” ) ; 当 然 也 可 以 结 合 就 近 的 I D ， 如 下 所 示 ： v a r a c t i v e l i g h t = (“#traffic_light input.on”); 如果采用下面的选择器，那么效率是低效的。var traffic_button= (“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button= " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> (“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button= (“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button= (“#traffic_button”);当然这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。如下所示：var traffic_lights=$(“#traffic_light input”);

• 2.在class前使用tag(标签名)在jQuery中第二快的选择器是tag(标签)选择器(比如：$(“head”))。

跟ID选择器累时，因为它来自原生的getElementsByTagName()方法。继续看刚才那段HTML代码：

在使用tag来修饰class的时候，我们需要注意以下几点：（1）不要使用tag来修饰ID，如下所示：var content= (“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light= " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> (“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light= (“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light= (“#content#traffic_light”);

• 3.将jQuery对象缓存起来把jQuery对象缓存起来就是要告诉我们要养成将jQuery对象缓存进变量的习惯。

下面是一个jQuery新手写的一段代码：

 $("#traffic_light input.on").bind("click",function(){});
 $("#traffic_light input.on").css("border","1px dashed yellow");
 $("#traffic_light input.on").css("background-color","orange");
 $("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。我们应该先将对象缓存进一个变量然后再操作，如下所示：

记住，永远不要让相同的选择器在你的代码里出现多次.注：（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。（2）上面代码可以使用jQuery的链式操作加以改善。如下所示：

 var $active_light = $("#traffic_light input.on");
 
 $active_light.bind("click",function(){})
 .css("border","1px dashed yellow")
 .css("background-color","orange")
 .fadeIn("slow");

• 4.如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。

如下代码所示：

  // 在全局范围定义一个对象(例如:window对象)
  window.$my = {
      head:$("head"),
      trafficLight:$("#trafficLight"),
      trafficButton:$("#trafficButton")
  




    
};
 
  function doSomething(){
      // 现在你可以引用存储的结果并操作它们
     var script=document.createElement("script");
     $my.head.append(script);
 
     // 当你在函数内部操作是,可以继续将查询存入全局对象中去.
     $my.coolResults=$("#some_ul li");
     $my.otherResults=$("#some_table td");
 
     // 将全局函数作为一个普通的jquery对象去使用.
     $my.otherResults.css("border-color","red");
     $my.trafficLight.css("border-color","green");
 }
 // 你也可以在其他函数中使用它.

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：对直接的DOM操作进行限制。

 var top_100_list = [];// 假设这里是100个独一无二的字符串
 var $mylist = $("#mylist");// jQuery选择到
元素
 
 for(var i = 0,l = top_100_list.length;il;i++) {
     $mylist.append("
"
 + top_100_list[i] + "");
 }

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：

 $




    
("#entryform input").bind("focus",function() {
     $(this).addClass("selected");
 }).bind("blur",function(){
     $(this).removeClass("selected");
 });

• 5.冒泡除非在特殊情况下,否则每一个js事件(例如:click,mouseover等.)都会冒泡到父级节点。

当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是,你只需向它们的父节点绑定一次。比如,我们要为一个拥有很多输入框的表单绑定这样的行为:当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示：

 $("#entryform").bind("focus",function(e) {
     var $cell = $(e.target); // e.target捕捉到触发的目标元素
     $cell.addClass("selected");
 }).bind("blur",function(e) {
     var $cell = $(e.target);
     $cell.removeClass("selected");
 });

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色,它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听,那么现在的你肯定知道哪里做错了。

• 6.推迟到$(window).load。

jQuery对于开发者来说有一个很诱人的东西,可以把任何东西挂到 ( d o c u m e n t ) . r e a d y 下 。 尽 管 " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> ( d o c u m e n t ) . r e a d y 下 。 尽 管 ( d o c u m e n t ) . r e a d y 下 。 尽 管 (document).rady确实很有用，它可以在页面渲染时，其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是 ( d o c u m e n t ) . r e a d y 函 数 引 起 的 。 你 可 以 通 过 将 j Q u e r y 函 数 绑 定 到 " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> ( d o c u m e n t ) . r e a d y 函 数 引 起 的 。 你 可 以 通 过 将 j Q u e r y 函 数 绑 定 到 ( d o c u m e n t ) . r e a d y 函 数 引 起 的 。 你 可 以 通 过 将 j Q u e r y 函 数 绑 定 到 (window).load事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。

• 7.压缩JavaScript。

在线压缩地址: http://dean.edwards.name/packer/ 压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。

• 8.尽量使用ID代替Class。

  前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。看下面的一个例子：

  // 创建一个list
  var $myList = $('#myList');
  var myListItems = '
'
;
 
  for(var i = 0; i  1000; i ++) {
      myListItems += '
+
i+'">This is a list item';
      // 这里使用的是class
  }
 
 myListItems += '';
 $myList.html(myListItems);
 // 选择每一个li
 
 




    
for(var i = 0; i1000; i++) {
     var selectedItem = $('.listItem' + i);
 }

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。 在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。接着我们做一个对比，用ID代替class：

• 9.给选择器一个上下文。

jQuery选择器中有一个这样的选择器，它能指定上下文。jQuery(expression,context);通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。普通方式： ( ‘ . m y D i v ′ ) 改 进 方 式 ： " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> ( ‘ . m y D i v ′ ) 改 进 方 式 ： ( ‘ . m y D i v ′ ) 改 进 方 式 ： (‘.myDiv’,$(“#listItem”))。

• 10.慎用.live()方法（应该说尽量不要使用）。

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为新增的DOM元素动态绑定事件。但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。例如有这么一段代码:

  
 
     
this is first p
     add
 

运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(“click”)方式解决此问题，代码如下：

  $(function() {
      $("p").live("click",function() {
          // 改成live方式
          alert($(this).text());
      });
 
      $("button").click(function() {
          $("
this is second p
").appendTo("body");
      });
 })

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

  $