[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;