【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堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
随机推荐
- codeforces Gargari and Bishops（很好的暴力）
/* 题意:给你一个n*n的格子,每一个格子都有一个数值!将两只bishops放在某一个格子上, 每一个bishop可以攻击对角线上的格子(主对角线和者斜对角线),然后会获得格子上的 数值(只能获取一 ...
- Spring MVC 学习总结（五）——校验与文件上传
Spring MVC不仅是在架构上改变了项目,使代码变得可复用.可维护与可扩展,其实在功能上也加强了不少. 验证与文件上传是许多项目中不可缺少的一部分.在项目中验证非常重要,首先是安全性考虑,如防止注 ...
- Microsoft Azure News(5) Azure新DV2系列虚拟机上线
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者了Azure VM虚拟机,分为A系列和D系列2种 Microsoft Azure News(4) Azu ...
- 帮助你提高排版技巧的18个 PS 文字特效教程
Photoshop 文字特效教程对于学习基础的和高级的排版思维有很大的帮助.在这篇文章中,你会发现一组最新发布的文字效果教程.这些高品质的 Photoshop 教程可以帮助你设计出惊人的2D,3D,木 ...
- 基于HTML5快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- javascript必知必会：面象对象编程
面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...
- Android SDK Manager国内更新代理
在Android SDK Manager Setting 窗口设置HTTP Proxy server和HTTP Proxy Port这个2个参数,分别设置为: HTTP Proxy server:mi ...
- [Asp.net 5] Configuration-新一代的配置文件（神奇的Binder）
关于配置文件的目录:[Asp.net 5] Configuration-新一代的配置文件 之前看过MVC4.0的源码,里面就有Binder.作用是将前台页面传递过来的键值对/字典表绑定到特定的对象.此 ...
- .net概念之程序集说明
一.程序集的一些基本概念: 程序集是包含一个或多个类型定义文件和资源文件的集合.它允许我们分离可重用类型的逻辑表示和物理表示. 程序集是一个可重用.可实施版本策略和安全策略的单元.它允许我们将类型和资 ...
- ASP.NET MVC 学习之路由(URL Routing)
在ASP.NET MVC中,一个URL请求是由对应的一个Controller中的Action来处理的,由URL Routing来告诉MVC如何定位到正确的Controller和Action. 默认路由 ...