【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堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
随机推荐
- 小实例窥探dotnet垃圾回收
今天项目调试时发现VS中有下面这样的现象. 说明,file.ServerLocation是一个完整的物理路径.第三句代码是错误的,保留只是因为它使用了"s"字符串. 个人认为当 ...
- [SDK2.2]Windows Azure Virtual Network (3) 创建AD Server并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者已经向大家介绍了如何创建一个简单的Azure Virtual Network. 本章我将创建一台域服务器 ...
- JS魔法堂：IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- win10系统下点击关机却自动重启的问题解决思路
第一步.进入win10系统后,我们点击开始菜单上鼠标右键,选择控制面板 第二步.找到电源选项,点击进去(如何没发现,点击右上角查看方式,更换为小图标) 第三步.点击选择关闭盖子的功能 第四 ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- 能不能用javascript实现素数求和问题呢？
先自己试试吧 好吧,下面这段代码用了别人所说的最笨的方法,身为小白的我只能呵呵.待会再尝试用其他算法. <!DOCTYPE html> <html lang="en&quo ...
- Emit学习(2) - IL - 常用指令介绍
学习Emit必不可少的, 会使用到IL中间代码. 初见IL代码, 让我有一种汇编的感觉, 让我想起了, 大学时, 学习8051的汇编语言. 多的就不扯了, 直接进入正题, OpCodes指令集是不是有 ...
- PHP访问MySql数据库介绍
在网站后台,经常要与数据库打交道.本文介绍如何使用XAMPP来管理MySql数据库及如何用PHP来访问MySql数据库. 一．使用XAMPP来管理MySql数据库 首先使用XAMPP打开MySql的管 ...
- 使用VS Code 开发.NET Core 应用程序 部署到Linux 跨平台
使用VS Code 开发.NET Core 应用程序 部署到Linux 跨平台. 前面讲解了VSCode开发调试 .NET Core.都只是在windows下运行. .NET Core真正的核心是跨平 ...
- 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate
[源码下载] 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate 作者:webabcd 介绍背水一战 Windows 10 ...