From f7979e279d11d1394b4a41eb8b9dc307fcac31f4 Mon Sep 17 00:00:00 2001 From: DonaldIsFreak Date: Thu, 26 Dec 2013 17:42:12 +0800 Subject: [PATCH] Update Chinese-Tranditional README.md --- Chinese-Tranditional/README.md | 179 ++++++++++++++++++--------------- 1 file changed, 98 insertions(+), 81 deletions(-) diff --git a/Chinese-Tranditional/README.md b/Chinese-Tranditional/README.md index b1aa201..8eafc4f 100644 --- a/Chinese-Tranditional/README.md +++ b/Chinese-Tranditional/README.md @@ -1,6 +1,6 @@ # 前端工程師面試問題集 -@版本 2.0.0 +@版本 2.1.0 譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request. @@ -10,8 +10,19 @@ **注意：** 請記住一點，很多問題都是隨情況而變化，能引發很多有趣的討論，比直接的標準答案更能讓你瞭解此人的能力。 -####參考文獻 +## 目錄 + 1. [最初貢獻者](#contributors) + 1. [常見問題](#general) + 1. [HTML 規格問題集](#html) + 1. [CSS 規格問題集](#css) + 1. [JS 規格問題集](#js) + 1. [jQuery 規格問題集](#jquery) + 1. [程式碼問題集](#jscode) + 1. [有趣問題](#fun) + 1. [其他參考資料](#references) + +####[[⬆]](#toc) 最初貢獻者: 多數的問題都是從 [oksoclap](http://oksoclap.com/) 上的一個討論串截取出來，原創作人為 [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) 並由以下的人員所貢獻： * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com @@ -27,10 +38,11 @@ * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me * [@iansym](http://twitter.com/iansym) -### 常見問題： +####[[⬆]](#toc) 常見問題： * 你昨天或這週學習了什麼？ * 寫程式的哪部份最讓你感到很興奮或是有興趣？ +* 當你開發Web應用程式或網站時，針對UI、安全性、效能、SEO、維護性，以及技術，你考量的點是什麼？ * 說說你喜好的開發環境 (作業系統, 編輯器, 瀏覽器, 開發工具 … 之類) * 你可以描述你在開發一個網站時的工作流程嗎？ * 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？ @@ -58,7 +70,7 @@ * 描述標準和製定標準機構的重要性？ * 什麼是 FOUC？ 你怎麼避免 FOUC? -### HTML 規格問題集: +####[[⬆]](#toc) HTML 規格問題集: * `doctype` 做什麼用的？ * standards mode 和 quirks mode 有什麼不同？ @@ -70,7 +82,30 @@ * 考慮 HTML5 作為一個開放式的網站平台。HTML5 的 building blocks 有哪些？ * 請描述 cookies, sessionStorage 和 localStorage 的不同？ -### JS 規格問題集 +####[[⬆]](#toc) CSS 規格問題集： + +* 描述 "reset" 在 CSS 中做什麼, 如何用？ +* 描述 Floats 並解釋如何運作 +* 有哪些不同的 clearing 技術？哪個適用在哪種內容上？ +* 描述 CSS sprites, 你如何實作在網頁或網站上？ +* 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？ +* CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的？ +* 你怎麼讓你的網頁支援有功能限制的瀏覽器？ + * 你會使用什麼樣的技術/流程 ？ +* 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？ +* 你使用過 grid system 嗎？如果有的話？你較推薦哪個？ +* 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS? +* 你熟悉任何有關 SVG 嗎？ +* 你如何優化你的網頁以利於列印？ +* 在寫高效的 CSS 時，有什麼要注意的？ +* 使用 CSS preprocessors 的優點和缺點是什麼？ (SASS, Compass, Stylus, LESS) + * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors +* 你如何使用非標準字體來實作網頁設計？ + * Webfonts (font services 像是: Google Webfonts, Typekit …等等) +* 解釋瀏覽器如何按照 CSS selector 找到對應的element？ +* 解釋你所認知的box model，以及你如何在CSS告訴瀏覽器使用不同box model來呈現圖層？ + +####[[⬆]](#toc) JS 規格問題集： * 描述 event delegation * 描述 `this` 如果運作在 JavaScript 中 @@ -78,27 +113,26 @@ * 你如何測試你的 JavaScript？ * AMD vs. CommonJS? * 什麼是 hashtable? -* 什麼是 `undefined` 和 `undeclared` 變數？ +* 解釋下列程式碼為什麼不是IIFE: `function foo(){ }();`. (Immediately Invoked Function Expression,立即函式) + * 需要修改那裡使它成為IIFE? +* `null、`undefined`和 `undeclared`變數之間有什麼差異？ + * 你如何檢查？ * 什麼是 closure, 如何/為什麼使用? - * 你最喜愛並習慣用的 pattern 是怎樣的? argyle (Only applicable to IIFEs) * anonymous functions 典型的使用時機？ * 描述 "JavaScript module pattern"，你什麼情況會用到？ * 加分題：清楚地提到 namespacing. * 如果你的 module 沒有命名空間怎辦？ * 你如何架構你的程式碼？ (module pattern, classical inheritance?) * host objects 和 native objects 有何不同？ -* 有何不同: -```javascript -function Person(){} var person = Person() var person = new Person() -``` -* `.call` 和 `.apply` 有何不同？ +* `function Person(){}`、`var person = Person()`和`var person = new Person()`之間有何不同？ +* `.call` 和 `.apply`有何不同？ * 描述 `Function.prototype.bind`? * 你什麼時候優化你的程式？ * 你可以描述 inheritance 如何運作在 JavaScript？ * 你什麼情況會使用 `document.write()`？ * 多數的廣告產生仍然使用 `document.write()` 雖然這樣用會令人皺眉 * feature detection, feature inference, 和使用 UA string 有什麼不同？ -* 盡可能的詳述描述 AJAX +* 盡可能的詳述描述 AJAX。 * 描述 JSONP 如何運作 (且為何它不是真正的 AJAX) * 你是用過 JavaScript templating (樣板) ？ * 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等) @@ -121,50 +155,7 @@ function Person(){} var person = Person() var person = new Person() * function 的 arity 是什麼？ * 什麼是 `"use strict";`? 使用他的優點和缺點是什麼？ -### JS 程式範例： - -```javascript -~~3.14 -``` -問: 上述的statement(陳述式)會回傳什麼？ -**答: 3** - -```javascript -"i'm a lasagna hog".split("").reverse().join(""); -``` -問: 上述的statement(陳述式)會回傳什麼？ -**答: "goh angasal a m'i"** - -```javascript -( window.foo || ( window.foo = "bar" ) ); -``` -問: window.foo 的值是什麼？ -**答: "bar"** -只有在 window.foo 是 falsey 時會回傳此答案，否則的話會回傳window.foo - -```javascript -var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); -``` -問: 上述的兩個alerts的結果會是什麼？ -**答: "Hello World" & ReferenceError: bar is not defined** - -```javascript -var foo = []; -foo.push(1); -foo.push(2); -``` - -問: foo.length 的值是什麼？ -**答： `2` - -```javascript -var foo = {}; -foo.bar = 'hello'; -``` -問: foo.length 的值是什麼？ -**答： `undefined` - -### jQuery 規格問題集： +####[[⬆]](#toc) jQuery 規格問題集： * 描述 "chaining" * 描述 "deferreds" @@ -181,34 +172,60 @@ foo.bar = 'hello'; ```javascript $(".foo div#bar:eq(0)") ``` -* 'delegate()' 和 'live()' 有何不同？ + +####[[⬆]](#toc) 程式碼問題集: + +```javascript +modulo(12, 5) // 2 +``` + +問題：實作符合上述的modulo函式 + +```javascript +"i'm a lasagna hog".split("").reverse().join(""); +``` + +問題: 上述的statement(陳述式)會回傳什麼？ + +**答: "goh angasal a m'i"** + +```javascript +( window.foo || ( window.foo = "bar" ) ); +``` + +問題: window.foo 的值是什麼？ + +**答案: "bar"** +只有在 window.foo 是 falsey 時會回傳此答案，否則的話會回傳window.foo + +```javascript +var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); +``` + +問題: 上述的兩個alerts的結果會是什麼？ + +**答案: "Hello World" & ReferenceError: bar is not defined** + +```javascript +var foo = []; +foo.push(1); +foo.push(2); +``` + +問題: foo.length 的值是什麼？ + +**答案： `2`** -### CSS 規格問題集： - -* 描述 "reset" 在 CSS 中做什麼, 如何用？ -* 描述 Floats 並解釋如何運作 -* 有哪些不同的 clearing 技術？哪個適用在哪種內容上？ -* 描述 CSS sprites, 你如何實作在網頁或網站上？ -* 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？ -* CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的？ -* 你怎麼讓你的網頁支援有功能限制的瀏覽器？ - * 你會使用什麼樣的技術/流程 ？ -* 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？ -* 你使用過 grid system 嗎？如果有的話？你較推薦哪個？ -* 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS? -* 你熟悉任何有關 SVG 嗎？ -* 你如何優化你的網頁以利於列印？ -* 在寫高效的 CSS 時，有什麼要注意的？ -* 使用 CSS preprocessors 的優點和缺點是什麼？ (SASS, Compass, Stylus, LESS) - * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors -* 你如何使用非標準字體來實作網頁設計？ - * Webfonts (font services 像是: Google Webfonts, Typekit …等等) -* 姐是瀏覽器如何按照 CSS selector 找到對應的element？ - -### 可選的有趣問題： +####[[⬆]](#toc) 有趣問題： * 你寫過最酷的程式是什麼？你最自豪的是什麼？ * 你使用的開發工具中，你最喜歡的部分是什麼？ * 你有任何的 pet projects (個人開發的小專案)？ 什麼樣的？ * 你最喜歡 IE 瀏覽器的什麼特點？ + +####[[⬆]](#toc) 其他參考資料: + +* http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before +* http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ +* http://css-tricks.com/interview-questions-css/ \ No newline at end of file