多益前端笔试题_多益社招前端题目

1.svg画四边形，四个点的坐标分别是（220，100）（300，210）（170，250）（123，234）

<svg height="300">
    <polygon points="220,100 300,210 170,250 123,234" style="fill:blue;stroke:black;stroke-width:1;">
</svg>
1
2
3

2.写出promise构造函数

ES6新特性六：promise对象实例详解
js中Promise的使用例子详细介绍

3.如何让动态插入的div响应绑定事件

<div id="testdiv">
  <ul></ul>
</div>
//jquery 1.7版以后使用on动态绑定事件
$("#testdiv ul").on("click","div", function() {
     //do something here
 });
1
2
3
4
5
6
7

4.如何阻止冒泡事件和默认事件
（1）阻止冒泡事件

function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
}; 
1
2
3
4
5
6
7

（2）阻止默认事件

function stopDefault(e){  
  if(e && e.preventDefault) {  
    e.preventDefault();  
  } else {  
    window.event.returnValue = false;  
  }  
  return false;  
}; 
1
2
3
4
5
6
7
8

JavaScript停止冒泡和阻止浏览器默认行为

5.翻译：Using store state in a component simply includes returning the state within a computed property , because the store state is reactive . Triggering changes simply means committing mutations in component methods .

在组件中使用存储状态简单地包括在计算属性中返回状态，因为存储状态是被动的。触发的变化意味着在组件的方法进行突变。
1

6.实现ajax的过程和代码
（1）创建XMLHttpRequest对象；
（2）注册回调函数，在XMLHttpRequest中设置要发送的请求，利用的是open（first,second,third）方法

• @param first：提交的方式 get或者是post
• @param second：该次请求的路径url，如果是get，则需要在路径后加上传递的相应参数parama，该url为servlet对应的url
• @param third：提交的模式是同步模式还是异步模式 true代表异步模式

（3）发送请求给服务器，利用的是xmlHttp.send(null) ，加上null代表火狐和ie都支持
（4）利用xmlHttp的onreadystatechange的事件来监视xmlHttp.readyState的状态，每次改变时都调用函数(回调函数)
（5）在回调函数中处理返回值 利用dom模型写到页面的指定位置 实现局部刷新

var XHR=null;
var XHRcreate=function() {
    if (window.XMLHttpRequest) {
        //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
        XHR = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器的BUG进行修正
        if (XHR.overrideMimeType) {
            XHR.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        //针对IE6，IE5.5，IE5
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
                XHR = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            }
        }
    }
}
XHRcreate();
XHR.onreadystatechange = callback;
//XHR.open("GET","login_verify.jsp?name="+ userName,true);
//XHR.send(null);
XHR.open("POST","AJAXXMLServer",true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
XHR.send("name=" + userName);
function callback() {
    //判断对象的状态是交互完成
    if (XHR.readyState == 4) {
        //判断http的交互是否成功
        if (XHR.status == 200) {
            var responseText = XHR.responseText;
            //通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)
            var divNode = document.getElementById("result");
            divNode.innerHTML = responseText;
        } else {
            alert("error！");
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

7.new操作符做了什么？
（1）创建了一个空对象

var obj = new object();
1

（2）设置原型链

obj._proto_ = fn.prototype;
1

（3）让fn的this指向obj，并执行fn的函数体

var result = fn.call(obj);
1

（4）判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
} 
1
2
3
4
5

8.写出3种异步加载方案

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。异步加载主要有以下三种方式：
（1）async：

• 定义：async 属性规定一旦脚本可用，则会异步执行。
• 用法：<script type="text/javascript" src="async.js" async="async"></script>
• 注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
• 注释：有多种执行外部脚本的方法：
  
  • 如果 async=”async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）；
  • 如果不使用 async 且 defer=”defer”：脚本将在页面完成解析时执行；
  • 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本 。

（2）defer：

• 只支持IE
• defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
• 如果您的脚本不会改变文档的内容，可将 defer 属性加入到

<script type="text/javascript" defer="defer"> 
    alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 
1
2
3

（3）创建script，插入到DOM中，加载完毕后callBack

function loadScript(url, callback){ 
    var script = document.createElement_x("script") 
    script.type = "text/javascript"; 
    if (script.readyState){ //IE 
        script.onreadystatechange = function(){ 
            if (script.readyState == "loaded" || script.readyState == "complete"){ 
                script.onreadystatechange = null; 
                callback(); 
            } 
        }; 
    } else { //Others: Firefox, Safari, Chrome, and Opera 
        script.onload = function(){ 
            callback(); 
        }; 
    } 
    script.src = url; 
    document.body.appendChild(script); 
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18