【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堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
随机推荐
- Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程
转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...
- 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】
[功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...
- 后端码农谈前端（CSS篇）第三课：选择器
一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...
- Java多线程系列--“JUC线程池”03之 线程池原理(二)
概要 在前面一章"Java多线程系列--“JUC线程池”02之 线程池原理(一)"中介绍了线程池的数据结构,本章会通过分析线程池的源码,对线程池进行说明.内容包括:线程池示例参考代 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 只用一行代码让你的ASP.NET MVC 跑起来
只用一行代码让你的ASP.NET MVC 跑起来 MVC框架一直是企业开发绕不过去的东西,先是JavaEE的 Structs, 然后是 Spring MVC, 再到我们今天要讨论的ASP.NET MV ...
- JVM的GC概述
JVM的GC概述 GC即垃圾回收,是指jvm用于释放那些不再使用的对象所占用的内存.在充分理解了垃圾收集算法和执行过程后,才能有效的优化它的性能. 有些垃圾收集专用于特殊的应用程序.比如,实时应用程序 ...
- Windows Azure Virtual Network (8) 创建Azure Point-to-Site点到站点 VPN
<Windows Azure Platform 系列文章目录> 我们在使用Azure的时候,常常有这样的需求: -我需要将企业内网的主机连接到微软Azure公有云平台 -我需要保证企业内部 ...
- QT学习笔记4
顶层窗口-MainWindow 新建项目,选择基类的时Base Class是QMainWindow 最上面是Window Title,用于显示标题和控制按钮,比如最大化.最小化和关闭等:下面一些是Me ...
- 【原创】Kakfa common包源代码分析
初一看common包的代码吓了一跳,这么多scala文件!后面仔细一看大部分都是Kafka自定义的Exception类,简直可以改称为kafka.exceptions包了.由于那些异常类的名称通常都定 ...