BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(7)
如果上述代码十分难懂,下面这个简化版:
function ready(fn){
if(document.addEventListener) { //标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn(); //执行函数
}, false);
}else if(document.attachEvent) { //IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn(); //函数执行
}
});
}
};
12.(设计题)想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)
回答出概念即可,下面是几个要点
1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
2.mousedown事件触发后,开始拖拽
3.mousemove时,需要通过event.clientX和clientY获取拖拽位置,并实时更新位置
4.mouseup时,拖拽结束
5.需要注意浏览器边界的情况
13.
function setcookie(name,value,days){ //给cookie增加一个时间变量
var exp = new Date();
exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
var result = "";
var myCookie = ""+document.cookie+";";
var searchName = "+name+"=";
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if(satrtOfCookie != -1){
startOfcookie += searchName.length;
endOfCookie = myCookie.indexOf(";",startOfCookie);
result = (myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
(function(){
var oTips = document.getElementById('tips');//假设tips的id为tips
var page = {
check: function(){//检查tips的cookie是否存在并且允许显示
var tips = getCookie('tips');
if(!tips || tips == 'show') return true;//tips的cookie不存在
if(tips == "never_show_again") return false;
},
hideTip: function(bNever){
if(bNever) setcookie('tips', 'never_show_again', 365);
oTips.style.display = "none";//隐藏
},
showTip: function(){
oTips.style.display = "inline";//显示,假设tips为行级元素
},
init: function(){
var _this = this;
if(this.check()){
_this.showTip();
setcookie('tips', 'show', 1);
}
oTips.onclick = function(){
_this.hideTip(true);
};
}
};
page.init();
})();
14.说出以下函数的作用是?空白区域应该填写什么?
//define
(function(window){
function fn(str){
this.str=str;
}
fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
});
}
window.fn = fn;
})(window);
//use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();
答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果:
第一个空是:arguments
第二个空是:/\{(\d+)\}/ig
15.用面向对象的Javascript来介绍一下自己。(没答案哦亲,自己试试吧)
答案: 对象或者Json都是不错的选择哦。
16.讲解原生Js实现ajax的原理。
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
XMLHttpRequest这个对象的属性有:
• onreadystatechang 每次状态改变所触发事件的事件处理程序。
• responseText 从服务器进程返回数据的字符串形式。
• responseXML 从服务器进程返回的DOM兼容的文档数据对象。
• status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
• status Text 伴随状态码的字符串信息
• readyState 对象状态值
• 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
• 1 (初始化) 对象已建立,尚未调用send方法
• 2 (发送数据) send方法已调用,但是当前的状态及http头未知
• 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
• 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据






