【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堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
随机推荐
- javascript中关于日期和时间的基础知识
× 目录 [1]标准时间 [2]字符串 [3]闰年[4]月日[5]星期[6]时分秒 前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于 ...
- audio和video元素
目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...
- poj2186Popular Cows（Kosaraju算法--有向图的强连通分量的分解）
/* 题目大意:有N个cows, M个关系 a->b 表示 a认为b popular:如果还有b->c, 那么就会有a->c 问最终有多少个cows被其他所有cows认为是popul ...
- Lua 学习笔记（一）环境搭建
Lua是一个小巧的脚本语言.Lua由标准C编写而成,代码简洁,几乎在所有的操作系统和平台上都可以编译,运行. 主要讲一下mac和win下的环境搭建. 工具: 1.Sublime Text 2 ...
- tomcat匹配Servlet的流程(原创)
- Unity3D协同程序（Coroutine）
摘要下: 1. coroutine, 中文翻译"协程".这个概念可能有点冷门,不过百度之,说是一种很古老的编程模型了,以前的操作系统里进程调度里用到过,现在操作系统的进程调度都是根 ...
- Apache错误日志时时查看
做项目的时候,有时候会需要查看一下apache的错误日志,然后就需要很繁琐的打开那个目录下面,看信息,只有当错误的时候我才会去打开那个文件. 但是最近我发现在开发的时候,自己忽略掉了很多错误,虽然不会 ...
- 使用Weka进行数据挖掘
1.简介 数据挖掘.机器学习这些字眼,在一些人看来,是门槛很高的东西.诚然,如果做算法实现甚至算法优化,确实需要很多背景知识.但事实是,绝大多数数据挖掘工程师,不需要去做算法层面的东西.他们的精力,集 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 解决MVC EF Code First错误:Model compatibility cannot be checked because the EdmMetadata type was not included in the model.
Model compatibility cannot be checked because the EdmMetadata type was not included in the model. En ...