614 条评论分享收藏感谢收起赞同 5 条评论分享收藏感谢收起&>&BAT 网易 搜狐前端开发面试集锦
BAT 网易 搜狐前端开发面试集锦
上传大小：728KB
最新 BAT 网易 搜狐前端开发面试集锦 最新 BAT 网易 搜狐前端开发面试集锦
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
热门资源标签
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
BAT 网易 搜狐前端开发面试集锦
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
huoquanhouquan
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
BAT 网易 搜狐前端开发面试集锦作为一名自学三年的前端开发，我有话要说【web前端开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：50,535贴子：
作为一名自学三年的前端开发，我有话要说收藏
现在在北京一家创业公司工作，待遇还可以，给想接触已经接触前端的同学们一点建议吧先提出几个问题，会的正常，不会的赶紧去看。手写数组去重手写数组倒序各种场景下的this指针问题冒泡，选择，插入排序用js怎么写，时间复杂度多少空间复杂度多少http和https有什么区别 端口号多少 三次握手过程四次挥手过程域名解析过程三列布局中间固定左右自适应的三种写法变量提升问题那些数组方法会生成一个新数组，那些不会生成新数组上面那些问题回答不上来说明你不仅前端不行，上大学也没好好学习，赶紧滚去学习吧下面这些问题是针对一般学习前端两个月都应该会的问题，如果已经学习很久了这些问题还是有盲区的化说明前端不适合你，或者你不适合前端怎样理解语义化怎样理解表现与样式分离什么是混杂模式严格模式，怎样触发常见的mate 标签 什么是文本流 文档流 dom树什么是行元素 什么是块元素 通过那些属性可以让行元素转换成块元素可以设置宽高的行元素叫什么css常见几种选择器选择器的权重值分别多少js中有几种变量类型 哪些放在堆 哪些放在栈变量类型隐形转换问题如何声明函数下面这些问题是一个前端开发应该会的，如果不会就别去找工作让面试官鄙视你闭包是什么，怎么形成这种结构 有什么用处何危害 有没有实际的案例settimeout在不同的情况下的执行顺序settimeout中的this指针指向 手写继承实现手写深浅数组克隆手写一个方法取出url后面的参数 几种跨域的方法手写ajax函数兼容ie和标准浏览器浏览器状态码有哪些下面这些问题是最近比较常问的，回答不上来一定会pass什么是宏任务什么是微任务promise的运行机制，几种状态 介绍缓存机制cookie session localstorage区别mvc mvvm区别 angular vue react区别 angular双向数据绑定原理vue双向数据绑定原理 什么是虚拟dom 怎么实现 vue组件传值的五种方法vuex是什么输入一个url到页面显示都会发什么性能优化的点如何实现节省流量 前端安全攻击有几种 如何避免 dom树的节点遍历先这些吧后续再补，虽然现在出现了很多简化dom操作的框架，这些框架可以让面试者很轻松的隐藏掉自己的js基础方面的不足 但是js基础一直是重中之重，一些很复杂的问题都是从js基础进行分析解决的，不要觉得学了几个框架，抄了几个demo就可以自信满满的去找工作了，面试官更看重的是学习能力和基础。
言辞有些犀利，但是话糙理不糙，许多年以后你会感谢那些狠狠骂过你的人。
厉害?还好多不会
厉害，虽然我一个也看不懂
砍掉了一半人
厉害，我大部分不会
我能答出来百分之七十，大概什么水平，小姐姐
小姐姐好厉害
从大学就开始了吗？？
现在在做客服，纠结要不要转前端。之前自学过
都会能拿8k吗
前两天面试碰到的直接让短时间内开发一个产品雏形。。现在技术差太多了，理论知识匮乏，实战更不行。
看来我要学的还很多，我能搭上一半就觉得是运气，下午去面试，其实我一点都不慌??
谢谢楼主的建议
大神大神，膜拜
码，还在自学中
谢谢分享， 另外问一下，除了vue我都会，下星期去找工作，能拿多少
这些问题两年前你问我大部分都能答上来(vue react之类的就算了)，现在嘛，忘了不少了，至于IE这种东西。。。我做过的东西里面最低兼容11。。。回头要是想换工作了再去背背这些题去
！！！！！！
自学去哪找视频看小姐姐
好厉害的小姐姐，收下我的膝盖
感觉还是去选择有人带带会比较好，一个人学好难坚持的，
说的很好，只是不适合小白你说的这些东西都是8K以上的级别吧，但是JS基础的确非常非常非常重要
你才是大神我不是，我有闲心和你扯皮，说明我很闲，没事做……你说的那些我大概也就懂50%都不到吧，如果别人让你开发android你会不会，毕竟这也是前端的事儿
我也差不多三年也是北京自一家创业公司
大部分都是bat校招的基础问题
收藏了，，准备找工作，再看看
我也好多不会，但是工作没问题咯不会就查呗，那么多方法鬼记得住
楼主能帮我看下我的url图片这么不显示
背景图片不显示要不就是资源没引进来，要不就是盒子没宽高，自己拍查下
登录百度帐号很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。
而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。
附上第二篇：
前面几题是会很基础，越下越有深度。
& &初级Javascript：
1.JavaScript是一门什么样的语言，它有哪些特点？
没有标准答案。
2.JavaScript的数据类型都有什么？
基本数据类型：String,Boolean,Number,Undefined,&Null
引用数据类型：Object(Array,Date,RegExp,Function)
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有&数组性质&，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
if(typeof Array.isArray==="undefined")
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
3.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
document.getElementById(&ID&).value
4.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
var domList = document.getElementsByTagName(&input&)
var checkBoxList = [];
var len = domList.　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == &checkbox&) {
　　checkBoxList.push(domList[len]);
5.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
var dom = document.getElementById(&ID&);
dom.innerHTML = &xxxx&;
dom.style.color = &#000&;
6.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
&直接在DOM里绑定事件：&div&onclick=&test()&&&/div&
&在JS里通过onclick绑定：xxx.onclick&=&test&
&通过事件添加进行绑定：addEventListener(xxx,&&click&,&test)&
那么问题来了，Javascript的事件流模型都有什么？
&事件冒泡&：事件开始由最具体的元素接受，然后逐级向上传播
&事件捕捉&：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
&DOM事件流&：三个阶段：事件捕捉，目标阶段，事件冒泡
7.什么是Ajax和JSON，它们的优缺点。
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
避免用户不断刷新或者跳转页面，提高用户体验
对搜索引擎不友好（
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
8.看下列代码输出为何？解释原因。
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是&undefined&，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
9.看下列代码,输出什么？解释原因。
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回&object&。
10.看下列代码,输出什么？解释原因。
undefined == // true
NaN == NaN;
[] == // true
[] == ![];
undefined与null相等，但不恒等（===）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用&&===&&。&===&会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的类型为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111，foo的类型为Number。
var foo = "11"+2+"1";
//体会加一个字符串'1' 和 减去一个字符串'1'的不同
console.log(foo);
console.log(typeof foo);
执行完后foo的值为1121(此处是字符串拼接)，foo的类型为String。
11.看代码给答案。
var a = new Object();
a.value = 1;
b.value = 2;
alert(a.value);
答案：2（考察引用数据类型细节）
12.已知数组var&stringArray&=&[&This&,&&is&,&&Baidu&,&&Campus&]，Alert出&This&is&Baidu&Campus&。
答案：alert(stringArray.join(" "))
那么问题来了，已知有字符串foo="get-element-by-id",写一个function将其转化成驼峰表示法"getElementById"。
function combo(msg){
var arr = msg.split("-");
var len = arr.
//将arr.length存储在一个局部变量可以提高for循环效率
for(var i=1;i&i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
msg=arr.join("");
(考察基础API)
13.var&numberArray&=&[3,6,2,4,1,5]; （考察基础API）
　　1)&实现对该数组的倒排，输出[5,1,4,2,6,3]
　　2)&实现对该数组的降序排列，输出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){
//6,5,4,3,2,1
return b-a;
14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是日，则输出
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month & 10 ? '0' + month :
var day = d.getDate();
day = day & 10 ? '0' + day :
alert(year + '-' + month + '-' + day);
15.将字符串&&tr&&td&{$id}&/td&&td&{$name}&/td&&/tr&&中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案："&tr&&td&{$id}&/td&&td&{$id}_{$name}&/td&&/tr&".replace(/{\$id}/g,&'10').replace(/{\$name}/g,&&Tony&);
16.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&,&&,&&,&&进行转义
function escapeHtml(str) {
return str.replace(/[&&&&]/g, function(match) {
switch (match) {
return &&&;
return &&&;
return &&&;
case &\&&:
return &"&;
17.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo)&foo&=&&//如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
18.看下列代码，将会输出什么?(变量声明提升)
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
function(){
console.log(foo); //undefined
console.log(foo); // 2;
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
19.用js实现随机选取10--100之间的10个数字，存入一个数组，并排序。
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = iend - istart +1;
return Math.floor(Math.random() * iChoice + istart);
for(var i=0; i&10; i++){
iArray.push(getRandom(10,100));
iArray.sort();
20.把两个数组合并，并删除第二个元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild()
replaceChild()
insertBefore()
getElementsByTagName() //通过标签名称
getElementsByName()
//通过元素的Name属性的值
getElementById()
//通过元素Id，唯一性
22.有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:'1',&b:'2',&c:'',&d:'xxx',&e:undefined}。
function serilizeUrl(url) {
var result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map. i & i++) {
result[map[i].split("=")[0]] = map[i].split("=")[1];
23.正则表达式构造函数var reg=new RegExp("xxx")与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\"表示"），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。&
邮箱的正则匹配：
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
24.看下面代码，给出输出结果。
for(var i=1;i&=3;i++){
setTimeout(function(){
console.log(i);
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。那么问题来了，如何让上述代码输出1 2 3？
for(var i=1;i&=3;i++){
setTimeout((function(a){
//改成立即执行函数
console.log(a);
25.写一个function，清除字符串前后的空格。（兼容所有浏览器）
使用自带接口trim()，考虑兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
26.Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）
var result=[];
function fn(n){
//典型的斐波那契数列
}else if(n==2){
if(result[n]){
return result[n];
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
& &中级Javascript：
1.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
考察点2：是否知道如何判断一个变量是什么类型的
考察点3：递归算法的设计
// 方法一：
Object.prototype.clone = function() {
var o = this.constructor === Array ? [] : {};
for (var e in this) {
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
//方法二：
* 克隆一个对象
* @param Obj
* @returns
function clone(Obj) {
if (Obj instanceof Array) {
buf = []; //创建一个空的数组
var i = Obj.
while (i--) {
buf[i] = clone(Obj[i]);
} else if (Obj instanceof Object) {
buf = {}; //创建一个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
} else { //普通变量直接赋值
2.如何消除一个数组里面重复的元素？
var arr = [1, 2, 3, 3, 4, 4, 5, 5, 6, 1, 9, 3, 25, 4];
function deRepeat() {
var newArr = [];
var obj = {};
var index = 0;
var l = arr.
for (var i = 0; i & i++) {
if (obj[arr[i]] == undefined) {
obj[arr[i]] = 1;
newArr[index++] = arr[i];
} else if (obj[arr[i]] == 1)
return newA
var newArr2 = deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25
3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
function Dog() {
this.wow = function() {
alert(&Wow&);
this.yelp = function() {
this.wow();
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
function MadDog() {
this.yelp = function() {
var self =
setInterval(function() {
self.wow();
MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
4.下面这个ul，如何点击每一列的时候alert其index?（闭包）
&ul id=&test&&
&li&这是第一条&/li&
&li&这是第二条&/li&
&li&这是第三条&/li&
// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i&3;i++)
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i&3;i++)
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
5.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
答案：（过长，点击打开）
1 var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
result.push(document.getElementById(regResult[3]));
//如果是class选择器
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === 'function') {
var doms = document.getElementsByClassName(regResult[3]);
if(doms) {
result = converToArray(doms);
//如果不支持getElementsByClassName函数
var allDoms = document.getElementsByTagName("*") ;
for(var i = 0, len = allDoms. i & i++) {
if(allDoms[i].className.search(new RegExp(regResult[2])) & -1) {
result.push(allDoms[i]);
//如果是标签选择器
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {
result = converToArray(doms);
function converToArray(nodes){
var array = null;
array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes. i & i++ ) {
array.push(nodes[i])
6.请评价以下代码并给出改进意见。
if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
不应该在if和else语句中声明addListener函数，应该先声明；
不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
改进如下：&
function addEvent(elem, type, handler) {　　
if (elem.addEventListener) {　　　　
elem.addEventListener(type, handler, false);　　
} else if (elem.attachEvent) {　　　　
elem['temp' + type + handler] =　　　　
elem[type + handler] = function() {　　　　
elem['temp' + type + handler].apply(elem);　　
elem.attachEvent('on' + type, elem[type + handler]);　
} else {　　
elem['on' + type] =　　
7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace("hello world") // -& 'h e l l o &w o r l d'
String.prototype.spacify = function() {
return this.split('').join(' ');
接着上述答题，那么问题来了
1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　
2）函数声明与函数表达式的区别？　
答案：在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。（函数声明提升）
8.定义一个log方法，让它可以代理console.log的方法。
可行的方法一：
function log(msg)　 {
console.log(msg);
log("hello world!") // hello world!
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
function log() {
console.log.apply(console, arguments);
那么问题来了，apply和call方法的异同？　　
对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：&apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。&如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。
9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
假设接第八题题干，我们要给每个log方法添加一个"(app)"前缀，比如'hello world!' -&'(app)hello world!'。方法如下：
function log() {
var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
10.对作用域上下文和this的理解，看下列代码：
var User = {
getCount: function() {
return this.
console.log(User.getCount()); // what?
var func = User.getC
console.log(func()); // what?
问两处 console 输出什么？为什么？
答案是 1 和 undefined。
func 是在 winodw 的上下文中被执行的，所以会访问不到 count 属性。
那么问题来了，如何确保Uesr总是能访问到func的上下文，即正确返回1。
答案：正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：
Function.prototype.bind = Function.prototype.bind || function(context) {
var self =
return function() {
return self.apply(context, arguments);
var func = User.getCount.bind(User);
console.log(func());
11.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。&　　
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
var whenReady = (function() { //这个函数返回whenReady()函数
var funcs = []; //当获得事件时，要运行的函数
var ready = //当触发事件处理程序时,切换为true
//当文档就绪时,调用事件处理程序
function handler(e) {
if (ready) //确保事件处理程序只完整运行一次
//如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
//运行所有注册函数
//注意每次都要计算funcs.length
//以防这些函数的调用可能会导致注册更多的函数
for (var i = 0; i & funcs. i++) {
funcs[i].call(document);
//事件处理函数完整执行,切换ready状态, 并移除所有函数
//为接收到的任何事件注册处理程序
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false); //IE9+
window.addEventListener('load', handler, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('onload', handler);
//返回whenReady()函数
return function whenReady(fn) {
if (ready) {
fn.call(document);
funcs.push(fn);
如果上述代码十分难懂，下面这个简化版：
function ready(fn){
if(document.addEventListener) {
//标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
//执行函数
}, false);
}else if(document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
//函数执行
12.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
回答出概念即可，下面是几个要点
给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束
需要注意浏览器边界的情况
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 endOfC　　
if (satrtOfCookie != -1) {　　　　
startOfcookie += searchName.　　　　
endOfCookie = myCookie.indexOf(";", startOfCookie);　　　　
result = (myCookie.substring(startOfCookie, endOfCookie));　　
(function() {　　
var oTips = document.getElementById('tips'); //假设tips的id为tips
var page = {　　
check: function() { //检查tips的cookie是否存在并且允许显示
var tips = getCookie('tips');　　　　
if (!tips || tips == 'show') //tips的cookie不存在
if (tips == "never_show_again")　　
　　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 =　　　　
if (this.check()) {　　　　
_this.showTip();　　　　
setcookie('tips', 'show', 1);　　
oTips.onclick = function() {　　　　
_this.hideTip(true);　　
page.init();
14.说出以下函数的作用是？空白区域应该填写什么？
(function(window) {
function fn(str) {
this.str =
fn.prototype.format = function() {
var arg = ______;
return this.str.replace(_____, function(a, b) {
return arg[b] || "";
window.fn =
})(window);
(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获取完整的回应数据
　　下面简单封装一个函数：（略长，点击打开）　　
url: "./TestXHR.aspx",
//请求地址
type: "POST",
//请求方式
data: { name: "super", age: 20 },
//请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
fail: function (status) {
// 此处放失败后执行的代码
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.
if (status &= 200 && status & 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
options.fail && options.fail(status);
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
上述代码大致表述了ajax的过程，释义自行google，问题未完，那么知道什么是Jsonp和pjax吗？
Jsonp：(JSON with Padding)是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。
pjax：pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。（关键点：可以实现ajax无法实现的后退功能）pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
阅读(...) 评论()}