前言
最近小叶子有点疲惫，主要是在外地工作生活上不太适应，吃一样的东西，我居然会拉肚子，而且是一个星期一个星期的。。。。
脸上长了一个豆豆一个星期还没消，我那个去啊。
昨天上午上班后，本来想继续研究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">main15 </div>16 <div class="sidebar1">sidebar117 </div>18 <div class="sidebar2">sidebar219 </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">main15 </div>16 <div class="sidebar1">sidebar117 </div>18 <div class="sidebar2">sidebar219 </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 } else36 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 } else43 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">main75 </div>76 <div class="sidebar1" id="preView" onmouseover="preViewHtml(this)" >sidebar177 </div>78 <div class="sidebar2">sidebar279 </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参数，但是那样对删除事件有提出了麻烦，我们这里便不管他了。
结语
今天状态不佳，暂时这样了吧，先去吃个饭再说。
随时随地看视频
