招募前端队友，坐标：北京望京酒仙桥

[yozman]

招募前端队友，坐标北京（望京酒仙桥）
发展空间大，可谈期权

岗位职责：

1. 负责公司前端业务开发(PC Web/Mobile H5/App)；
2. 建设工具、提炼组件、抽象框架，促进前端工程化、服务化；
3. 持续提升研发效率，保障线上产品质量；
4. 页面性能优化方案制定及开发工作；
5. Web 前沿技术研究和新技术调研；
6. 指导和协助其他前端工程师；

任职资格：

1. 熟练掌握 HTML5/CSS3/JS，能够解决浏览器显示兼容性问题；
2. 熟练掌握 angular、vue、react 其中一种 MVVM 框架，了解其实现原理；
3. 熟悉前端依赖管理，构建，发布流程相关的工具；
4. 优秀的 Troubleshooting 的能力，良好的沟通能力和团队协作精神；

有以下任一经验的，优先录用：

1. 熟悉函数式编程、熟练掌握 Rx.js 。
2. 有全栈开发经验或熟悉一门后端语言 Node、PHP、Ruby。
3. 移动端混合应用开发经验 React Native。
4. Vue 技术栈实践过子 app 级别模块拆分。
5. React 技术栈能够实现 redux middleware。
6. JQuery 技术栈能够实现 JQuery。

邮箱： [email protected]
彩蛋：答对前三任一面试题，可申请加入技术组

---

面试题

一、请使用 css 实现侧栏菜单无限子级缩进效果。

考察基本功，对 html/css 的掌握

html 结构如下

<ul>
  <li>
    <a>item-1</a>
    <ul>
      <li>
        <a>item-1-1</a>
      </li>
      <li>
        <a>item-1-2</a>
        <ul>
          <li>
            <a>item-1-2-1</a>
          </li>
          <li>
            <a>item-1-2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a>item-2</a>
  </li>
  <li>
    <a>item-3</a>
  </li>
</ul>

<style>
/**
 * 请完成效果
 * 每级依次缩进 20px
 * 文字大小为 16px
 */
</style>

二、请使用 Vue 实现面包屑组件。

考察对 jsx, slot, 虚拟 dom 的理解

效果：首页 > 一级 > 二级

<Breadcrumb separator=">">
  <span>首页</span>
  <span>一级</span>
  <span>二级</span>
</Breadcrumb>

请完成 Breadcrumb.vue

<template>
<!-- 请完成 -->
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    separator: {
      type: String,
      default: '/',
    },
  },
  // 请完成
};
</script>

三、请用装饰器实现继承。

开放性问题。考察对 es6 新特性与 js 原型链的掌握

// 1. 继承方式
class ClassA extends ClassB {}

// 2. 装饰器方式
@extend(ClassB)
class ClassA {}

/**
 * 请完成 extend 方法
 */
function extend() {}

四、请用 4 个 0 和数学算式求出 24。

趣味益智题。考察大脑灵活度

/**
 * 请完成以下函数
 */
const output = (function () {
  const input = [0,0,0,0];

})();

console.log(output); // 24

[denano]

(0! + 0! + 0! + 0!)! 初中还是高中的时候就见过这题。。。

[yozman]

@denano
是个引子，实际变成了考察递归，递归又能牵扯出尾递归优化等知识点

[paloalto]

便利蜂在望京啊？

[yozman]

目前有太阳宫和恒通商务园两个办公地点

[AlphaTr]

```
const output = (function () {
const input = [0,0,0,0];
return 24;
})();

console.log(output); // 24
```
[手动狗头]

[whyiyhw]

var len = input.length;
return Number( '' + len/2 +len)
[手动🐶]

[yozman]

话说木有对前三道有想法的同学么

[AEP203]

1,2 略。
3.
这题有问题，`super` 是个关键字，`classA` 如果不显式 `extends` 一个类的话， 在 `classA` 的 `constructor` 中调用 `super` 是会报语法错误的。
不考虑 `super`的话就这样:
```javascript
function extend(base) {
return function(_constructor) {
Object.setPrototypeOf(_constructor.prototype, base.prototype);
Object.setPrototypeOf(_constructor , base);
};
}
```
4.
```javascript
return input.reduce((a,b) => a+ (~b<< 29 >>> 30 << 1) , 0);
```

[yinjunjian0]

1. * {
padding: 0;
margin: 0;
}

.fir>li>ul {
color: red;
text-indent: 16px;
}

.sec>li>ul {
color: green;
text-indent: 32px;
}

2.
<template>
<div separator>
<span>首页{{separator}}</span>
<span>一级{{separator}}</span>
<span>二级</span>
</div>
</template>

<script>
export default {
name: 'Breadcrumb',
props: {
separator: {
type: String,
default: '>',
},
},
};
</script>

[AEP203]

4 应该这样合理点，不引入其他数字:
```javascript
[0, 0, 0, 0]
.map(a => (~a >>> a) >>> ~a)
.map(a => ((a << a) << a) | (a << a))
.reduce((a, b) => a + b);
```

[nervdy]

写了下第二题，第三题原型什么的太久没看都忘的差不多了，回头还得去补补才行

Breadcrumb.vue
```
<script>
export default {
name: 'Breadcrumb',
props: {
separator: {
type: String,
default: '/'
}
},
render (h) {
let el = this.$slots.default.filter(e => e.tag)
let ctx = [].concat(...el.map(e => [e, h('span', this.separator)])).slice(0, -1)
return h('div', ctx)
}
}
</script>

```

[yozman]

@AEP203
3. 差些火候，50%
4. 没 get 到点

@yinjunjian0
1. 注意是无限子级缩进
2. 组件完全没法复用

@nervdy
赞，达到点上了，
能问下 $slots.default 为什么要 filter 呢？
有没有其他更通用的处理方法？

[nervdy]

@yozman
用 filter 是为了过滤掉文本节点
通用的话就用 jsx 吧，写法都差不多

[yozman]

@nervdy
1. 文本节点节点是不应该过滤的
2. 通用方面有没有想过封装一个渲染 vnode 的组件？该怎么实现呢？

如果在找前端的工作机会，投份简历吧

[nervdy]

@yozman
不过滤文本节点的话空文本节点也会被我的代码生成为一项菜单，所以我写的时候主要是考虑到空文本节点，如果需要保留非空文本节点的文本节点的话就再加一个判断就好了
你说的渲染 vnode 的组件具体是什么意思？ 我没太理解，可以请教一下吗

目前还没有换工作的打算，不过还是谢谢