龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(7)

时间:2014-11-04 11:03来源:网络整理 作者:网络 点击:
分享到:
如果上述代码十分难懂,下面这个简化版: function ready(fn){ if(document.addEventListener) { //标准浏览器 document.addEventListener('DOMContentLoaded', function() { //注销事件

如果上述代码十分难懂,下面这个简化版:

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获取完整的回应数据

精彩图集

赞助商链接