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="https://www.jb51.net/article/{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获取完整的回应数据
下面简单封装一个函数：（略长，点击打开）