【web前端面试题整理01】各位加班累了吧,来做点前端面试题吧

  1. 云栖社区>
  2. 博客>
  3. 正文

【web前端面试题整理01】各位加班累了吧,来做点前端面试题吧

范大脚脚 2017-12-14 21:01:00 浏览2925
展开阅读全文
前言

最近小叶子有点疲惫,主要是在外地工作生活上不太适应,吃一样的东西,我居然会拉肚子,而且是一个星期一个星期的。。。。

脸上长了一个豆豆一个星期还没消,我那个去啊。

昨天上午上班后,本来想继续研究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,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注