面试官:让你设计一个placeholder的input输入框,你该怎么设计? placeholder知道吗?
我:placeholder? 有点印象,记不清了~~~
面试官:就是占位符文本,起提示作用的,在搜索输入框中经常见到。(注:如下图,这题也是今年的淘宝校招笔试题之一,从每次的面试中都是受益颇多~)
我:大致是用户鼠标点击的时候,占位符文本消失,失去焦点的时候判断文本是否为空,为空的话还原占位符文本。
面试官:很多时候,用户不一定只会用鼠标,他们会用键盘切换。
我:噢,那应该用focus事件,得到焦点占位符文本消失,失去焦点判断。
面试官:对,现在出现个情况,HTML5中对placeholder是原生支持的,既然是原生支持的,我们应该尽量用原生的,自己写的脚本就可以不用了。而为了做到兼容性,对于不支持HTML5的浏览器,我们需要启用我们的脚本,这样的话有什么解决方案吗?
我:(这题就没答好了,·实在么想到好的方法了,嗯了半天)浏览器检测~~~
面试官:有更好的方法吗?
我:判断特性节点的specified属性,如果是内置的话,这个属性是false,非内置的话则是true。
面试官:(似乎没听明白我在说什么- -!不过我也确实答错了,只要在HTML标签内指定了的属性,其对应的特性节点的specified都是true),没有那么复杂,只需要动态创建一个input元素,用in操作法判断placeholder是否在其内就行了,就是 return 'placeholder' in inputElem ,如果返回true的话,就直接使用原生的。
我:这样可以吗?(这里主要没搞明白:即使没有特别指定placeholder属性,在支持这个属性的浏览器中,也会返回true。经过后面自己的测试发现是可行的,前几个星期看的《HTML5揭秘》中也有专门的说明)。
面试官:你等会可以去试试。下一个问题,有用过什么框架么?
我:平常做项目是基于EXT的,主要用其UI组件,JQ有去稍微了解一下,源码看过大约1000行,但没用过JQ。
面试官:说说EXT和JQuery有什么不同
我:(这里JJWW了一大堆啊。。后面面试官也说了他自己的观点,我觉得这样很好啊,属于一个交流过程,从面试官那里聆听他们的看法,此处就省略掉我的看法了,各人有各人的观点,这个也不是一个bool题,这里推荐一篇文章web前端框架比较分析)
面试官:是否知道JQ的链式调用?说说看怎么去实现?
我:(这里也是JJWW了一会,去掉些废话,说重点)内部定义一个构造函数,对这个构造函数原型增加各种方法,每种方法都返回this;构造函数内部根据传入的选择符获得相关的DOM元素,保存为实例对象的属性,最后返回这个实例对象。 (更详细的在这链式调用原理)
面试官:好的,下一个问题,平常我们要在页面加载后执行些脚本,一般会用到window.onload,这样是否会有什么缺点么?
我:如果页面中有图片,或者iframe元素,必须要等到这些元素内容加载完毕后才会执行,而这些内容比较大,载入相对来说是比较缓慢;而很多情况下,执行脚本是不会涉及到这些元素的。
面试官:有什么解决方案么?
我:在支持W3C标准浏览器下,可以使用document的DOMContentLoaded事件,在IE下可以监听document的readystatechange事件(事实上,这个似乎是不对的,我测试了下,在document的readyState为complete的情况下,img和iframe的资源已经加载完毕了,期待有权威的同学帮忙讲解下这个事件的触发时机和作用。 这里应该答用document.write动态添加一个带defer属性的script标签,监听该标签的readystatechange事件的)。
面试官:(这里似乎没指明我答错了``)有时候onload会在readystatechange之前触发,这该怎么办?
我:打个完成标记就行了。
面试官:嗯,这种方式还是有缺点的,知道是什么吗?
我:页面中有iframe的情况下,会等待iframe的内容加载完毕后才执行(这里测试了下,如果但是document的readystate会等待img加载完毕后才变成complete,而动态添加defer属性的script则不会被img阻塞,但会被iframe阻塞)。
面试官:有什么解决办法么?
我:JQuery中是用doScrol, 这个方法我当时搜了下MSDN,不过具体用途我忘记了。(原理可以看这里:http://javascript.nwbox.com/IEContentLoaded/)
面试官:嗯,正好你的小框架中没有ready函数,你可以去添加一下。(注:发简历的时候,顺便把自己以前积累的一个1000多行的小框架和3个组件发过去了。),JQ的ready函数其实是有BUG的,当然也是在比较极端的情况下,你知道是什么吗?
我:。。这个我就不大清楚了,没有去细看。
面试官:这个不要紧,是这样的,如果在ready绑定的函数中继续调用ready,那么第二次的ready中的代码不会在文档加载完毕后执行。
我:额。。。(对JQ的ready的这个情况,我对面试官的回答做保留意见,其实我觉得这个不应该算BUG,好比onload的事件只触发一次,在onload的函数中再对onload绑定函数一样不会触发)。
面试官:最后一个问题,关于设计模式的,对装饰模式有什么理解?
我:(这个我没答好,设计模式需要长期实践才好理解啊=- =!! 当然面试官很NICE的说了他自己的理解,我这里就省略对话了)。
面试官:好的,我的问题问完了,你有什么问题要问我么?
我:(这里省略XX字)。
小结:
这里集中了2个主要问题,一个组件的实现和一个功能函数的实现,placeholder的设计在淘宝上海站中的笔试题中也出现了,准备把代码在应聘淘宝经历中写进去,这里就先不写出来了。下面贴出自己实现的ready函数代码- -!!
/*
*DOM内容加载完毕后执行脚本代码
* fn:待执行的函数
* scope: fn的执行作用域
*/
XX.domReady = function(fn, scope){
var doc = document,
readyFn = null;
if(doc.addEventListener){//W3C标准
readyFn = function(){
doc.removeEventListener('DOMContentLoaded', readyFn, false);
fn.apply(scope);
};
doc.addEventListener('DOMContentLoaded', readyFn, false);
}
/*IE下*/
if(doc.attachEvent){
readyFn = function(){
if(doc.readyState == 'complete' && !readyFn.done){
readyFn.done = true;
fn.apply(scope);
doc.detachEvent('onreadystatechange', readyFn);
window.detachEvent('onload', readyFn);
}
};
doc.attachEvent('onreadystatechange', readyFn);
window.attachEvent('onload', readyFn);
void function(){
if(readyFn.done){
return;
}
try {
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( arguments.callee, 1 );
return;
}
readyFn.done = true;
fn.apply(scope);
}();
}
};
测试页面代码:
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript" src="xx.base.js"></script>
<script>
XX.domReady(function(){
alert(document.compatMode)
alert("ready");
});
</script>
</head>
<body>
<iframe width="200" height="300" src="frame.php"></iframe>
<img alt="test" src="test.php" width="200" height="300" />
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaa</p>
</body>
</html>
测试页面中iframe的frame.php内容:
<?php
sleep(5);
echo "<p>frame loaded</p>";
?>
测试页面中img标签的test.php内容:
<?php
sleep(3);
echo file_get_contents("test.jpg");
?>
面试后记:
包括以前写的2篇百度面试心得,加上这一篇,百度电子商务部的一面结束,面试时长70分钟,当然面试心得主要是记录技术性的对话,非技术性对话同样在面试中会有一定比例。
在接下来的第二轮面试中,主要是围绕个人写的小框架和组件问了些问题,大概30分钟;记得比较清晰的是跨域问题;
第三轮面试是Rank面的,问的问题比较宏观了:脚本语言与非脚本语言的比较;按需加载和延迟加载的好处;对EXT框架的理解,对JQuery的理解,以及他们之间的区别(3轮面试都问了类似的框架间的问题。。。- -!!);设计模式问了个代理模式;数据结构涉及到快排,堆排,归并排序。
三轮之后,百度电商的面试对话记录正式结束- -!! 无论是面试经验还是职业技能上面,这次的面试都给我个人带来了不小的成长。最后感谢百度电商的三位NICE的面试官!
分享到:
相关推荐
web前端面试题
2023最新前端面试题总结
现在五块钱的付出,将来收获的可能是一份心仪的offer,干货满满,建议下载。...友情提示:本套面试题包括面试题900题+公司实战面试题400问,面试题已经整理好答案,公司题由于新收录没有答案,但非常有参考价值。
网盘下载pdf文件,包括常见前端面试题汇总,百度、阿里、腾讯校招面试题汇总,网盘下载pdf文件,65个文件
前端面试题总结
前端面试题含答案.pdf
96道web前端面试题96道web前端面试题.pdf
前端面试题及答案.pdf
16.md 2014年最新前端开发面试题 General 17.md 前端面试资源汇总 General 18.md 5个典型的JavaScript面试题(上) JavaScript 19.md 再来5个JavaScript面试题 JavaScript 20.md BAT web前端开发方向校招都考些...
整理了100道前端面试官必问的面试题,避免内卷,走上高薪之路
腾讯面试题 前端面试题 腾讯的前端面试题。
前端面试题,背会可就业,适合1-3年前端
文件中包含了本人最近在网上总结的面试题,有java面试题,jq面试题,jsp、servlet、ajax面试题,mysql面试题,oracle面试题,redis教案,也有最近时间总结的公司面试题,涉及的层面虽然不是很多,但是应对面试 应该...
前端面试题整理方便查询,包括HTML、css、javascript等前端相关的面试问题。
H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5...
Web前端开发,最新的各大公司的面试题,有兴趣的朋友拿去学习......
前端工程师面试题题及答案全面综合.pdf
最新BAT 面试题、WEB前端开发考试参考题、模拟面试常问问题汇总、前端面试宝典等......
前端面试题.md
web前端,HTML5 ,面试题,大厂