2018阿里巴巴招聘筆試

wejoy_whoami發表於2019-02-18
阿里筆試

記一次阿里巴巴集團招聘線上評測

請在40分鐘內完成以下幾道題目，遇到不熟悉的原生物件屬性或者API，可以適當使用搜尋引擎（注意：請不要直接搜尋題目答案，自覺遵守規則）

  1. 給一個div：
    <div id="draggable" style="width: 200px; height: 200px; background: #000;"></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什麼沒有具體寫明白，大概寫了下
<div id="autocomplete">
	<input type="text" style="width:100px;height:28px;" />
   	// 如果是使用mvvm框架，這裡用ngFor會好寫點
   	<ul id="suggestList" style="position:absolute; top: 28px; left: 0;">
    	
    </ul>
</div>

// 以下是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] = `<li>${item}</li>`;
            }
        }

        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);
}複製程式碼

相關文章