【web前端面试题整理01】各位加班累了吧，来做点前端面试题吧
前言
最近小叶子有点疲惫，主要是在外地工作生活上不太适应，吃一样的东西，我居然会拉肚子，而且是一个星期一个星期的。。。。
脸上长了一个豆豆一个星期还没消，我那个去啊。
昨天上午上班后，本来想继续研究javascript方面的东西的，但是下午要开会，结果一开就是4.5小时，哎哟，我那个怎么感觉很累啊，
明明是坐着的啊，开完会腰酸背痛的，回来吃过饭，本来想接着学习，却迷迷糊糊的睡着了......
按照进度我们本来想要开始做小窗口的，但是也碰到点问题，除了各大微博，其它数据全部是RSS，与我想象的数据源不一样，所以这块还需要点时间，加之今天起来还是有点疲惫，那我们不如这个周末就休息下吧，来做几道有意思的面试题好了，当是对前面学习的总结好了。
事情不顺利不要紧，我们一步一步来，没有什么事情做不完的。
布局类
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。
我们前面已经学了很多CSS方面的东西了，我们现在来看看这道题，我们会怎么做呢？
这道题限制了只能使用三个div，并且我多float布局比较厌恶，所以第一步应该不会采用float，但是也必须考虑各个浏览器的兼容性，于是我第一份答案出来了：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
div { background-color: Gray; color: White; text-align: center; }
.main { margin-left: 310px; height: 350px; }
.sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; }
.sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; } </style>
</head>
<body>
<div class="main">main
</div>
<div class="sidebar1">sidebar1
</div>
<div class="sidebar2">sidebar2
</div>
</body>
</html>
各位看到了，虽然我比较像用inline-block，但是实施起来时候发现有点困难，并且我这里想到了其它东西：
主要内容优先原则，不管是怎样的布局，我的main内容皆应该放到最前面，优先加载，这也对后面将之改成响应式布局有好处。
这样做还有一个好处便是，我们主要内容若是临时要在左边的话，改起来也必将方便，不要动到html结构。
好了，我们现在来看看有没有其它方法，比如float：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
div { background-color: Gray; color: White; text-align: center; }
.main { margin-left: 310px; height: 350px; }
.sidebar1 { width: 300px; height: 200px; float: left; }
.sidebar2 { width: 300px; height: 140px; float: left; clear: left; margin-top: 10px; } </style>
</head>
<body>
<div class="main">main
</div>
<div class="sidebar1">sidebar1
</div>
<div class="sidebar2">sidebar2
</div>
</body>
</html>
有以下几个问题：
① 因为我们主要区域在前，所以后面两个浮动元素要改变位置才行，这与我们主要内容在前规则违背
② 若是此处主要内容要显示在左边的话，原来的CSS与HTML结构皆需改变
③ 浏览器兼容问题，原来的做法是没有兼容问题的，这里使用float不久后IE6下又会莫名其妙的搞好多问题出来（IE3像素，清楚浮动）
所以就这块布局来说，我是不会使用float布局的。
PS：哪位大哥有不同的意见请一定留言
第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
于是我们来看看这道题第二个需求，他要鼠标划上扩大25%，根据我们布局1的话，这个题应该比较简单，而且某些情况下也许链js都不必使用了，但是我们这里不管他：
PS：各位请不要小看这一块，你认真做了的话，他会让你感受到，没jquery并且没有形成自己库的渺小，单单是设置样式，设置class都会费尽很多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"> body { margin: 0; }
div { background-color: Gray; color: White; text-align: center; }
.main { margin-left: 310px; height: 350px; }
.sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; }
.sidebar1:hover { background-color: Green; border: 1px solid black; z-index: 100; }
.sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; }
</style>
<script type="text/javascript">
function preViewHtml(el) {
if (!el) return false;
var w = parseInt(el.offsetWidth);
var h = parseInt(el.offsetHeight);
setCss(el, 'width', w * 1.25 + 'px');
setCss(el, 'height', h * 1.25 + 'px');
setCss(el, 'background-color', parseInt(el.offsetHeight) * 1.25 + 'px'); addEvent(el, 'mouseout', function () {
setCss(el, 'width', '');
setCss(el, 'height', '');
}); } function addEvent(el, type, fn) {
if (el.attachEvent) {
el['e' + type + fn] = fn;
el[type + fn] = function () { obj['e' + type + fn](window.event); }
el.attachEvent('on' + type, obj[type + fn]);
} else
el.addEventListener(type, fn, false);
}
function removeEvent(el, type, fn) {
if (el.detachEvent) {
el.detachEvent('on' + type, obj[type + fn]);
el[type + fn] = null;
} else
el.removeEventListener(type, fn, false);
} function addClass(el, k) { } function removeClass(el, k) { } function getCss(el, k) {
if (el) {
if (el.style[k]) {
return el.style[k];
}
return null;
}
} function setCss(el, k, v) {
if (el) {
if (!el.style || el.style.length == 0) {
el.style = {};
}
el.style[k] = v;
}
}
</script>
</head>
<body>
<div class="main">main
</div>
<div class="sidebar1" id="preView" onmouseover="preViewHtml(this)" >sidebar1
</div>
<div class="sidebar2">sidebar2
</div>
</body>
</html>
这个代码有很多问题，其实我本意也不完全是这个意思啦，其实要做好这道题我觉得应该做好以下几个事情：
① 封装获取dom的函数
② 封装操作dom属性的函数
③ 封装操作class的函数
④ 封装事件绑定的函数
有了以上几块后，这道题便很简单了，所以我们这里还是来封装以下吧。。。虽说我还真没全部写过，没有jquery操作dom真讨厌。。。
function getById(id) {
}
function getAttr(el, k) {
}
function setAttr(el, k, v) {
}
function addClass(el, k) {
}
function removeClass(el, k, v) {
}
function getStyle(el, k) {
}
function setStyle(el, k, v) {
}
function addEvent(el, type, func) {
}
function removerEvent(el, type, func) {
}
以下附上实现的代码：
首先来几个简单的：
function getById(id) {
return id ? document.getElementById(id) : null;
}
function getAttr(el, k) {
if (el) {
return el.getAttribute[k];
}
return null;
}
function setAttr(el, k, v) {
if (el) {
el.setAttribute(k, v);
}
}
function addClass(el, k) {
if (el) {
var arr = el.className.split(' ');
var arrClass = [];
var isExist = false;
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i] != '') arrClass.push(arr[i]);
if (arr[i] == k) {
isExist = true;
break;
}
}
if (isExist == false) {
arrClass.push(k);
var cls = arrClass.join(' ');
el.className = cls;
setAttr(el, 'class', cls)
}
}
}
function removeClass(el, k) {
if (el) {
var arr = el.className.split(' ');
var arrClass = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i] != '' && arr[i] != k) arrClass.push(arr[i]);
}
var cls = arrClass.join(' ');
el.className = cls;
setAttr(el, 'class', cls)
}
}
我们看到，firefox可以获取class列表，而ie几个浏览器只有className这一属性，所以操作class时候我们要用到。
但是获取当前样式却比较麻烦，还需要计算各个样式表的比重，我们这里用不到就暂时忽略了。
以上简单测试了一番，基本没有问题，我最后加上事件绑定，便暂时告一段落。
function addEvent(el, type, func) {
if (el) {
if (el.attachEvent) {
el.attachEvent('on' + type, func);
} else {
el.addEventListener(type , func, false);
}
}
}
function removerEvent(el, type, func) {
if (el) {
if (el.attachEvent) {
el.detachEvent('on' + type, func);
} else {
el.removeEventListener(type, func, false);
}
}
}
以上是很简陋的做法，若是要完全解决兼容性方法，需要call篡改IE事件中this指向，以及传入的e参数，但是那样对删除事件有提出了麻烦，我们这里便不管他了。
结语
今天状态不佳，暂时这样了吧，先去吃个饭再说。
【web前端面试题整理01】各位加班累了吧，来做点前端面试题吧的更多相关文章
- 【web前端面试题整理06】成都第一弹，邂逅聚美优品
前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...
- 前端面试题整理—Vue篇
1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...
- myBatis+Spring+SpringMVC框架面试题整理
myBatis+Spring+SpringMVC框架面试题整理(一) 2018年09月06日 13:36:01 新新许愿树 阅读数 14034更多 分类专栏: SSM 版权声明:本文为博主原创文章 ...
- 面试 21-面试题整理 by smyhvae
21-面试题整理 by smyhvae #JavaScript #存储相关:请描述以下cookie.localStorage.sessionStorage的区别 在H5之前,cookie一直都是本地存 ...
- 尚学堂Java面试题整理
博客分类: 经典分享 1. super()与this()的差别? - 6 - 2. 作用域public,protected,private,以及不写时的差别? - 6 - 3. 编程输出例如以 ...
- vue.js面试题整理
Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...
- Java笔试面试题整理第一波
转载至:http://blog.csdn.net/shakespeare001/article/details/51151650 作者:山代王(开心阳) 本系列整理Java相关的笔试面试知识点,其他几 ...
- 转：2018最全Redis面试题整理
Java面试----2018最全Redis面试题整理 1.什么是Redis? 答:Redis全称为:Remote Dictionary Server(远程数据服务),是一个基于内存的高性能key-va ...
- 18家大厂Java面试题整理了350道（分布式+微服务+高并发）
一.性能调优系列 1.Tomcat性能调优 JVM参数调优: -Xms 表示JVM初始化堆的大小, -Xmx表示JVM堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
随机推荐
- java集合框架之Set
Set集合 元素不可以重复,是无序. 方法与list相同 HashSet:不保证set的迭代顺序,不同步,内部数据结构是哈希表 如果存自定义对象则需要覆盖equals和hashCode方法 先比较ha ...
- run命令
1.打开IIS %SystemRoot%\system32\inetsrv\iis.msc 2.打开EventView eventvwr 3.打开程序和功能 appwiz.cpl 4.打开intern ...
- 深入理解CSS线性渐变linear-gradient
× 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...
- QQ左侧滑动显示之按钮切换
上一篇为大家介绍了关于自定义属性设置方法,本篇我将为大家介绍一下如何通过按钮来控制Menu的显示和隐藏,为了达到这个效果我们需要在SlidingMenu中添加三个方法,用来达到实现上述效果的目的. 我 ...
- Angular从0到1：function（上）
1.前言 Angular作为最流行的前端MV*框架,在WEB开发中占据了重要的地位.接下来,我们就一步一步从官方api结合实践过程,来学习一下这个强大的框架吧. Note:每个function描述标题 ...
- SQLServer学习笔记系列8
一.写在前面的话 最近一直在思考一个问题,什么才能让我们不显得浮躁,真正的静下心来,用心去感受,用心去回答每个人的问题,用心去帮助别人.现实的生活,往往让我们显得精疲力尽,然后我们仔细想过没用,其实支 ...
- hadoop中MapReduce多种join实现实例分析
转载自:http://zengzhaozheng.blog.51cto.com/8219051/1392961 1.在Reudce端进行连接. 在Reudce端进行连接是MapReduce框架进行表之 ...
- Microsoft Azure News(5) Azure新DV2系列虚拟机上线
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者了Azure VM虚拟机,分为A系列和D系列2种 Microsoft Azure News(4) Azu ...
- apache(nginx)+django+virutalenv(virtualenvwrapper)+gunicorn+supervisor配置高效web环境
前言 django的调试模式配置简单,用于测试十分方便,但众所周知,这个只适合于调试,生产上运行效率十分低下. 后来考虑用nginx+uwsgi的模式进行,但之前配置过apache+wsgi的方式,感 ...
- 年薪10w和年薪100w的人，差在哪里？
职场10年,为什么有人已经当上了董事总经理,而有的人还是资深销售经理? 出道10年,为什么有人已经当上了主编.出版人,而有的人还是资深编辑? 打拼10年,为什么有人已经身价数十亿美金,而有的人还在为竞 ...