淘宝UED招聘题(前端开发部分含参考答案和面试官评语)

2023-11-15



题目1:JavaScript方面小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:


function Dog() {
       this.wow = function() {
               alert(’Wow’);
      }
       this.yelp = function() {
              this.wow();
       }
}
小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述,按示例的形式用代码来实现(提示关键字: 继承,原型,setInterval)。
function MadDog() {
this.yelp = function() {
          var self = this;
          setInterval(function() {
                self.wow();
          }, 500);
      }
 }
 MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

淘宝招聘官评语:
以上是较为规范的一个解法,我们希望通过此题,检查应聘者对JS的语言基础及的面向对象开发的理解程度。其中的难点在于闭包的应用。


题目2: CSS方面使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 5px solid red;
}
.box img {
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"  alt="" />
</div>
</body>
</html>


淘宝招聘官评语:
很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。
当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用hack。

题目3:XHMTL方面在不使用 border 样式的情况下,画出一条一px高的横线,在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
     <div style="height:1px;overflow:hidden;background:#000"></div>
</body>
</html>

淘宝招聘官评语:
此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果一致。解法有很多,以上是我们认为的最为合理的一种。


题目4:JavaScript方面请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。
Array.prototype.distinct = function() {
  var ret = [];
  for (var i = 0; i < this.length; i++) {
  for (var j = i+1; j < this.length;) {
  if (this[i] === this[j]) {
  ret.push(this.splice(j, 1)[0]);
  } else {
  j++;
  }
 }
 }
 return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());



淘宝招聘官评语:这是最为普通的解法。在数组元素数量不高的情况下,它的性能是可以接受的。相信一定有不少朋友有更好的解法,请告诉我们。


题外话:
从taobao的这次的考题来看,对web前台职位的技能要求,已经很明显——web标准设计。从4道题目来看,考结构的占了一题,考表现的占了一题,考行为的占了两题。从这个比重来看,JavaScript的重要性,不言而喻。但是恰恰现在很多的学习web标准设计的朋友,都一头扎进css的研究当中,甚至误以为css就是web标准设计的全部。这点还是比较值得思考的。


提到JavaScript,很多做前台的都比较恐惧。美工、页面都可以做到很漂亮,但是就是JavaScript的基础比较差。我想这个也是比较值得反思的点。页面的配色、风格、图片等设计应该属于美工的事情,而后面两层(以三层架构为例)又是程序员的事情,所以,如果将自己定位为一个“Frontend Software Engineer”的时候,我们到底应该学习和掌握一些什么。我想淘宝的这个份试卷,还是比较有指导意义的。(当然,如果能力和精力比较好的话,全能是最好的。)




当然,我的意思也不是说,作为FSE(Frontend Software Engineer),只要掌握这三个方面就可以了。其实还需要一些其他的相关知识,例如SEO(搜索引擎优化)、UE(用户体验)等方面,甚至软件设计模式等方面也需要一定的能力,才能建设出好的(强壮、易维护、易扩展)网站。对待知识,我认为:第一:要广,只要和自己的职业定位相关的,都要有一定的了解。第二:要深,对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力,才能更好地体现自己的价值。

转载于:https://my.oschina.net/miracle2013/blog/143987

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

淘宝UED招聘题(前端开发部分含参考答案和面试官评语) 的相关文章

随机推荐

  • enscape各种材质参数_它来了!Enscape专属素材库!

    ENSCAPE素材库 近两年风靡整个设计的渲染器 一款实时渲染软件Enscape 凭借入门低 成效快 效果逼真 从渲染界脱颖而出 用其他渲染器1 的时间渲出VRAY等老大哥级别90 的效果 作为建筑师的你会怎么选择呢 简单的分析了下渲染界最
  • MySQL connector/C++ 连接mysql效率低下解决

    这个问题 说解决也不算是被解决了 只能是让数据库插入的时候不会有像直接插入一样有那么多的问题了 我的解决方法是 开启mysql的事务 开始我也不知道是不是我的mysql配置优化的问题 WAMP统一安装 无限默认下一步的 在用PHP测试的时候
  • int与byte[]之间进行转换

    如何将int与byte 之间转换 int类型在内存中占4个字节 采用补码方式存储 而一个byte占一个字节 下面有两种方法进行转换 package cn fh vertxboot utils description int与Byte数组转换
  • 苹果app上架流程之傻瓜式教程剖析

    iOS开发者开发好一款APP之后 进行内测后没问题 下一步就是要上架AppStore了 一些开发者不知道该如何上架AppStore 下面 我们来说说iOS上架流程 以及如何快速上架AppStore 工具 1 iOS开发者账号 2 App U
  • Linux内存泄露案例分析和内存管理分享

    一 问题 近期我们运维同事接到线上LB 负载均衡 服务内存报警 运维同事反馈说LB集群有部分机器的内存使用率超过80 有的甚至超过90 而且内存使用率还再不停的增长 接到内存报警的消息 让整个团队都比较紧张 我们团队负责的LB服务是零售 物
  • Xamarin.Forms(移动应用)轮盘抽签软件(Android)

    该文章由我前面的文章https blog csdn net dabo 520 article details 129760956 spm 1001 2014 3001 5501改编而来 它是程序的核心 具体详细可自行前往观看 1 软件开发准
  • 基于Python的顺序表实现一元多项式相加

    具体代码 from operator import itemgetter class PolyList def init self self data def Add self e self data append e def Create
  • JavaWeb案例:实现注册和登录功能

    业务需求分析 在实际开发中 通常会有专门的人去跟客户进行沟通从而了解客户需要什么样的系统 之后由专业的美工将要做的系统以图片的形式表现出来 客户确认后作出一些静态的html demo页面 然后由软件开发人员创建相关数据库 编写代码将该静态页
  • python多线程_Python多线程爬虫,效率真的高

    有些时候 比如下载图片 因为下载图片是一个耗时的操作 如果采用之前那种同步的方式下载 那效率肯会特别慢 这时候我们就可以考虑使用多线程的方式来下载图片 多线程介绍 多线程是为了同步完成多项任务 通过提高资源使用效率来提高系统的效率 线程是在
  • PAT 乙级 1033 旧键盘打字 python

    题目 思路 因为坏键盘的输入是大写字母 遍历输入的字符 将输入字母的字符转换为大写 与坏键盘对比 如果 坏掉 当字母字符不在坏键盘之列 则是小写时 字符才能输出 代码 import sys bad key sys stdin readlin
  • Python语言实现批量视频分帧,保存视频帧

    本篇博客介绍利用python脚本实现视频分帧 并将每一帧保存到本地 主要基于opencv包来实现 在运行代码前确保opencv包已正确安装 下面是主要代码 import os import cv2 videos src path home
  • 大模型落地金融业,想象力在哪?

    金融大模型的难点在于 能否在产业中扎得更深 其颠覆性也更建立在 纵深到产业中去 赋能金融行业的长尾场景发展 以及重拾 金融信任 作者 思杭 编辑 皮爷 出品 产业家 从经济角度讲 整个金融业的数字化进程并非匀速 从技术角度讲 催化剂的出现会
  • TypeError: parse() got an unexpected keyword argument 'transport_encoding'

    import cv2时发现没有这个包 然后就安装一下 结果发现安装时出错了 错误如下 注 我是在pycharm里面配的anaconda 然后利用anaconda安装cv2 发现pip版本太低 我的是9 0 1 新的已经是10 0 1 于是就
  • STM32单片机学习记录3——GPIO(上)输出模式之点亮LED灯

    1 硬件准备 我使用的是市面上常见的黑色开发板 烧入器使用的是正点原子的无线烧入器 普通的烧入器也行 这个无所谓 开发板的原理图我放在下面链接里 我们需要知道相应的LED引脚 2 预期功能 通过函数实现LED灯的闪烁 这里直接采用模块化编程
  • EasyExcel简单使用

    EasyExcel简单使用 EasyExcel是阿里开源的一个Excel处理工具 官网这么介绍 EasyExcel是一个基于Java的 快速 简洁 解决大文件内存溢出的Excel处理工具 他能让你在不用考虑性能 内存的等因素的情况下 快速完
  • 存在重复元素

    存在重复元素 力扣 LeetCode 给定一个整数数组 判断是否存在重复元素 如果存在一值在数组中出现至少两次 函数返回 true 如果数组中每个元素都不相同 则返回 false 示例 1 输入 1 2 3 1 输出 true 示例 2 输
  • 什么是iiot全称

    iiot的全称是Industrial Internet of Things 翻译成中文便是工业物联网 它是指工业生产中各种设备 不论是工厂里的机器设备或者汽车飞机上的发动机 在这些设备上装置传感器 连接到无线网络终端以收集和共享数据 随着传
  • python3:Python 异常处理以及with 语句的使用

    try except else 语句 是处理异常公式 try 是有可能抛异常的代码块 except 抓取异常的类型 else 是指当没有抓到抛错 就运行这块代码 请看下下边的例子 try print 抓取的有可能的代码块 raise IOE
  • 静态变量与动态变量的定义与区别

    动态变量和静态变量的定义和区别如下 1 定义上 静态变量比动态变量在多一个关键字static 比如 动态变量 int i 静态变量 static int i 2 动态变量在子程序中 每次调用都会从它的初始值开始调用 而不管他在函数中经历了什
  • 淘宝UED招聘题(前端开发部分含参考答案和面试官评语)

    题目1 JavaScript方面小贤是一条可爱的小狗 Dog 它的叫声很好听 wow 每次看到主人的时候就会乖乖叫一声 yelp 从这段描述可以得到以下对象 function Dog this wow function alert Wow