淘宝网前端开发面试题--JS 面试题

Posted 2020-07-23

转载请注明文章来源http://www.cnblogs.com/muqiangwei/p/5570470.html

所有答案仅供参考，不负责答案对错（^_^）

1.js 是什么，js 和 html 的开发如何结合？

js是javascript的缩写，是一种基于对象的、事件驱动的脚本语言。它一共由三个部分组成：分别是DOM，BOM，ECMAscript。
HTML 是超文本标记语言。HTML里的每一个标签就是JS里面的DOM节点。JS操作DOM节点就是在操作HTML的标签。

2.怎样添加、删除、复制、创建和查找节点？

添加节点：appendChild()

删除节点：removeChild()

复制节点：cloneNode()

创建元素：createElemen()

查找节点：getElementById()、getElementsByTagName()、getElementsByName()

3.怎样使用事件？IE 和 DOM 事件模型之间存在哪些主要差别？

怎样使用事件：

1).直接在DOM元素上绑定事件处理器

2).FF等浏览器遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数

3).IE自己的事件模型，但主要是通过attachEvent和detachEvent两个函数来实现的。

主要差别：

DOM事件模型

使用addEventListener和removeEventListener两个函数：

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置(不管是否显示调用)，都永远是event对象的引用。

至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。

IE事件模型

IE自己的事件模型跟W3C的类似，但主要是通过attachEvent和detachEvent两个函数来实现的：

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。

至于它的缺点，首先IE浏览器本身只支持Bubbling不支持Capturing；而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。

最后推荐两个必须知道的IE和W3C标准的区别用法—

1)、当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。

2)、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。

4.面向对象编程:b 怎么继承 a？

function A{

  this.say=function{alert("javascript");}

}

function B{}

B.prototype=new A();

Var C= new B();

C.say();

5.看看下面 alert 的结果是什么？

view sourceprint?1.function b(x, y, a) {

.arguments[2] = 10;

.alert(a);

}

b(1, 2, 3);//输出10

 

如果凼数体改成下面，结果又会是什么？

a = 10;

alert(arguments[2] );//输出10

 

6. 请编写一个 JavaScript 凼数 parseQueryString，它的用途是把 URL 参数解析为一个对象

var obj = parseQueryString(url);

alert(obj.key0) // 输出 0

 

 1  function parseQueryString(url) {
 2      var pos;
 3      var obj = {};
 4      if (pos = url.indexOf("?") != -1) {
 5          var urlstring = url.substring(pos + 1, url.lenght - 1);
 6          var urlArr = urlstring.split("&");
 7          var keyValue = [];
 8          for (var i = 0; i < urlArr.lenght; i++) {
 9              keyValue = urlArr[i].split("=");
10              obj[keyValue[0]] = keyValue[1];
11          }
12      }
13      return obj;
14  }
15  var objUrl = parseQueryString(url);

 

7.ajax 是什么?   ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?

AJAX 指异步JavaScript及XML（Asynchronous JavaScript And XML），是一种无须刷新整个页面就能为页面中的某一部分加载数据的技术。

交互模式：交互模型就是Ajax在浏览器端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西传送给服务器，同时把结果准备好，展现给user的技术模式

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本不停留并处理可能的回复

解决跨域问题：

a.Web服务器上的代理文件

b.利用JSONP：在页面中添加一个<script>元素，由该元素来从其他服务器加载JSON数据，这种方式之所以有效是因为<script>元素的脚本没有受到限制(目前我只接触使用到这一种)

c.跨来源资源共享

8.什么是闭包？下面这个 ul，如何点击每一列的时候 alert 其 index?

<ul id=”test”>

<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li> </ul>

 1 function a() {
 2      var ul = document.getElementById("test");
 3      var li = ul.getElementsByTagName("li");
 4      for (var i = 0; i < li.length; i++) {
 5          (function (_i) {
 6              li[_i].onclick = function () {
 7                  alert(_i);
 8              }
 9          })(i);
10      }
11  }

9.说说 YSlow

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。

微软的IE系列浏览器不能使用YSlow。YSlow只能使用在FireFox浏览器上。如果要想使用YSlow，那么你必须先安装FireFox并且安装FireFox上的Firebug插件。

推荐博客：http://lusongsong.com/reed/362.html