阿里巴巴2016前端開發工程師筆試
1:下列事件哪個不是由滑鼠觸發的事件（）
正確答案: D 你的答案: D (正確)
A、click
B、contextmenu
C、mouseout
D、keydown 解析：
click是滑鼠點選事件
contextmenu 是當瀏覽者按下滑鼠右鍵出現選單時或者通過鍵盤的按鍵觸發頁面選單時觸發的事件
[ 試試在頁面中的 <body> 中加入onContentMenu="return false" 就可禁止使用滑鼠右鍵了 ]
mouseout 事件會在滑鼠指標移出指定的物件時發生。
keydown 事件會在使用者按下一個鍵盤按鍵時發生，由鍵盤觸發
2:下面關於CSS佈局的描述，不正確的是？
正確答案: D 你的答案: D (正確)
A、塊級元素實際佔用的寬度與它的 width 屬性有關；
B、塊級元素實際佔用的寬度與它的 border 屬性有關；
C、塊級元素實際佔用的寬度與它的 padding 屬性有關；
D、塊級元素實際佔用的寬度與它的 background 屬性有關。
解析：
塊級元素的寬度是指塊級元素內容區、左右內邊距、左右邊框和左右外邊距的寬度之和。而塊級元素內容區的寬度由該元素的width屬性來表示（或設定）。(w3c標準盒子模型)
3:下面有關html的描述，不推薦的是？
正確答案: B 你的答案: B (正確)
A、在頁面頂部新增 doctype宣告；
B、在 </head> … <body> 中間插入 HTML 程式碼；
C、避免使用 <font> 標籤；
D、使用 <table> 元素展現學生成績表等資料。
解析：
HTML程式碼是插入在<body>..</body>之間，因為body是頁面的主體部分，我們瀏覽網頁的時候除了標題之外的東西都是在body中呈現的；
建議使用CSS樣式（代替 <font>）來定義文字的字型、字型顏色、字型尺寸。
4:瀏覽器在一次 HTTP 請求中，需要傳輸一個 4097 位元組的文字資料給服務端，可以採用那些方式?
正確答案: E 你的答案: E (正確)
A、存入 IndexdDB
B、寫入 COOKIE
C、放在 URL 引數
D、寫入 Session
E、使用 POST
F、放在 Local Storage 解析：
IndexdDB 是 HTML5 的本地儲存，把一些資料儲存到瀏覽器（客戶端）中，當與網路斷開時，可以從瀏覽器中讀取資料，用來做一些離線應用。
Cookie 通過在客戶端 ( 瀏覽器 ) 記錄資訊確定使用者身份，最大為 4 kb 。
url 引數用的是 get 方法，從伺服器上獲取資料，大小不能大於 2 kb 。
Session 是伺服器端使用的一種記錄客戶端狀態的機制 。
post 是向伺服器傳送資料，資料量較大。
local Storage 也是 HTML5 的本地儲存，將資料儲存在客戶端中（一般是永久的）。
5:下面哪個屬性不會讓 div 脫離文件流（normal flow）？
正確答案: C 你的答案: C (正確)
A、position: absolute;
B、position: fixed;
C、position: relative;
D、float: left;
解析：
A：position: absolute;
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位；都絕對定位了，肯定脫離了文件流。。
B:position: fixed;
生成絕對定位的元素，相對於瀏覽器視窗進行定位;相對於瀏覽器了，也和正常順序排下來沒什麼關係。。
C:position: relative;
生成相對定位的元素，相對於其正常位置進行定位。生成相對定位，也就是說還在原本的上下左右之間，上下左右的元素都不變，so這個沒有能脫離文件流。。就這個了
D:float: left;都浮動出去了，還上哪保持原位置去。。
6:javascript 語言特性中，有很多方面和我們接觸的其他程式語言不太一樣，比如說，javascript語言實現繼承機制的核心就是 ___1____ ，而不是Java語言那樣的類式繼承。
Javascript 解析引擎在讀取一個Object的屬性的值時，會沿著 ____2____向上尋找，如果最終沒有找到，則該屬性值為_____3_____ ； 如果最終找到該屬性的值，則返回
結果。與這個過程不同的是，當javascript解析引擎執行“給一個Object的某個屬性賦值”的時候，如果當前Object存在該屬性，則改寫該屬性的值，如果當前的Object本身並不
存在該屬性，則賦值該屬性的值 。
答案：
1、prototype
2、原型鏈
3、undefined
7:填寫內容讓下面程式碼支援a.name = “name1”; b.name = “name2”;
function obj(name){
_____1_____
}
obj. ______2_____ = "name2";
var a = obj("name1");
var b = new obj;
答案：
1、 if(name){ this.name = name;}return this;
2、prototype.name
解析：
function obj(name){
if(name){ //判斷obj例項有沒有name屬性，如果有則給this物件，如果沒有就從原型上找name 。
this.name = name;
}
return this;
}
obj.prototype.name = "name2";
var a = obj("name1");
var b = new obj;
console.log(a.name); // name1
console.log(window.name); // name1
console.log(b.name); // name2
//一般函式直接呼叫，預設this執行全域性window|global
//通過obj('name1')呼叫，返回this引用，並傳給a, 此時a等於window物件，即可輸出屬性name值
//new操作， new obj 等價於 new obj() ,例項化一個物件，這時this指向obj,要拿到b.name的值
//需要保證name屬性存在，屬性查詢原則是先查詢當前例項有沒有屬性，如果有就直接使用，如果
//沒有就到原型上面找，再沒有就接著原型鏈一步一步，這裡為了和a.name作屬性區別，使用了if(name)有條件地構建this的屬性name
//所以，現在例項name屬性提供給a使用，原型上的name提供給b使用。
8:輸出物件中值大於2的key的陣列
var data = {a: 1, b: 2, c: 3, d: 4};
Object.keys(data).filter(function(x) { return ____1_____;})
期待輸出：[“c”,”d”]
答案：data[x]>2
解析：
Object.keys(Object)
Array.filter(function)
Object是包含屬性和方法的物件， 可以是建立的物件或現有文件物件模型 (DOM) 物件。
Object.keys(object)的返回值是 一個數組，其中包含物件的可列舉屬性和方法的名稱。
Array.filter(function)對陣列進行過濾返回符合條件的陣列。
Object.keys(data)的返回值為陣列["a","b","c","d"]，經過 filter(function(x) { return ; })過濾，返回值大於2的key的陣列。x為返回陣列的屬性名稱即“a"、"b"、"c"、“d”，則對應的屬性值為data[x]，比較語句為data[x]>2。
9：請實現一個fibonacci函式，要求其引數和返回值如下所示：
/**
*@desc: fibonacci
*@param: count {Number}
*@return: result {Number} 第count個fibonacci值，計數從0開始
fibonacci數列為：[1, 1, 2, 3, 5, 8, 13, 21, 34 …]
則getNthFibonacci(0)返回值為1
則getNthFibonacci(4)返回值為5
*/
function getNthFibonacci(count) {
}
答案：
此題應該避免使用遞迴的方法，因為當count較大時，遞迴的方法耗時較長。
故考慮使用迭代法，可以使用陣列記錄每一項。
但此題只需要用到前面兩項，從節約空間的角度講不需要開闢陣列。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
10：實現如下頁面佈局。核心區域左側自適應，右側固定寬度 200px
答案：
css程式碼：
body {
margin: 0;
}
.fn-clear:after {
content: " ";
clear: both;
display: block;
font-size: 0;
visibility: hidden;
height: 0;
}
.fn-clear {
zoom: 1;
}
.container {
padding: 10px;
}
.header {
background: #eee;
position: relative;
margin-bottom: 10px;
}
.logo {
width: 100px;
height: 100px;
float: left;
background: #f60;
}
.username {
position: absolute;
right: 10px;
bottom: 10px;
}
.main {
margin-bottom: 10px;
}
.side-bar {
width: 200px;
float: right;
background: #ccc;
}
.content {
margin-right: 200px;
background: #f6f6f6;
}
.footer {
background: #999;
}
html程式碼：
<div class="container">
<div class="header fn-clear">
<div class="logo">logo</div>
<div
class="username">[email protected]</div>
</div>
<div class="main">
<div
class="side-bar">menu</div>
<div class="content">左側內容</div>
</div>
<div class="footer">
footer
</div>
</div>
拓展知識：本題還可以用以下方法：
<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
<title>alibaba</title>
<style type="text/css">
.header{
overflow: hidden;
margin: 5px;
border: 1px solid #000;
height: 70px;
}
.main{
margin: 5px;
overflow: hidden;
/* border: 1px solid #000;*/
}
.footer{
text-align: center;
margin: 5px;
border: 1px solid #000;
}
.logo{
width: 50px;
height: 50px;
float: left;
margin: 10px;
border: 1px solid #000;
}
.username{
border: 1px solid #000;
float: right;
width: 140px;
height: 20px;
margin-top: 40px;
margin-right: 10px;
text-align: right;
}
.column{
border: 1px solid #000;
}
.left{
float: left;
width: 100%;
}
.right{
float: left;
width: 200px;
margin-left: -204px;
}
.real{
margin-right: 210px;
border: 1px solid blue;
height: 300px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">logo</div>
<div class="username">使用者名稱</div>
</div>
<div class="main">
<div class="left column">
<div class="real">content - 自適應寬度</div>
</div>
<dis class="right column">aside - 定寬200px</div>
</div>
<div class="footer">footer</div>
</body>
</html>
參考了淘寶的雙飛翼佈局，column類均左浮動，側邊欄aside通過負值左外邊距得以和left column共處一行，而真正的自適應內容則放置在left column的內部，
使用右外邊距得以和right column保持固定距離。
雙飛翼結構類似：(參考：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html)
html程式碼:
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
css程式碼:
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
background:#888;
height:200px;
}
.left,.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
結果如圖所示：
核心知識：
margin-left = - 它的寬度時，它就會向上跑到main 的最右面；
margin-left:-100%，它就會跑到main的最左面。
注意：main是：float:left;width:100%;，即它也是左浮動，且是100%寬度。）
main_body裡的內容是設定Main與左右的距離、高度、背景顏色等。
另外的型別：(參考：http://blog.163.com/[email protected]/blog/static/1702286352011535255846/)
<div style="width:500px; margin:0 auto; border:solid 1px #f3f4ec;">
<div style="width:100%; height:40px; background-color:#eaf691; float:left;"></div>
<div style="width:100px; height:30px; float:left; background-color:#bed8f9;margin-left:-100px;">①</div>
<div style="width:100px; height:30px; float:left; background-color:#bed8f9;margin-left:-100%;">②</div>
</div>
解釋：
如後面的兩個div，它們被包裹在一個定寬的大div中，且它們都是左浮動（float:left），且它們都是定寬，
這時，給它們一個負的左外邊距（margin-left<0），
如果margin-left = - 它的寬度時，它就會向上跑到第一個div 的最右面；
如果margin-left:-100%，它就會跑到第一個div的最左面。
注意：第一個div的屬性是：float:left;width:100%;，即它也是左浮動，且是100%寬度。）
結果顯示如下：
