出一道前端面试题，按这个标准在二三线城市招前端好招吗？

[HiCode]

按下面文章的思路，写一个基于 svg 的 vue 组件，实现类似 gif 动画的效果，提供“播放、暂停、循环、跳转到指定帧”的功能。

http://www.joningram.co.uk/article/svg-smil-frame-animation/

不看学历不看经验，只看代码！

补一下考虑的地方：

英文文章，要求有基本的英文阅读能力；

svg 用的少，对，所以可以看学习能力（另，目前 svg 在微信公众号文章有业务市场）；

最后就是看对 vue 的熟悉程度，及基本的代码封装能力。

补一下信息：

开卷考试，可以查资料。

发现回复挺有意思的，大部分人吐槽说 svg 业务中用不上。

不知道大家在求职时遇到自己不会的技术，会不会说自己愿意学，还是直接走人。

[lihongming]

从我前同事回老家创业的经验来看，离开北京真就招不到人了。别说你考这种实际工作中用不到的技术，就是做个普通网站，都招不到靠谱的。

当然这也与他开的工资有关，小地方的工资水平当然不能跟中关村比，所以你如果开出中关村水平的工资，应该还是能招到个别不愿离家的高手的

[fuis]

看你给多少钱了

[wtf12138]

svg 熟悉的真不多

[murmur]

动画相关是考美工啊，而且这个需求很奇怪，现在这种复杂动画直接上视频了

[kiracyan]

B 站首页预览视频那种?

[stroh]

这种题一二线都招不到，更别说三四线了，还是自己干吧

[tabris17]

偏门

[SakuraKuma]

左转招个动画的不好嘛.

[vivipure]

感觉从业务经历来招人靠谱点，当然这个面试题就算对 svg 不熟悉，从例子到实现再到封装组件也不难； 而且这个组件就算最后实现了，实用性也比较低。动画可以去看看 lottie 。

[duan602728596]

这种都是拿软件做的，正常很少有手写 svg 的。我曾经实现一个 button 的 hover 渐变特效，纯手写，连查文档再调试，花了四五个小时。
你这个题，基本上是招不来人了。

[yhxx]

真要写应该还是不难的吧
现实是假如你的公司不是特别有竞争力（比如招 P6 给百万年薪），大部分人看到这种笔试题直接下一家了，懒得浪费时间

[HiCode]

从回复来看，还是有挺多人不看文章就直接臆想的……

[learningman]

让我查 MDN 可以写，如果说一定要背 API 那算了

[darknoll]

搁这扯犊子呢，你咋不叫人用 webgl 做个 3D 游戏呢，大部分前端是做业务的，不是跟你弄这个的

[draguo]

最好补充一下薪资待遇，擅长动画并且英文好，有较强学习能力，这样的人不多

[Sapp]

你可拉倒吧你
<script>
function fun () {
console.log(count)
}
fun()
var count = 1;
fun();

// 分割线

var num = 1
function fun1() {
console.log(this.num)
}

var obj = {
num: 2,
fun1: fun1,
fun2() {
fun1()
},
fun3: () => {
fun1()
}
}
fun1();
obj.fun1();
obj.fun2();
obj.fun3();
</script>

就这俩题，在成都最近看的 1-2w 的候选人里，能答准的十不足一，上面那个还有一半以上能答到并且说个为啥，下面这个就没几个答准的，答准的能说对为啥的那几个，要么最后去了头条阿里腾讯，要么张嘴就是 40w...

[PinkRabbit]

你要是 955，薪资持平一线，好招

[andy7076]

我冒昧的揣测一下，楼主一定是英语阅读能力还没有达到直接阅读的水平，又曾看英文 blog 或者文档解决过一些问题，并且认为这种能力还算比较优秀，所以把这个能力设计成了衡量一个人水平高低的方式。嘻嘻😋 不过也确实考量面试人的水平。

[HiCode]

@andy7076 不好意思，我英文阅读还可以，写和读就不行了。出这个题主要是希望筛选掉一部分遇到坑没办法通过英文资料找解决方案的。

[HiCode]

@Sapp 大佬，你不要这么直接嘛，上面很多回复我都直接忽略了，哈哈哈哈哈哈哈！

[jones2000]

还好吧， 就贴贴图什么的。打斗的就麻烦了， 要判断是否是有效的击中范围。

[wktrf]

@Sapp 在 2021 你这题的意义还不如楼主的问题意义大，一个 var 的特性和 this 指向能这么夸张，遇到这种写法的不如把写出这种人的打死吧，但凡开了严格模式或者用 let 替换 var 就不会让这代码跑起来，更别说 const+ts 了，你是招刚入门的当我没说

[JerryCha]

这需求我看你放京沪才找得着人了

[qiayue]

一线城市，能做出来的，可以拿 20K 以上了

[hbolive]

看你给钱多少了。。

[456789]

会这个的去三线的没几个，要不就在国企的那种将来是大大级别的

[cyrbuzz]

17 点 39 分看到这个，准备试试。

[ahsjs]

我能说你们考察的都很局限吗(hah)，github.com/leonardomso/33-js-concepts

[ecuplxd]

@Sapp 严格模式和非严格模式还是有区别的。如果你直接就拿着这个题目问输出，没说啥模式下，那么谁都答不准。

[cjd6568358]

@Sapp 能熟练掌握这些的 离 40W 也差不多了 兄弟

[musi]

粗略看了下这篇文章，还挺有意思的。先收藏一下等下班了可以继续看看

[cjd6568358]

@wktrf 确实实际开发中很少出现这种"问题"代码 但面试本来就是优中选优 日常开发谁不会呢?考的就是基础知识扎实全面 遇到问题能独立调试解决 除掉特意背面试题的那种 真正掌握的人确实很有竞争力

[cjd6568358]

也许楼主开出的薪资真的很诱人吧 或者有大厂光环 不然就算是一二线遇到这种公司 我也是直接 pass 的 懒得花时间跟他墨迹

[zhuisui]

@Sapp 而且 REPL 和在文件里也不一样

[whosesmile]

@wktrf @ecuplxd 你们这属于抬杠，既然理解人家出题的目的了，还在那问严格模式有意思吗？又不是小学生，一道题好几个答案都说得通，都成年人了，理解面试官想考啥知识点，回答就完了呗。

[cyrbuzz]

@cyrbuzz

这个...比预想的要简单，都有现成的 API 。

```

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" onclick="pause(this)" id="ff">
<g>
<rect
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="square"
width="100"
height="100"
x="30"
y="30"
>
<animate
id="frame1"
attributeName="display"
values="inline;none;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</rect>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="circle"
d="m 125,80 a 45,45 0 1 1 -90,0 45,45 0 1 1 90,0 z">
<animate
id="frame2"
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
<path
style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
id="triangle"
d="M 105,105 47,89 89,46 105,105 z">
<animate
id="frame3"
attributeName="display"
values="none;none;inline;none"
keyTimes="0;0.33;0.66;1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
</path>
</g>
</svg>

<input type="text" placeholder="指定帧 1-3" onblur="setFrames(this.value)">

<script>
var a = true
function pause(t) {
a ? t.pauseAnimations() : t.unpauseAnimations()
a = !a
}

var b = document.querySelector('#ff')
cc = {
1: '0',
2: '0.33',
3: '0.66'
}
function setFrames(value) {
b.pauseAnimations()
a = !a
b.setCurrentTime(cc[value])
}

</script>
```

svg 复制自题主给的文章...搜了一下 svg 直接可以指定 onclick，在浏览器里控制台里可以看到 svg 控件有 pauseAnimation 和 unpauseAnimations，顾名思义一个暂停一个不暂停，实现 播放和暂停功能。循环这个不知道是啥..本身就是循环的，指定帧发现了一个叫 setCurrentTime 的 API，这个 API 可以指定当前 SVG 的时间，每个<animate>块都指定了 values 和 keyTimes 对应时间的 display 值，建立一个映射表即可。

[whosesmile]

二三线本来就不好找人，咱就别这么拔高了。
另外都抱怨 BAT 招人造火箭，进门拧螺丝；公务员 985 研究生，进门做冷板凳，楼主你这有啥区别么。。。
实打实的出题，发挥的题目也扣你们业务的，咱实在点不好吗？你要是 SVG 动画就符合你们业务当我没说。

[markgor]

@ecuplxd
代码已经给出了，没写 use strict 就表明是 非严格模式。
另外就算严格模式，回答的答案可以直接说出错，
甚至可以直接问考官究竟是什么模式下...
实际工作中沟通也是很重要的一个环节...

另外 @Sapp 表达的是这么简单(不复杂)的东西，一大部分人不懂，懂得都要 40W 起.，何况 LZ 的提问...

而 LZ 的面试题想要找的是学习能力强的人。
想法是好的实际过程中这样基本把所有人筛走了，除非工资福利特别诱惑......

现在是招人难、求职难的年代。

[JoStar]

你既然可以看学习能力，就不要拿 SVG 做面试题，跟他说今后的业务方向上会使用 SVG 。

学习能力可以通过他的经历看出来：
1. 是否关注社区动态或自己参与开源社区活动
2. 公司的业务代码是否想办法优化了（封装、脚本做重复工作、尝试引入一些新技术）

vue 的熟悉程度问问 VDOM 、简单的 DIFF 、V-MODEL 就行了。

除了 SVG，符合楼主要求的人我招过不少，但是二三线城市，可能得看点运气~

[amundsen]

4 万我做

[libook]

就单能阅读英文文献这一点，北京也不好招。特别是 Vue 中文文档写得巨完善，导致入门门槛很低。

你可以试试，每个地区每个时期可能情况不一样，没准运气好遇到了呢。

[zhuziyi]

楼主你自己先做一下试试。

[HiCode]

@zhuziyi 去年实现功能了。不是来骗代码的，主要是这功能网上也找不到参考代码，比较好看到真正的代码能力。

[Flymachine]

也不是不行，看了一遍文章，写的还是很清楚的。楼主要的功能虽然文章里没直接说，但细读文章及其参考资料(W3C 对 animate 的说明文档)的话，还是可以在不断试错后成功实现的。
但这个时间就...因人而异了。

话说有这个心钻研 H5 实现而不是全凭框架的人，放到后端也是中高级的软件工程师了吧。
不知道能给多少钱...
价格给的够的话，返乡养老的高手应该还是能招到的。
此外的话，如果学历要求不高，自学成才 /立志自学尚未成才 但学历尴尬 /资历尴尬不好出去的自学派应该也是能找到的。

[Jinnn]

我是前端, 如果我有时间想学习提升, 我也不会想到深入钻研 svg
更愿意花时间去学学 各种框架的源码, node

[cereschen]

请勿重复造轮子
https://github.com/daybrush/scenejs

[HiCode]

@cereschen 你看我发的文章了吗？你是来发广告的吗？本来是直接 block 的，后来想想还是回复一下你，记得先看别人的东西再回复，别瞎 JB BB

[cereschen]

@HiCode 对你没有帮助我很遗憾 但是你骂人就不对了 或者你可以认为骂人是对的 没关系 人和人是不同的 我也不会计较

[a1248499257]

感觉假如我遇到这种面试题的话都是能写多少就写多少，好过给白卷