前言
最近小叶子有点疲惫，主要是在外地工作生活上不太适应，吃一样的东西，我居然会拉肚子，而且是一个星期一个星期的。。。。
脸上长了一个豆豆一个星期还没消，我那个去啊。
昨天上午上班后，本来想继续研究javascript方面的东西的，但是下午要开会，结果一开就是4.5小时，哎哟，我那个怎么感觉很累啊，
明明是坐着的啊，开完会腰酸背痛的，回来吃过饭，本来想接着学习，却迷迷糊糊的睡着了......
按照进度我们本来想要开始做小窗口的，但是也碰到点问题，除了各大微博，其它数据全部是RSS，与我想象的数据源不一样，所以这块还需要点时间，加之今天起来还是有点疲惫，那我们不如这个周末就休息下吧，来做几道有意思的面试题好了，当是对前面学习的总结好了。
事情不顺利不要紧，我们一步一步来，没有什么事情做不完的。
布局类
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。
我们前面已经学了很多CSS方面的东西了，我们现在来看看这道题，我们会怎么做呢？
这道题限制了只能使用三个div，并且我多float布局比较厌恶，所以第一步应该不会采用float，但是也必须考虑各个浏览器的兼容性，于是我第一份答案出来了：
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 body { margin: 0; }
6 div { background-color: Gray; color: White; text-align: center; }
7 .main { margin-left: 310px; height: 350px; }
8 .sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; }
9 .sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; }
10
11 </style>
12 </head>
13 <body>
14 <div class="main">main
15 </div>
16 <div class="sidebar1">sidebar1
17 </div>
18 <div class="sidebar2">sidebar2
19 </div>
20 </body>
21 </html>
复制代码
各位看到了，虽然我比较像用inline-block，但是实施起来时候发现有点困难，并且我这里想到了其它东西：
主要内容优先原则，不管是怎样的布局，我的main内容皆应该放到最前面，优先加载，这也对后面将之改成响应式布局有好处。
这样做还有一个好处便是，我们主要内容若是临时要在左边的话，改起来也必将方便，不要动到html结构。
好了，我们现在来看看有没有其它方法，比如float：
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 body { margin: 0; }
6 div { background-color: Gray; color: White; text-align: center; }
7 .main { margin-left: 310px; height: 350px; }
8 .sidebar1 { width: 300px; height: 200px; float: left; }
9 .sidebar2 { width: 300px; height: 140px; float: left; clear: left; margin-top: 10px; }
10
11 </style>
12 </head>
13 <body>
14 <div class="main">main
15 </div>
16 <div class="sidebar1">sidebar1
17 </div>
18 <div class="sidebar2">sidebar2
19 </div>
20 </body>
21 </html>
复制代码
有以下几个问题：
① 因为我们主要区域在前，所以后面两个浮动元素要改变位置才行，这与我们主要内容在前规则违背
② 若是此处主要内容要显示在左边的话，原来的CSS与HTML结构皆需改变
③ 浏览器兼容问题，原来的做法是没有兼容问题的，这里使用float不久后IE6下又会莫名其妙的搞好多问题出来（IE3像素，清楚浮动）
所以就这块布局来说，我是不会使用float布局的。
PS：哪位大哥有不同的意见请一定留言
第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
于是我们来看看这道题第二个需求，他要鼠标划上扩大25%，根据我们布局1的话，这个题应该比较简单，而且某些情况下也许链js都不必使用了，但是我们这里不管他：
PS：各位请不要小看这一块，你认真做了的话，他会让你感受到，没jquery并且没有形成自己库的渺小，单单是设置样式，设置class都会费尽很多
View Code
这个代码有很多问题，其实我本意也不完全是这个意思啦，其实要做好这道题我觉得应该做好以下几个事情：
① 封装获取dom的函数
② 封装操作dom属性的函数
③ 封装操作class的函数
④ 封装事件绑定的函数
有了以上几块后，这道题便很简单了，所以我们这里还是来封装以下吧。。。虽说我还真没全部写过，没有jquery操作dom真讨厌。。。
复制代码
1 function getById(id) {
2
3 }
4
5 function getAttr(el, k) {
6
7 }
8
9 function setAttr(el, k, v) {
10
11 }
12
13 function addClass(el, k) {
14
15 }
16
17 function removeClass(el, k, v) {
18
19 }
20
21 function getStyle(el, k) {
22
23 }
24
25 function setStyle(el, k, v) {
26
27 }
28
29 function addEvent(el, type, func) {
30
31 }
32
33 function removerEvent(el, type, func) {
34
35 }
复制代码
以下附上实现的代码：
首先来几个简单的：
复制代码
1 function getById(id) {
2 return id ? document.getElementById(id) : null;
3 }
4
5 function getAttr(el, k) {
6 if (el) {
7 return el.getAttribute[k];
8 }
9 return null;
10 }
11
12 function setAttr(el, k, v) {
13 if (el) {
14 el.setAttribute(k, v);
15 }
16 }
17
18 function addClass(el, k) {
19 if (el) {
20 var arr = el.className.split(' ');
21 var arrClass = [];
22 var isExist = false;
23 for (var i = 0, len = arr.length; i < len; i++) {
24 if (arr[i] != '') arrClass.push(arr[i]);
25 if (arr[i] == k) {
26 isExist = true;
27 break;
28 }
29 }
30 if (isExist == false) {
31 arrClass.push(k);
32 var cls = arrClass.join(' ');
33 el.className = cls;
34 setAttr(el, 'class', cls)
35 }
36 }
37 }
38
39 function removeClass(el, k) {
40 if (el) {
41 var arr = el.className.split(' ');
42 var arrClass = [];
43 for (var i = 0, len = arr.length; i < len; i++) {
44 if (arr[i] != '' && arr[i] != k) arrClass.push(arr[i]);
45 }
46
47 var cls = arrClass.join(' ');
48 el.className = cls;
49 setAttr(el, 'class', cls)
50 }
51 }
复制代码
我们看到，firefox可以获取class列表，而ie几个浏览器只有className这一属性，所以操作class时候我们要用到。
但是获取当前样式却比较麻烦，还需要计算各个样式表的比重，我们这里用不到就暂时忽略了。
以上简单测试了一番，基本没有问题，我最后加上事件绑定，便暂时告一段落。
复制代码
1 function addEvent(el, type, func) {
2 if (el) {
3 if (el.attachEvent) {
4 el.attachEvent('on' + type, func);
5 } else {
6 el.addEventListener(type , func, false);
7 }
8 }
9 }
10
11 function removerEvent(el, type, func) {
12 if (el) {
13 if (el.attachEvent) {
14 el.detachEvent('on' + type, func);
15
16 } else {
17 el.removeEventListener(type, func, false);
18 }
19 }
20 }
复制代码
以上是很简陋的做法，若是要完全解决兼容性方法，需要call篡改IE事件中this指向，以及传入的e参数，但是那样对删除事件有提出了麻烦，我们这里便不管他了。
结语
今天状态不佳，暂时这样了吧，先去吃个饭再说。
您可以考虑给小钗发个小额微信红包以资鼓励
本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/p/3150609.html，如需转载请自行联系原作者
