据说只有 TOP 3%的前端工程师可以在一天内做完这些

你们这些后端总是说前端开发简单，你行你上

http://www.nowcoder.com/ta/front-end

专为前端开发的在线判题系统，欢迎挑战，2小时内可以通关的请加群462688309

PS：恳请大家不要提交恶意代码黑我们的在线运行系统 :-)

XadillaX

2015-06-15 14:13:22 +08:00

看见 DOM 操作的就不想做了，毕竟我不是前端。

wdlth

2015-06-15 14:17:03 +08:00

用JS写斐波那契数列，你们真有想法……

otakustay

2015-06-15 14:23:01 +08:00

真正考前端的题应该是这样的：

----

使用JavaScript实现一个固定元素的拖拽效果，要求函数符合以下签名：

```javascript
/**
* @param {HTMLElement} element 需要提供拖拽功能的元素
*/
function draggable(element) {
}
```

`element`符合以下前提：

- 在`<body>`元素之下，且不在其它元素内（作为`<body>`的直接子元素）
- 含有未知的子元素或内容，但大小不超过可视范围

在执行该方法后，`element`将具备以下功能：

- 按下鼠标后可开始拖动，放开鼠标时拖动结束
- 可以在当前浏览器可视区域区域内任意拖动
- 在拖动过程中，原元素`element`保持位置不变，使用一个透明度为0.4、视觉效果与`element`一致的元素跟随鼠标
- 拖动完毕后，原元素移至最终放开鼠标的位置，移动过程无需动画

### 知识点

1. 基本DOM操作
2. HTML drag & drop
3. CSS属性性能
4. 用户体验优化

### 关键细节

- 使用`cloneNode`并设置样式（添加特殊`class`更好）实现跟随鼠标的元素
- 如果使用HTML drag & drop实现，需要使用`e.transfer.setDragImage`实现跟随鼠标的元素
- 不使用HTML drag & drop时，使用`translate-3d`性能优于`translate`，`translate`优于`left / top`
- 原始位置的计算需要使用`getBoundingClientRect`、`scrollTop`、`scrollLeft`等属性
- 如果使用`translate`同步位置的话，要考虑原始已有`translate`的影响
- 对于跟随鼠标的元素，需要主动设置`position: absolute`
- `mousemove`和`mouseup`需要绑定在`documentElement`上
- 需要在`mousedown`时计算位置，`mousemove`时计算偏移量才可实现准确跟随，不能仅计算`mousemove`时的鼠标位置
- 出于用户体验考虑，可在移动若干像素（或鼠标按下若干毫秒）后才开始拖拽效果
- 拖拽结束后`element`移动位置为跟随鼠标的元素的位置，而非鼠标本身的位置

fzinfz

2015-06-15 14:29:11 +08:00

歪个楼，有到http://www.codewars.com 上练级的v友么？

rainday

2015-06-15 14:31:22 +08:00

@otakustay 大神，我是牛客网负责人，请加我QQ77963306

jianghu52

2015-06-15 14:34:06 +08:00

我连题目都不懂，是不是太low了。包名是什么东西。完全不懂。

huanghuaxin

2015-06-15 14:51:49 +08:00

@otakustay
这种题目只能存在于真实项目中吧，拖动这种交互复杂的功能，实现的方式千千万，当成在线的前端编程题，测试用例都可能覆盖不了…

我觉得好的前端题，应该只考核单一知识点，通过多个知识点的代码可以大致估算出用户的水平，而不是通过一道大而全的题目去考查…

otakustay

2015-06-15 14:59:07 +08:00

@huanghuaxin 考题有2种，一种是单一知识点看掌握如何，一种是综合性看整体思路和经验积累的，比如上面这题

这种题不会要求你结果是正确的，我们是看代码来了解你基本的思路是对的，能看到多少细节反映你以前踩过多少坑，随后会提几个你没注意到的细节，看你解决的思路是怎么样的来判断你是否能填坑

所以测试用例其实是不用的，因为这题追求的结果并不是“正确”……

lvfujun

2015-06-15 15:49:18 +08:00

@nowcoder 这个时间限制3秒指的是程序运行时间还是写代码的时间.

nowcoder

2015-06-15 16:24:36 +08:00

@lvfujun 代码运行的时间。你写个while(true)就会超时

TakanashiAzusa

2015-06-15 16:49:59 +08:00

太标题党了吧。费波纳茨那个才几行代码- -这种是最基础的算法了。虽然我是切图仔，但你不能这么黑我智商。。

nowcoder

2015-06-15 16:51:04 +08:00

@TakanashiAzusa 不要挑最简单的来说啦。：-）

bdbai

2015-06-15 19:30:15 +08:00

@nowcoder 自从听到老师让我们用递归写吓哭了

baiyemao

2015-06-15 19:38:22 +08:00

怎么又是这个牛客网,真是够了

jokcy

2015-06-15 22:08:14 +08:00

```
Array.prototype.uniq = function () {
var obj = {}, i = 0;
while(i<this.length) {
if (obj[this[i]]) {
this.splice(i, 1);
} else {
obj[this[i]] = true;
i++;
}
}
return this;
}
```
去重那个我这么写有什么问题么？或者可以公布一下你们的测试用例么？我想看一下错哪了？

nowcoder

2015-06-15 23:47:10 +08:00

@jokcy [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, '1'] 这个case看看

lujiajing1126

2015-06-16 01:05:50 +08:00

@jokcy
@nowcoder
既然可以用库那就耍一下赖，先用_.union合并，然后判断一下NaN（underscore用得熟不熟）
因为NaN和任何比都是false，所以NaN是可能被重复的（这是重点）
不知道这个算不算underscore的bug了

lujiajing1126

2015-06-16 01:11:13 +08:00

@nowcoder so是你们的版本低了- -新版underscore已经修复NaN比较的edge测试用例

lujiajing1126

2015-06-16 01:17:56 +08:00

总算都过了= =好蛋疼

secondwtq

2015-06-16 02:50:48 +08:00

这貌似并不能完全算是 “前端” 的内容，感觉大多数都是 JS 的一些知识点，逻辑和简单的算法。貌似有一道涉及到了 DOM。而一些 exactly “前端” 的东西，比如 @otakustay 在 43L 说的，做类似 OJ 的自动评测，有难度。

另外 LeetCode 一段时间前是支持了 JS 的，纯 JS。顺便如果注意了资源使用上限的问题的话，我并不认为纯粹 JS 这种轻量（V8 之类的动静搞得这么大是因为死命往里面加各种优化特技）又和系统底层没啥耦合的东西能把服务器搞出什么问题来。如果直接用 Node 跑那就另说了。