博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2018阿里巴巴招聘笔试
阅读量:6272 次
发布时间:2019-06-22

本文共 3333 字,大约阅读时间需要 11 分钟。

记一次阿里巴巴集团招聘在线评测

请在40分钟内完成以下几道题目,遇到不熟悉的原生对象属性或者API,可以适当使用搜索引擎(注意:请不要直接搜索题目答案,自觉遵守规则)

  1. 给一个div:
复制代码

用原生JS让这个 div 可拖拽。

  1. 写一个类 EventEmitter,实现简单的发布订阅功能:
const e = new EventEmitter();     e.on('update', function(data) { console.log(data) });    e.emit('update', 'message');复制代码
  1. 实现一个搜索框的智能提示功能,可自己mock一些测试数据。(如输入”电脑“,显示一个提示列表:电脑游戏 、电脑壁纸、电脑管家、电脑VPN)
// 第一题function drag(){	let dragEl = document.getElementById('draggable');        dragEl.style.position = 'absolute';        // 如果需要兼容的话 需要做下attachEvent    dragEl.addEventListener('mousedown', function(event){    	let mouseX = event.pageX,        	mouseY = event.pageY,            elX = dragEl.offsetLeft || 0,            elY = dragEl.offsetTop || 0,            distanceX = mouseX - parseInt(elX),            distanceY = mouseY - parseInt(elY);    	        let moveCallback = function(moveEvent){        	let mouseX = moveEvent.pageX,            	mouseY = moveEvent.pageY;                            dragEl.style.left = mouseX - distanceX + 'px';            dragEl.style.top = mouseY - distanceY + 'px';        };    	dragEl.addEventListener('mousemove', moveCallback, false);                let upCallback = function(upEvent){        	dragEl.removeEventListener('mousemove', moveCallback);        	dragEl.removeEventListener('mouseup', upCallback);        };        dragEl.addEventListener('mouseup', upCallback, false);  	}, false);}复制代码
// 第二题function EventEmitter(){    this.events = [];}EventEmitter.prototype = {	constructor: EventEmitter,        sub: function(type, callback){    	if(!this.events[type]){    	    this.events[type] = [];    	}    	this.events[type].push(callback);    },        pub: function(type, arg){        if(this.events[type]){            for(let callback of this.events[type]){                callback && callback();            }        }    }};// 第三题// 以下是html模版 style什么没有具体写明白,大概写了下
// 如果是使用mvvm框架,这里用ngFor会好写点
// 以下是js代码let mockData = ['电脑游戏','电脑壁纸','电脑管家','电脑VPN'];let completeEl = document.getElementById('autocomplete'), inputEl = completeEl.childNodes[0], suggestListEl = document.getElementById('suggestList');let keyupCallback = function(event){ let val = event.target.value; let promise = new Promise(function(resolve, reject){ // 兼容需要增加下ActiveXObject let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 或者用readyState 4 判断 if(xhr.statue == 200){ resolve(JSON.parse(xhr.reponseText)); } }; // url未知 let url = '/api/get?suggest=' + val; xhr.open('GET', url, true); xhr.send(); }); promise.then(function(result){ // 需要增加一些result数据格式的判断,这里先不写了 let tmpl = []; for(let item of result){ if(item.indexOf(val) != -1){ tmpl[tmpl.length] = `
  • ${item}
  • `; } } suggestListEl.innerHTML = tmpl.join(''); });}function debounce(fn, time){ let timeout, self = this; return function(){ let args = [].slice.call(arguments); clearTimeout(timeout); setTimeout(function(){ fn.apply(self, args); }, time); }}inputEl.addEventListener('keyup', debounce(keyupCallback, 100), false);// 后续需要自己注意解绑事件inputEl.removeEventListener('keyup', keyupCallback); }, false); }, false);}复制代码

    转载地址:http://hmlpa.baihongyu.com/

    你可能感兴趣的文章
    Vue实例初始化的选项配置对象详解
    查看>>
    PLM产品技术的发展趋势 来源:e-works 作者:清软英泰 党伟升 罗先海 耿坤瑛
    查看>>
    vue part3.3 小案例ajax (axios) 及页面异步显示
    查看>>
    浅谈MVC3自定义分页
    查看>>
    .net中ashx文件有什么用?功能有那些,一般用在什么情况下?
    查看>>
    select、poll、epoll之间的区别总结[整理]【转】
    查看>>
    CSS基础知识(上)
    查看>>
    PHP中常见的面试题2(附答案)
    查看>>
    26.Azure备份服务器(下)
    查看>>
    mybatis学习
    查看>>
    LCD的接口类型详解
    查看>>
    Spring Boot Unregistering JMX-exposed beans on shutdown
    查看>>
    poi 导入导出的api说明(大全)
    查看>>
    Mono for Android 优势与劣势
    查看>>
    将图片转成base64字符串并在JSP页面显示的Java代码
    查看>>
    js 面试题
    查看>>
    sqoop数据迁移(基于Hadoop和关系数据库服务器之间传送数据)
    查看>>
    腾讯云下安装 nodejs + 实现 Nginx 反向代理
    查看>>
    试水区块链出版?纽约时报在招人了
    查看>>
    拥抱PostgreSQL,红帽再表态:SSPL的MongoDB坚决不用
    查看>>