首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

招募前端队友,坐标:北京望京酒仙桥

  •  
  •   yozman · 2018-05-11 17:44:43 +08:00 · 1709 次点击
    这是一个创建于 435 天前的主题,其中的信息可能已经有所发展或是发生改变。

    招募前端队友,坐标北京(望京酒仙桥)
    发展空间大,可谈期权

    岗位职责:

    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 的掌握

    image.png | left | 245x257

    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
    
    15 回复  |  直到 2018-05-16 18:51:47 +08:00
        1
    denano   2018-05-11 17:50:00 +08:00
    (0! + 0! + 0! + 0!)! 初中还是高中的时候就见过这题。。。
        2
    yozman   2018-05-11 18:24:26 +08:00
    @denano
    是个引子,实际变成了考察递归,递归又能牵扯出尾递归优化等知识点
        3
    paloalto   2018-05-11 21:39:15 +08:00 via iPhone
    便利蜂在望京啊?
        4
    yozman   2018-05-11 21:40:12 +08:00
    目前有太阳宫和恒通商务园两个办公地点
        5
    AlphaTr   2018-05-11 22:46:48 +08:00
    ```
    const output = (function () {
    const input = [0,0,0,0];
    return 24;
    })();

    console.log(output); // 24
    ```
    [手动狗头]
        6
    whyiyhw   2018-05-11 23:24:55 +08:00 via Android
    var len = input.length;
    return Number( '' + len/2 +len)
    [手动🐶]
        7
    yozman   2018-05-12 00:23:05 +08:00
    话说木有对前三道有想法的同学么
        8
    AEP203   2018-05-12 01:10:34 +08:00
    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);
    ```
        9
    yinjunjian0   2018-05-12 10:27:06 +08:00
    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>
        10
    AEP203   2018-05-12 12:21:37 +08:00
    4 应该这样合理点,不引入其他数字:
    ```javascript
    [0, 0, 0, 0]
    .map(a => (~a >>> a) >>> ~a)
    .map(a => ((a << a) << a) | (a << a))
    .reduce((a, b) => a + b);
    ```
        11
    nervdy   2018-05-12 16:38:17 +08:00
    写了下第二题,第三题原型什么的太久没看都忘的差不多了,回头还得去补补才行

    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>

    ```
        12
    yozman   2018-05-13 00:22:30 +08:00
    @AEP203
    3. 差些火候,50%
    4. 没 get 到点

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

    @nervdy
    赞,达到点上了,
    能问下 $slots.default 为什么要 filter 呢?
    有没有其他更通用的处理方法?
        13
    nervdy   2018-05-14 09:45:40 +08:00
    @yozman
    用 filter 是为了过滤掉文本节点
    通用的话就用 jsx 吧,写法都差不多
        14
    yozman   2018-05-15 02:29:36 +08:00
    @nervdy
    1. 文本节点节点是不应该过滤的
    2. 通用方面有没有想过封装一个渲染 vnode 的组件?该怎么实现呢?

    如果在找前端的工作机会,投份简历吧
        15
    nervdy   2018-05-16 18:51:47 +08:00
    @yozman
    不过滤文本节点的话空文本节点也会被我的代码生成为一项菜单,所以我写的时候主要是考虑到空文本节点,如果需要保留非空文本节点的文本节点的话就再加一个判断就好了
    你说的渲染 vnode 的组件具体是什么意思? 我没太理解,可以请教一下吗

    目前还没有换工作的打算,不过还是谢谢
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2059 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 02:33 · PVG 10:33 · LAX 19:33 · JFK 22:33
    ♥ Do have faith in what you're doing.