前端外包測試題

筆試

簡答題

1. 寫出 5 個塊元素和 5 個行內元素
2. 寫出 3 個以上 CSS 的單位，2 個以上瀏覽器內核前綴
3. 一個有序列表，如何實現「奇數行」背景色爲 #fefefe？
4. 寫出所有 JS 的數據類型，以及 5 個 ES6+ 的新特性
5. if ([] == []) {console.log(1)} else {console.log(2)}; 的運行結果是什麼?
6. 下列元素的實際寬度（左邊框到右邊框且含邊框）是多少？

.item {
	box-sizing: border-box;
	width: 200px;
	padding: 0 10px;
	border: 1px solid #000;
}

7. 修改下面代碼，使得該元素內部文字水平垂直居中

.wrap {
	width: 100px;
	height: 100px;
	lint-height: 22px;
	font-size: 14px;
}

8. 寫出 5 個常見的 HTTP 狀態碼，並做簡單說明

實踐題

實現一個純 UI 組件，要求：

1. 封裝成 react 組件
2. 接收 title 參數，默認值爲 「Demo」
3. 返回一個 h1 標籤，文本內容爲 title

實現一個無序列表組件，要求：

1. 封裝成 react 組件，允許用 axios 等第三方庫
2. 數據從 api/list/ids 和 api/list/map接口獲取，返回數據格式如下：

// api/list/ids
["apple", "orange"]

// api/list/map
{
	apple: "An Apple",
	banana: "Bananana...",
	orange: "Orange juice",
	potato: "I'm not fruit"
}

3. 展示效果如下

1. an apple
2. orange juice

實現 A、B 兩個組件，要求：

1. A、B 均爲 react 組件，且 B 是 A 的子組件
2. A 中有一個「按鈕」，點擊彈出一個「Modal 對話框」
3. B 既是 Modal 組件，效果如下圖，點擊「確定」或「取消」關閉 Modal，內容自定義即可
4. 使用 antd 的 Button 和 Modal 組件
   

Antd 的 Form 組件如何實現「雙向綁定」？寫出關鍵點即可

寫出完整的 git 命令流程：新建一個 test.txt 文件並推到遠程倉庫

面試

1. 瀏覽器渲染機制
2. 絕對定位注意事項，清除浮動
3. 什麼是邊界塌陷？如何解決？
4. 如何實現一個列表，只有第一個元素沒有上邊框？
5. 什麼是 ES、DOM、BOM？
6. js 的 == 做了什麼？
7. 瞭解函數式編程嗎？
8. 說一下瀏覽器的緩存機制，以及如何利用
9. 什麼是 XSS，CSRF 攻擊？如何避免？
10. 說幾個常用的庫，lodash、moment、qs 等