前言
最近小叶子有点疲惫，主要是在外地工作生活上不太适应，吃一样的东西，我居然会拉肚子，而且是一个星期一个星期的。。。。
脸上长了一个豆豆一个星期还没消，我那个去啊。
昨天上午上班后，本来想继续研究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都会费尽很多
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 7 body { margin: 0; } 8 div { background-color: Gray; color: White; text-align: center; } 9 .main { margin-left: 310px; height: 350px; } 10 .sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; } 11 .sidebar1:hover { background-color: Green; border: 1px solid black; z-index: 100; } 12 .sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; } 13 </style> 14 <script type="text/javascript"> 15 function preViewHtml(el) { 16 if (!el) return false; 17 var w = parseInt(el.offsetWidth); 18 var h = parseInt(el.offsetHeight); 19 setCss(el, 'width', w * 1.25 + 'px'); 20 setCss(el, 'height', h * 1.25 + 'px'); 21 setCss(el, 'background-color', parseInt(el.offsetHeight) * 1.25 + 'px'); 22 23 addEvent(el, 'mouseout', function () { 24 setCss(el, 'width', ''); 25 setCss(el, 'height', ''); 26 }); 27 28 } 29 30 function addEvent(el, type, fn) { 31 if (el.attachEvent) { 32 el['e' + type + fn] = fn; 33 el[type + fn] = function () { obj['e' + type + fn](window.event); } 34 el.attachEvent('on' + type, obj[type + fn]); 35 } else 36 el.addEventListener(type, fn, false); 37 } 38 function removeEvent(el, type, fn) { 39 if (el.detachEvent) { 40 el.detachEvent('on' + type, obj[type + fn]); 41 el[type + fn] = null; 42 } else 43 el.removeEventListener(type, fn, false); 44 } 45 46 function addClass(el, k) { 47 48 } 49 50 function removeClass(el, k) { 51 52 } 53 54 function getCss(el, k) { 55 if (el) { 56 if (el.style[k]) { 57 return el.style[k]; 58 } 59 return null; 60 } 61 } 62 63 function setCss(el, k, v) { 64 if (el) { 65 if (!el.style || el.style.length == 0) { 66 el.style = {}; 67 } 68 el.style[k] = v; 69 } 70 } 71 </script> 72 </head> 73 <body> 74 <div class="main">main 75 </div> 76 <div class="sidebar1" id="preView" onmouseover="preViewHtml(this)" >sidebar1 77 </div> 78 <div class="sidebar2">sidebar2 79 </div> 80 </body> 81 </html>
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参数，但是那样对删除事件有提出了麻烦，我们这里便不管他了。
结语
今天状态不佳，暂时这样了吧，先去吃个饭再说。