隨著各大互聯網公司設立了web前端開發(fā)工程師、設計工程師等職位，web前端越來越得到互聯網企業(yè)的認可。而且其重視程度與地位也隨著瀏覽器 端的富客戶端的體現而日益提高。 眼前對html5的未來和走向，業(yè)內的預測是會和flash、silverlight等相結合，從而取代傳統(tǒng)的客戶端應用程序。而實現這個目標的客戶端核 心工作是有web前端工程師來完成的。 從另一個角度，對于web產品來說，交互和用戶體驗是產品的第一價值，這部分價值的體現就是在web前端。可以說web前端是一個web產品的長相和談 吐、行為。

下面就簡單的說明一下web前端的組成部分。

1. ui設計部分

這是web產品化的第一步。這個部分通常在稍大型的公司里，被單獨設立為一個部門或者一些人來工作。主要是要掌握photo, ai,可以很快的將創(chuàng)意轉化為平面設計圖，并制作png等小圖片。 同時，ui設計還要預包含用戶交互設計的元素，如何和用戶交互的基本原型等。

2. html/css,頁面靜態(tài)化

這是web產品化的2步，就是將ui設計師的設計圖切成靜態(tài)頁面。這里的“切”不是單純的切，而是使用css里面背景色和邊框樣式等方式對設計原稿 進行解讀，并形成符合web標準的html代碼。這里web前端還需要將圖片、html頁面以及css樣式進行合理的文件分布安排等

3.javascript, as 客戶端動態(tài)化
這是web產品化的3步，工程師使用dom操作、ajax，實現數據和服務端的通信以及本地樣式的切換。同時，由于javascript、 as是一門動態(tài)語言，所以這部分的編碼要求web前端工程師有較好的編碼習慣，能寫高效率的oop代碼，并對代碼進行壓縮上線以降低帶寬消耗等。

4.flash、silverlight、video 多媒體化

這部分針對不同web產品有不同的要求，通常要求是可以使用flash和web、server進行交互，并對flash進行設計與開發(fā)。

5.php、java等cgi, 服務端通信基本知識和編碼

這部分主要是更好的使用ajax等技術，了解服務端的工作方式將更有利于web前端工程師工作的開展。通常優(yōu)秀的web前端工程師都是對服務端的一 種開發(fā)語言很了解。

下面是webryan整理的百度web前端筆試和面試的一些題目和過程，提供給大家借鑒。

百度web前端筆試試卷上的題目：

1.判斷字符串是否是這樣組成的，第一個必須是字母，后面可以是字母、數字、下劃線，總長度為5-20
2.截取字符串abcdefg的efg
3.讓一個input的背景顏色變成紅色
4。給一個頁面，寫html css
5。div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區(qū)域
6。判斷一個字符串中出現次數最多的字符，統(tǒng)計這個次數
7。ie與ff腳本兼容性問題

又重新問的是1，4，6，7，這次問出題者的意圖，并且讓給出7的更多答案，以及ie ff不兼容的原因
然后看了看簡歷，沒有問簡歷上的項目，而是讓自己隨便談談
1對于web客戶端技術未來趨勢發(fā)展談談看法
javascript + ajax=ria
adobe flash as 3
flex
sliveright
2web開發(fā)團隊人員應該如何分工協(xié)作
布局 css 腳本
比如腳本人員長期的積累可能鑄造類型yui這樣的產品級腳本庫（亮點）
3web開發(fā)曾經的團隊有沒有別人遇到問題，什么問題，向你請教
4如果要實習，什么時候可以
5自己在開發(fā)的過程中遇到什么問題，談談看法
6web開發(fā)腳本開發(fā)環(huán)境用什么、調試用什么
試過aptana，現在就用editplus
調試肯定用firebug，ie下看頁面dom用ieinspector
7如果有個新技術，現在需要掌握，你會怎么做
新技術的發(fā)現我一般是通過rss工具，比如我用googlereader
每天有半個小時左右在看最新的資訊、技術走向
發(fā)現新技術，首先有個大概了解，如果有深入的必要
我一般會看他的官網，比如jquery，我會搜索到jquery.com，然后看docs、samples
如果要用到項目中，有困難的問題，我會svn得到最新的這個技術的源碼，深入跟蹤進去，看實現原理
一般現在涌現的技術都是opensource

提問時間
1百度web開發(fā)腳本是否有做類似yui庫的打算
2百度web開發(fā)工程師打算招多少人

百度電話二面回憶 web開發(fā)部–web開發(fā)工程師

首先是自我介紹
然后談談做的web項目
然后開始問技術問題

前端開發(fā)的優(yōu)化問題
答:
產品發(fā)布時，js的壓縮，即函數名替換、整個文件壓縮成一行
css開發(fā)的時候 注釋寫清楚，先有個base.css，然后根據不同頁面需要再加css，發(fā)布的時候將css中的一個定義寫成一行，目的是壓縮文件大小
最終發(fā)布的時候甚至可以將css，js分別壓縮成一個文件，甚至css、js通過技巧壓縮到一個里邊（亮點）
這樣的目的是，減少用戶訪問web產品的http連接數

web前端產品的開發(fā)流程
答:首先根據產品的定位、用戶群，確定配色，然后紙上設計整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫代碼div+css構造出 頁面，然后根據功能寫腳本
參考126郵箱首頁，將所有小圖片放到一個圖片中，通過css的background-position實現頁面，還是為了優(yōu)化，減少http連接數

規(guī)避javascript多人開發(fā)函數重名問題
答:首先是通過命名規(guī)范，比如根據不同的開發(fā)人員實現的功能，在函數名加前綴，雖然函數名看起來復雜，發(fā)布的時候還是可以替換，從而優(yōu)化。
還有一種辦法是，每個開發(fā)人員都把自己的函數封裝到類中，然后調用的時候即使函數名相同，但是因為是要類.函數名來調用，所以也減少了重復的可能性。
javascript面向對象中繼承實現
答：我是用prototype.js extend.js擴展
然后子類中parent.initialize()…
答的不好
正確答案：

// 1. 構造器
function animal() {};
function mammal() {};
function canine() {};
function dog() {};
// 2. 原型鏈表
mammal.prototype = new animal();
canine.prototype = new mammal();
dog.prototype = new canine();

prototype.js實現的基本原理
答：
將功能封裝
比如ajax.request，還是有判斷瀏覽器的代碼；position這樣的實現頁面元素位置的計算

prototye太大，如果一個頁面功能不需要這樣的，自己實現，怎么做
答：首先頁面、css、腳本分離之后，腳本中將整個模塊功能寫成一個類var do={}
其中初始化函數init:function(){}，然后最后做do.init()
其中init會對頁面上form中需要交互的元素綁定事件，比如$(’input1′).onclick=function(){}

ie、ff下面腳本的區(qū)別
答：
1.ie有outerhtml，ff沒有
2.頁面元素id，ie可以直接取，ff必須document.getelementbyid()
3.ajax里邊f(xié)f是new xmlhttprequest，而ie是
try new activexobject(’msxml2.xmlhttp’) try new activexobject(’microsoft.xmlhttp’)

ff下面實現outerhtml
答：.parenet.firstchild .parent.innerhtml
這個沒答好
正確答案：原理是，get：取到這個標簽的tagname，然后屬性循環(huán)構造成這個標簽的屬性
set：把字符串用insertbefore插入到這個元素前面，然后removechild這個元素

ie、ff下面css的解釋區(qū)別
答：
1.png透明背景，ff下面沒有問題，ie需要用濾鏡通道
2.z-index在ie、ff下面的解釋問題，

ie會認為第一個z-index=0
3.長字符串，word-wrap:break-all可以解決ie，但是ff需要overflow:hidden才行
馮舒婭補充：
1、有些標簽在ff中不能用，比如button
2、濾鏡
3、鼠標cursor:hand cursor:pointer
4、div的高度自適應
5、對box模型解析不一樣
6、ul、ol的padding和margin

ie都能識別*，標準瀏覽器（如ff）不能識別*；
ie6能識別*，但不能識別 !important；
ie7能識別*，也能識別 !important；
ff不能識別*，但能識別 !important；
例如style=”*width:10px;!important width:20px;”
這樣在ie6下寬度為10px,在ie7下寬度時20px
web前端技術的展望
答：javascript ajax；flash as；flex；sliveright
附上網上的百度web開發(fā)工程師筆試問題集
1編寫一個方法 求一個字符串的字節(jié)長度

2編寫一個方法 去掉一個數組的重復元素

3說出3條以上ff和ie的腳本兼容問題
ie 有children，ff沒有；ie有parentelement，ff沒有；ie有innertext,outertext,outerhtml，ff 沒有；ff有htmlelement,htmldivelement,xmldocument,documentfragment,node, event,element等等，ie沒有；ie有數據島，ff沒有；ie跟ff創(chuàng)建httprequest實例的方法不一樣。。等等。。
4用腳本寫去除字符串的前后空格

string.prototype.trim = function(mode)
{//前后去空格
if (mode==’left’) {
return ((this.charat(0) == ” “ && this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (mode == ’right’) {
return ((this.charat(this.length - 1) == ” “ && this.length > 0) ? this.slice(0, this.length - 1).trim(’right’) : this);
} else {
return this.trim(’left’).trim(’right’);
}
};

5算出字符串中出現次數最多的字符是什么，出現了多少次

6寫出3中使用this的典型應用
在html元素事件屬性中inline方式使用this關鍵字：

7.最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇。

這個網上有很多成品，主要是通過絕對定位和相對定位結合的方式，改造原有的select 標簽和input標簽的方法。

附上javascript正則表達式的基本知識：
g: 全局匹配
i: 忽略大小寫
^ 匹配一個輸入或一行的開頭，/^a/匹配”an a”，而不匹配”an a”
$ 匹配一個輸入或一行的結尾，/a$/匹配”an a”，而不匹配”an a”
* 匹配前面元字符0次或多次，/ba*/將匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba*/將匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/將匹配b,ba
(x) 匹配x保存x在名為$1…$9的變量中
x|y 匹配x或y
{n} 精確匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配這個集合中的任一一個字符(或元字符)
[^xyz] 不匹配這個集合中的任何一個字符
匹配一個退格符
b 匹配一個單詞的邊界
b 匹配一個單詞的非邊界
cx 這兒，x是一個控制符，/cm/匹配ctrl-m
d 匹配一個字數字符，/d/ = /[0-9]/
d 匹配一個非字數字符，/d/ = /[^0-9]/
n 匹配一個換行符
r 匹配一個回車符
s 匹配一個空白字符，包括n,r,f,t,v等
s 匹配一個非空白字符，等于/[^nfrtv]/
t 匹配一個制表符
v 匹配一個重直制表符
w 匹配一個可以組成單詞的字符(alphanumeric，這是我的意譯，含數字)，包括下劃線，如[w]匹配”$5.98″中的5，等于[a-za- z0-9]
w 匹配一個不可以組成單詞的字符，如[w]匹配”$5.98″中的$，等于[^a-za-z0-9
舉例：驗證email
var myreg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myreg.test(stremail)) return true;

該文章在 2010/7/4 0:32:58 編輯過