image.png
1. 列举你用过的设计模式及其场景
在《JavaScript设计模式与开发实践》这本书中,介绍的设计模式有以下几种：
单例模式 | 策略模式 | 代理模式 | 迭代器模式 | 发布-订阅模式 | 命令模式 | 组合模式 | 模板方法模式 | 享元模式 | 职责链模式 | 中介者模式 | 装饰者模 | 状态模式 | 适配模式
2. 垂直居中都有哪些实现办法, 请分情况说明
- 常规办法(已知宽高)
.box{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
- 行内元素
.box{
width:100px;
height:100px;
line-height:100px;
text-align:center;
}
- 移动端(宽高不固定)
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3. 简述event.stopImmediatePropagation和event.stopPropagation的不同
两者都有阻止冒泡的作用, 但是event.stopImmediatePropagation还会阻止该元素绑定的相同类型事件的后续执行.下面的代码可以很好的说明这一点.
<!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第一个监听函数");
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第三个监听函数");
//该监听函数排在上个函数后面,该函数不会被执行.
}, false);
document.querySelector("div").addEventListener("click", function(event)
{
alert("我是div元素,我是p元素的上层元素");
//p元素的click事件没有向上冒泡,该函数不会被执行.
}, false);
</script>
</body>
</html>
4. 列举任一你使用的jquery和zepto插件,并说明实现原理及用途
略
5. 请用正则表达式将http://baidu.com/s?wd=yourname&id=21&ie=utf-8中的id值提取出来
var str = "http://baidu.com/s?wd=yourname&id=21&ie=utf-8";
var regexp = /id=(\w)*/gi;
var idValue = str.match(regexp)[0].split("=")[1];
6. 如何检测页面加载和渲染性能,具体指标有哪些?
基于网页分析工具：
基于浏览器分析工具：
- Chrome自带工具F12
- Firefox插件：YSlow（Yahoo工具）
- Page Speed（google）
具体指标有:
- 页面加载时间: 从页面开始加载到页面onload事件触发的时间.
- 全部页面加载事件: 最初启动浏览开始, 直到所有元素都被加载完成后, 在2秒后任然没有网络活动的时间.
- 从开始加载到收到服务器返回数据的第一个字节的时间
- DNS事件: 进行域名解析所需要的时间
- HTPP网页打分: 页面渲染, 下载速度, 页面流畅度
- TCP时间: 客户端建立连接的时间
更多请参考：关于web页面性能测量指标与建议
7. 重写setTimeout方法, 实现其回调函数传参setTimeout( function(){} , 1000, param...)(其中param..是function()回调函数的参数)
var __sto = setTimeout;
window.setTimeout = function (callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function () {
callback.apply(null, args);
}
__sto(_cb, timeout);
}
8. 你对前端工程化的理解?
前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是让前端开发能够“自成体系”，最大程度地提高前端工程师的开发效率，降低技术选型、前后端联调等带来的协调沟通成本。
更多请参考：浅析前端工程化
9. 以下代码中end字符串什么时候输出
var t=true;
setTimeout(function(){
console.log(123);
t=false;
},1000);
while(t){}// 此时是一个死循环，永远不可能执行setTimeout中的回调函数
console.log(‘end’);
10. 移动端有哪些原生触摸事件?
- touch类: touchstart, touchmove, touchend, touchcancel
- tap类: tap, longTap, singleTap, doubleTap
- swipe类: swipe, swipeLeft, swipeRight, swipeUp, swipeDown
image.png
真题百度云盘下载地址: 链接: http://pan.baidu.com/s/1miDnH0G 密码: hc9x
网友评论