【轉】 關于Web前端開發,附:(百度web前端筆試面試題目)
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
[p]隨著各大互聯網公司設立了web前端開發工程師、設計工程師等職位,web前端越來越得到互聯網企業的認可。而且其重視程度與地位也隨著瀏覽器 端的富客戶端的體現而日益提高。 眼前對html5的未來和走向,業內的預測是會和flash、silverlight等相結合,從而取代傳統的客戶端應用程序。而實現這個目標的客戶端核 心工作是有web前端工程師來完成的。 從另一個角度,對于web產品來說,交互和用戶體驗是產品的第一價值,這部分價值的體現就是在web前端。可以說web前端是一個web產品的長相和談 吐、行為。[/p]
[p] 下面就簡單的說明一下web前端的組成部分。[/p] [p][b]1. ui設計部分[/b][/p] [p] 這是web產品化的第一步。這個部分通常在稍大型的公司里,被單獨設立為一個部門或者一些人來工作。主要是要掌握photo, ai,可以很快的將創意轉化為平面設計圖,并制作png等小圖片。 同時,ui設計還要預包含用戶交互設計的元素,如何和用戶交互的基本原型等。[/p] [p][b]2. html/css,頁面靜態化[/b][/p] [p]這是web產品化的2步,就是將ui設計師的設計圖切成靜態頁面。這里的“切”不是單純的切,而是使用css里面背景色和邊框樣式等方式對設計原稿 進行解讀,并形成符合web標準的html代碼。這里web前端還需要將圖片、html頁面以及css樣式進行合理的文件分布安排等[/p] 3.javascript, as 客戶端動態化 這是web產品化的3步,工程師使用dom操作、ajax,實現數據和服務端的通信以及本地樣式的切換。同時,由于javascript、 as是一門動態語言,所以這部分的編碼要求web前端工程師有較好的編碼習慣,能寫高效率的oop代碼,并對代碼進行壓縮上線以降低帶寬消耗等。 [p][b]4.flash、silverlight、video 多媒體化[/b][/p] [p]這部分針對不同web產品有不同的要求,通常要求是可以使用flash和web、server進行交互,并對flash進行設計與開發。[/p] [p][b]5.php、java等cgi, 服務端通信基本知識和編碼[/b][/p] [p]這部分主要是更好的使用ajax等技術,了解服務端的工作方式將更有利于web前端工程師工作的開展。通常優秀的web前端工程師都是對服務端的一 種開發語言很了解。[/p] [p]下面是webryan整理的百度web前端筆試和面試的一些題目和過程,提供給大家借鑒。[/p] [p]百度web前端筆試試卷上的題目:[/p] [p]1.判斷字符串是否是這樣組成的,第一個必須是字母,后面可以是字母、數字、下劃線,總長度為5-20[br]2.截取字符串abcdefg的efg[br]3.讓一個input的背景顏色變成紅色[br]4。給一個頁面,寫html css[br]5。div的高寬等于瀏覽器可見區域的高寬,瀏覽器滾動,div始終覆蓋瀏覽器的整個可見區域[br]6。判斷一個字符串中出現次數最多的字符,統計這個次數[br]7。ie與ff腳本兼容性問題[/p] 又重新問的是1,4,6,7,這次問出題者的意圖,并且讓給出7的更多答案,以及ie ff不兼容的原因[br]然后看了看簡歷,沒有問簡歷上的項目,而是讓自己隨便談談[br]1對于web客戶端技術未來趨勢發展談談看法[br]javascript + ajax=ria[br]adobe flash as 3[br]flex[br]sliveright[br]2web開發團隊人員應該如何分工協作[br]布局 css 腳本[br]比如腳本人員長期的積累可能鑄造類型yui這樣的產品級腳本庫(亮點)[br]3web開發曾經的團隊有沒有別人遇到問題,什么問題,向你請教[br]4如果要實習,什么時候可以[br]5自己在開發的過程中遇到什么問題,談談看法[br]6web開發腳本開發環境用什么、調試用什么[br]試過aptana,現在就用editplus[br]調試肯定用firebug,ie下看頁面dom用ieinspector[br]7如果有個新技術,現在需要掌握,你會怎么做[br]新技術的發現我一般是通過rss工具,比如我用googlereader[br]每天有半個小時左右在看最新的資訊、技術走向[br]發現新技術,首先有個大概了解,如果有深入的必要[br]我一般會看他的官網,比如jquery,我會搜索到jquery.com,然后看docs、samples[br]如果要用到項目中,有困難的問題,我會svn得到最新的這個技術的源碼,深入跟蹤進去,看實現原理[br]一般現在涌現的技術都是opensource [p]提問時間[br]1百度web開發腳本是否有做類似yui庫的打算[br]2百度web開發工程師打算招多少人[/p] [p][b]百度電話二面回憶 web開發部–web開發工程師[/b][/p] [p]首先是自我介紹[br]然后談談做的web項目[br]然后開始問技術問題[/p] [p]前端開發的優化問題[br]答:[br]產品發布時,js的壓縮,即函數名替換、整個文件壓縮成一行[br]css開發的時候 注釋寫清楚,先有個base.css,然后根據不同頁面需要再加css,發布的時候將css中的一個定義寫成一行,目的是壓縮文件大小[br]最終發布的時候甚至可以將css,js分別壓縮成一個文件,甚至css、js通過技巧壓縮到一個里邊(亮點)[br]這樣的目的是,減少用戶訪問web產品的http連接數[/p] [p]web前端產品的開發流程[br]答:首先根據產品的定位、用戶群,確定配色,然后紙上設計整體布局,然后png或者psd出效果圖,切出需要的小圖片,然后手寫代碼div+css構造出 頁面,然后根據功能寫腳本[br]參考126郵箱首頁,將所有小圖片放到一個圖片中,通過css的background-position實現頁面,還是為了優化,減少http連接數[/p] 規避javascript多人開發函數重名問題[br]答:首先是通過命名規范,比如根據不同的開發人員實現的功能,在函數名加前綴,雖然函數名看起來復雜,發布的時候還是可以替換,從而優化。[br]還有一種辦法是,每個開發人員都把自己的函數封裝到類中,然后調用的時候即使函數名相同,但是因為是要類.函數名來調用,所以也減少了重復的可能性。 javascript面向對象中繼承實現[br]答:我是用prototype.js extend.js擴展[br]然后子類中parent.initialize()…[br]答的不好[br]正確答案: [p]// 1. 構造器[br]function animal() {};[br]function mammal() {};[br]function canine() {};[br]function dog() {};[br]// 2. 原型鏈表[br]mammal.prototype = new animal();[br]canine.prototype = new mammal();[br]dog.prototype = new canine();[/p] [p]prototype.js實現的基本原理[br]答:[br]將功能封裝[br]比如ajax.request,還是有判斷瀏覽器的代碼;position這樣的實現頁面元素位置的計算[/p] prototye太大,如果一個頁面功能不需要這樣的,自己實現,怎么做[br]答:首先頁面、css、腳本分離之后,腳本中將整個模塊功能寫成一個類var do={}[br]其中初始化函數init:function(){},然后最后做do.init()[br]其中init會對頁面上form中需要交互的元素綁定事件,比如$(’input1′).onclick=function(){} [p]ie、ff下面腳本的區別[br]答:[br]1.ie有outerhtml,ff沒有[br]2.頁面元素id,ie可以直接取,ff必須document.getelementbyid()[br]3.ajax里邊ff是new xmlhttprequest,而ie是[br]try new activexobject(’msxml2.xmlhttp’) try new activexobject(’microsoft.xmlhttp’)[/p] [p]ff下面實現outerhtml[br]答:.parenet.firstchild .parent.innerhtml[br]這個沒答好[br]正確答案:原理是,get:取到這個標簽的tagname,然后屬性循環構造成這個標簽的屬性[br]set:把字符串用insertbefore插入到這個元素前面,然后removechild這個元素[/p] [br] [p]ie、ff下面css的解釋區別[br]答:[br]1.png透明背景,ff下面沒有問題,ie需要用濾鏡通道[br]2.z-index在ie、ff下面的解釋問題,[/p] [p]ie會認為第一個z-index=0[br]3.長字符串,word-wrap:break-all可以解決ie,但是ff需要overflow:hidden才行[br]馮舒婭補充:[br]1、有些標簽在ff中不能用,比如button[br]2、濾鏡[br]3、鼠標cursor:hand cursor:pointer[br]4、div的高度自適應[br]5、對box模型解析不一樣[br]6、ul、ol的padding和margin[/p] ie都能識別*,標準瀏覽器(如ff)不能識別*;[br]ie6能識別*,但不能識別 !important;[br]ie7能識別*,也能識別 !important;[br]ff不能識別*,但能識別 !important;[br]例如style=”*width:10px;!important width:20px;”[br]這樣在ie6下寬度為10px,在ie7下寬度時20px web前端技術的展望[br]答:javascript ajax;flash as;flex;sliveright[br][b]附上網上的百度web開發工程師筆試問題集[/b] [br]1編寫一個方法 求一個字符串的字節長度 [p]2編寫一個方法 去掉一個數組的重復元素[/p] [p]3說出3條以上ff和ie的腳本兼容問題[br]ie 有children,ff沒有;ie有parentelement,ff沒有;ie有innertext,outertext,outerhtml,ff 沒有;ff有htmlelement,htmldivelement,xmldocument,documentfragment,node, event,element等等,ie沒有;ie有數據島,ff沒有;ie跟ff創建httprequest實例的方法不一樣。。等等。。[br]4用腳本寫去除字符串的前后空格[/p] [p]string.prototype.trim = function(mode)[br]{//前后去空格[br]if (mode==’left’) {[br]return ((this.charat(0) == ” “ && this.length > 0) ? this.slice(1).trim(’left’) : this);[br]} else[br]if (mode == ’right’) {[br]return ((this.charat(this.length - 1) == ” “ && this.length > 0) ? this.slice(0, this.length - 1).trim(’right’) : this);[br]} else {[br]return this.trim(’left’).trim(’right’);[br]}[br]};[/p] [p]5算出字符串中出現次數最多的字符是什么,出現了多少次[/p] [/p] [p]6寫出3中使用this的典型應用[br]在html元素事件屬性中inline方式使用this關鍵字:[/p] [p]7.最后一個問題是,如何制作一個combo選項,就是可以輸入可以下拉菜單選擇。[/p] [p]這個網上有很多成品,主要是通過絕對定位和相對定位結合的方式,改造原有的select 標簽和input標簽的方法。[/p] 附上javascript正則表達式的基本知識:[br]g: 全局匹配[br]i: 忽略大小寫[br]^ 匹配一個輸入或一行的開頭,/^a/匹配”an a”,而不匹配”an a”[br]$ 匹配一個輸入或一行的結尾,/a$/匹配”an a”,而不匹配”an a”[br]* 匹配前面元字符0次或多次,/ba*/將匹配b,ba,baa,baaa[br]+ 匹配前面元字符1次或多次,/ba*/將匹配ba,baa,baaa[br]? 匹配前面元字符0次或1次,/ba*/將匹配b,ba[br](x) 匹配x保存x在名為$1…$9的變量中[br]x|y 匹配x或y[br]{n} 精確匹配n次[br]{n,} 匹配n次以上[br]{n,m} 匹配n-m次[br][xyz] 字符集(character set),匹配這個集合中的任一一個字符(或元字符)[br][^xyz] 不匹配這個集合中的任何一個字符[br][b] 匹配一個退格符[br]b 匹配一個單詞的邊界[br]b 匹配一個單詞的非邊界[br]cx 這兒,x是一個控制符,/cm/匹配ctrl-m[br]d 匹配一個字數字符,/d/ = /[0-9]/[br]d 匹配一個非字數字符,/d/ = /[^0-9]/[br]n 匹配一個換行符[br]r 匹配一個回車符[br]s 匹配一個空白字符,包括n,r,f,t,v等[br]s 匹配一個非空白字符,等于/[^nfrtv]/[br]t 匹配一個制表符[br]v 匹配一個重直制表符[br]w 匹配一個可以組成單詞的字符(alphanumeric,這是我的意譯,含數字),包括下劃線,如[w]匹配”$5.98″中的5,等于[a-za- z0-9][br]w 匹配一個不可以組成單詞的字符,如[w]匹配”$5.98″中的$,等于[^a-za-z0-9[br]舉例:驗證email[br]var myreg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;[br]if(myreg.test(stremail)) return true; 該文章在 2010/7/4 0:32:58 編輯過 |
關鍵字查詢
相關文章
正在查詢... |