web前端百度.docx

1、web前端XX1. UI设计部分 这是web产品化的第一步。这个部分通常在稍大型的公司里，被单独设立为一个部门或者一些人来工作。主要是要掌握Photo, AI,可以很快的将创意转化为平面设计图，并制作PNG等小图片。 同时，UI设计还要预包含用户交互设计的元素，如何和用户交互的基本原型等。2. HTML/CSS,页面静态化这是web产品化的2步，就是将UI设计师的设计图切成静态页面。这里的“切”不是单纯的切，而是使用css里面背景色和边框样式等方式对设计原稿 进行解读，并形成符合web标准的html代码。这里web前端还需要将图片、html页面以及css样式进行合理的文件分布安排等3.Java

2、script, AS 客户端动态化这是web产品化的3步，工程师使用DOM操作、AJAX，实现数据和服务端的通信以及本地样式的切换。同时，由于Javascript、 AS是一门动态语言，所以这部分的编码要求web前端工程师有较好的编码习惯，能写高效率的OOP代码，并对代码进行压缩上线以降低带宽消耗等。4.Flash、Silverlight、Video 多媒体化这部分针对不同web产品有不同的要求，通常要求是可以使用Flash和web、Server进行交互，并对Flash进行设计与开发。5.PHP、Java等CGI, 服务端通信基本知识和编码这部分主要是更好的使用Ajax等技术，了解服务端的工作

3、方式将更有利于web前端工程师工作的开展。通常优秀的web前端工程师都是对服务端的一 种开发语言很了解。XXweb前端1. 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20答案： var patrn=/a-zA-Za-zA-Z0-9_4,19$/; alert(patrn.test(str); 2. 截取字符串abcdefg的efg答案： var len=str.length; alert(str.substring(len-3,len);3. 让一个input的背景颜色变成红色$(#names).focus(function() $(#names)

4、.css(background,red););4. div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域 pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != number) if (patMode = CSS1Compat) pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; else pa

5、geWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; $(#test).css(width,pageWidth); $(#test).css(height,pageHeight); $(#test).css(background,gray); /滚动触发的事件 window.onscroll = function() var topPos=getScrollTop(); $(#test).css(marginTop,topPos); $(#test).css(width,pageWidth);

6、 $(#test).css(height,pageHeight); $(#test).css(background,silver); /获取滚动条距离导航栏的高度 function getScrollTop() var scrollTop=0; if(document.documentElement&document.documentElement.scrollTop) scrollTop=document.documentElement.scrollTop; else if(document.body) scrollTop=document.body.scrollTop; return sc

7、rollTop; 5. 判断一个字符串中出现次数最多的字符，统计这个次数模拟map6. IE与FF脚本兼容性问题(1) window.event： 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源，而FF用target获取事件源 (3) 添加，去除事件 IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function) FF：element.addEventListener(“click”, functi

8、on, true) element.removeEventListener(“click”, function, true) (4) 获取标签的自定义属性 IE：div1.value或div1“value” FF：可用div1.getAttribute(“value”) (5) document.getElementByName()和document.allname IE；document.getElementByName()和document.allname均不能获取div元素 FF：可以 (6) input.type的属性 IE：input.type只读 FF：input.type可读写

9、(7) innerText textContent outerHTML IE：支持innerText, outerHTML FF：支持textContent (8) 是否可用id代替HTML元素 IE：可以用id来代替HTML元素 FF：不可以1）web开发团队人员应该如何分工协作 布局 CSS 脚本 比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库（亮点）2）web开发曾经的团队有没有别人遇到问题，什么问题，向你请教3）自己在开发的过程中遇到什么问题，谈谈看法4）web开发脚本开发环境用什么、调试用什么现在就用notepad 调试肯定用firebug，chrom，ie下看页面DOM

10、用IEInspector5）如果有个新技术，现在需要掌握，你会怎么做 新技术的发现我一般是通过RSS工具，比如我用GoogleReader 每天有半个小时左右在看最新的资讯、技术走向 发现新技术，首先有个大概了解，如果有深入的必要 我一般会看他的官网，比如jquery，我会搜索到，然后看Docs、 samples 如果要用到项目中，有困难的问题，我会svn得到最新的这个技术的源码，深入跟踪进去，看实现原理 一般现在涌现的技术都是opensource提问时间1XXweb开发脚本是否有做类似YUI库的打算2XXweb开发工程师打算招多少人XX电话二面回忆 web开发部web开发工程师1、首先是自我

11、介绍2、然后谈谈做的web项目3、然后开始问技术问题4、前端开发的优化问题答:产品发布时，js的压缩，即函数名替换、整个文件压缩成一行css开发的时候 注释写清楚，先有个base.css，然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小最终发布的时候甚至可以将css，js分别压缩成一个文件，甚至css、js通过技巧压缩到一个里边（亮点）这样的目的是，减少用户访问web产品的http连接数5、web前端产品的开发流程答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后png或者psd出效果图，切出需要的小图片，然后手写代码div+css构

12、造出 页面，然后根据功能写脚本参考126邮箱首页，将所有小图片放到一个图片中，通过css的background-position实现页面，还是为了优化，减少http连接数6、规避javascript多人开发函数重名问题答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。7、javascript面向对象中继承实现答：我是用prototype.js extend.js扩展然后子类中p

13、arent.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这样的实现页面元素位置的计算8、prototye太大，如

14、果一个页面功能不需要这样的，自己实现，怎么做答：首先页面、css、脚本分离之后，脚本中将整个模块功能写成一个类var Do=其中初始化函数init:function()，然后最后做Do.init()其中init会对页面上form中需要交互的元素绑定事件，比如$(input1).onclick=function()9、IE、FF下面脚本的区别答：1.IE有outerHTML，FF没有 2.页面元素id，IE可以直接取，FF必须document.getElementById() 3.Ajax里边FF是new XMLHttpRequest，而IE是try new ActiveXObject(Msxm

15、l2.XMLHTTP) try new ActiveXObject(Microsoft.XMLHTTP)10、FF下面实现outerHTML答：.parenet.firstChild .parent.innerHTML这个没答好正确答案：原理是，get：取到这个标签的tagname，然后属性循环构造成这个标签的属性set：把字符串用insertBefore插入到这个元素前面，然后removeChild这个元素!if(typeof(HTMLElement)!=”undefined” & !window.opera)HTMLElement.prototype._defineGetter_(”out

16、erHTML”,function()var a=this.attributes, str=”+this.tagName, i=0;for(;i”;return str+”+this.innerHTML+”;);HTMLElement.prototype._defineSetter_(”outerHTML”,function(s)var d = document.createElement(”DIV”); d.innerHTML = s;for(var i=0; i11、IE、FF下面CSS的解释区别答：1.png透明背景，FF下面没有问题，IE需要用滤镜通道 2.z-index在IE、FF下面

17、的解释问题，12、IE会认为第一个z-index=013、.长字符串，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和marginIE都能识别*，标准浏览器（如FF）不能识别*；IE6能识别*，但不能识别 !important；IE7能识别*，也能识别 !important；FF不能识别*，但能识别 !important；例如style

18、=”*width:10px;!important width:20px;”这样在IE6下宽度为10px,在IE7下宽度时20px12、web前端技术的展望答：javascript ajax；flash AS；Flex；SliverightXXweb开发工程师笔试问题集1、编写一个方法 求一个字符串的字节长度new function(s)if(!arguments.length|!s) return null;if(”=s) return 0;var l=0;for(var i=0;i255) l+=2;else l+;alert(l);(”hello你好，我好,大家好！world!”);2、编

19、写一个方法 去掉一个数组的重复元素Array.prototype.strip=function()if(this.length2) return this0|;var arr=;for(var i=0;ithis.length;i+)arr.push(this.splice(i,1);for(var j=0;jthis.length;j+)if(thisj=arrarr.length-1)this.splice(j,1);return arr;var arr=abc,85,abc,85,8,8,1,2,5,4,7,8;alert(arr.strip();3、用脚本写去除字符串的前后空格Stri

20、ng.prototype.trim = function(mode)/前后去空格if (mode=left) return (this.charAt(0) = ” “ & this.length 0) ? this.slice(1).trim(left) : this); elseif (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)

21、.trim(right);5、算出字符串中出现次数最多的字符是什么，出现了多少次/ maxLength ) /判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度maxLength = oldStr.length-str.length; /两字符串长度相减得到最大的字符串长度result = getStr + = + maxLength /返回最大的字符串结果（字母、出现次数）alert(result) /弹出结果/6、写出3中使用this的典型应用在HTML元素事件属性中inline方式使用this关键字：7.最后一个问题是，如何制作一个combo选项，就是可以输入可

22、以下拉菜单选择。这个网上有很多成品，主要是通过绝对定位和相对定位结合的方式，改造原有的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 匹配

23、x或yn 精确匹配n次n, 匹配n次以上n,m 匹配n-m次xyz 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)xyz 不匹配这个集合中的任何一个字符b 匹配一个退格符b 匹配一个单词的边界B 匹配一个单词的非边界cX 这儿，X是一个控制符，/cM/匹配Ctrl-Md 匹配一个字数字符，/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-9W 匹配一个不可以组成单词的字符，如W匹配”$5.98中的$，等于a-zA-Z0-9举例：验证emailvar myReg = /_a-z0-9+(_a-z0-9+.)+a-z0-92,3$/;if(myReg.test(strEmail) return true;