资源描述
web前端百度.docx
《web前端百度.docx》由会员分享,可在线阅读,更多相关《web前端百度.docx(10页珍藏版)》请在冰豆网上搜索。
web前端XX
1.UI设计部分
这是web产品化的第一步。
这个部分通常在稍大型的公司里,被单独设立为一个部门或者一些人来工作。
主要是要掌握Photo,AI,可以很快的将创意转化为平面设计图,并制作PNG等小图片。
同时,UI设计还要预包含用户交互设计的元素,如何和用户交互的基本原型等。
2.HTML/CSS,页面静态化
这是web产品化的2步,就是将UI设计师的设计图切成静态页面。
这里的“切”不是单纯的切,而是使用css里面背景色和边框样式等方式对设计原稿进行解读,并形成符合web标准的html代码。
这里web前端还需要将图片、html页面以及css样式进行合理的文件分布安排等
3.Javascript,AS客户端动态化
这是web产品化的3步,工程师使用DOM操作、AJAX,实现数据和服务端的通信以及本地样式的切换。
同时,由于Javascript、AS是一门动态语言,所以这部分的编码要求web前端工程师有较好的编码习惯,能写高效率的OOP代码,并对代码进行压缩上线以降低带宽消耗等。
4.Flash、Silverlight、Video 多媒体化
这部分针对不同web产品有不同的要求,通常要求是可以使用Flash和web、Server进行交互,并对Flash进行设计与开发。
5.PHP、Java等CGI,服务端通信基本知识和编码
这部分主要是更好的使用Ajax等技术,了解服务端的工作方式将更有利于web前端工程师工作的开展。
通常优秀的web前端工程师都是对服务端的一种开发语言很了解。
XXweb前端
1.判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20
答案:
varpatrn=/^[a-zA-Z][a-zA-Z0-9_]{4,19}$/;
alert(patrn.test(str));
2.截取字符串abcdefg的efg
答案:
varlen=str.length;
alert(str.substring(len-3,len));
3.让一个input的背景颜色变成红色
$("#names").focus(function(){
$("#names").css("background","red");
});
4.div的高宽等于浏览器可见区域的高宽,浏览器滚动,div始终覆盖浏览器的整个可见区域
pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeofpageWidth!
="number"){
if(patMode=="CSS1Compat"){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
$("#test").css('width',pageWidth);
$("#test").css('height',pageHeight);
$("#test").css('background',"gray");
//滚动触发的事件
window.onscroll=function(){
vartopPos=getScrollTop();
$("#test").css('marginTop',topPos);
$("#test").css('width',pageWidth);
$("#test").css('height',pageHeight);
$("#test").css('background',"silver");
}
//获取滚动条距离导航栏的高度
functiongetScrollTop(){
varscrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}elseif(document.body){
scrollTop=document.body.scrollTop;
}
returnscrollTop;
}
5.判断一个字符串中出现次数最多的字符,统计这个次数
模拟map
6.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”,function,true)element.removeEventListener
(“click”,function,true)
(4)获取标签的自定义属性
IE:
div1.value或div1[“value”]
FF:
可用div1.getAttribute(“value”)
(5)document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:
可以
(6)input.type的属性
IE:
input.type只读
FF:
input.type可读写
(7)innerTexttextContentouterHTML
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用IEInspector
5)如果有个新技术,现在需要掌握,你会怎么做
新技术的发现我一般是通过RSS工具,比如我用GoogleReader
每天有半个小时左右在看最新的资讯、技术走向
发现新技术,首先有个大概了解,如果有深入的必要
我一般会看他的官网,比如jquery,我会搜索到,然后看Docs、samples
如果要用到项目中,有困难的问题,我会svn得到最新的这个技术的源码,深入跟踪进去,看实现原理
一般现在涌现的技术都是opensource
提问时间
1XXweb开发脚本是否有做类似YUI库的打算
2XXweb开发工程师打算招多少人
XX电话二面回忆web开发部–web开发工程师
1、首先是自我介绍
2、然后谈谈做的web项目
3、然后开始问技术问题
4、前端开发的优化问题
答:
产品发布时,js的压缩,即函数名替换、整个文件压缩成一行
css开发的时候注释写清楚,先有个base.css,然后根据不同页面需要再加css,发布的时候将css中的一个定义写成一行,目的是压缩文件大小
最终发布的时候甚至可以将css,js分别压缩成一个文件,甚至css、js通过技巧压缩到一个里边(亮点)
这样的目的是,减少用户访问web产品的http连接数
5、web前端产品的开发流程
答:
首先根据产品的定位、用户群,确定配色,然后纸上设计整体布局,然后png或者psd出效果图,切出需要的小图片,然后手写代码div+css构造出页面,然后根据功能写脚本
参考126邮箱首页,将所有小图片放到一个图片中,通过css的background-position实现页面,还是为了优化,减少http连接数
6、规避javascript多人开发函数重名问题
答:
首先是通过命名规范,比如根据不同的开发人员实现的功能,在函数名加前缀,虽然函数名看起来复杂,发布的时候还是可以替换,从而优化。
还有一种办法是,每个开发人员都把自己的函数封装到类中,然后调用的时候即使函数名相同,但是因为是要类.函数名来调用,所以也减少了重复的可能性。
7、javascript面向对象中继承实现
答:
我是用prototype.jsextend.js扩展
然后子类中parent.initialize()…
答的不好
正确答案:
//1.构造器
functionAnimal(){};
functionMammal(){};
functionCanine(){};
functionDog(){};
//2.原型链表
Mammal.prototype=newAnimal();
Canine.prototype=newMammal();
Dog.prototype=newCanine();
prototype.js实现的基本原理
答:
将功能封装,比如Ajax.Request,还是有判断浏览器的代码;Position这样的实现页面元素位置的计算
8、prototye太大,如果一个页面功能不需要这样的,自己实现,怎么做
答:
首先页面、css、脚本分离之后,脚本中将整个模块功能写成一个类varDo={}
其中初始化函数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是newXMLHttpRequest,
而IE是
trynewActiveXObject(’Msxml2.XMLHTTP’)
trynewActiveXObject(’Microsoft.XMLHTTP’)
10、FF下面实现outerHTML
答:
.parenet.firstChild.parent.innerHTML
这个没答好
正确答案:
原理是,get:
取到这个标签的tagname,然后属性循环构造成这个标签的属性
set:
把字符串用insertBefore插入到这个元素前面,然后removeChild这个元素
–
if(typeof(HTMLElement)!
=”undefined”&&!
window.opera)
{
HTMLElement.prototype.__defineGetter__(”outerHTML”,function()
{
vara=this.attributes,str=”<”+this.tagName,i=0;
for(;iif(a[i].specified)
str+=”“+a[i].name+’=”‘+a[i].value+’”‘;
if(!
this.canHaveChildren)
returnstr+”/>”;
returnstr+”>”+this.innerHTML+””+this.tagName+”>”;
});
HTMLElement.prototype.__defineSetter__(”outerHTML”,function(s)
{
vard=document.createElement(”DIV”);d.innerHTML=s;
for(vari=0;ithis.parentNode.insertBefore(d.childNodes[i],this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(”canHaveChildren”,function()
{
return!
/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
11、IE、FF下面CSS的解释区别
答:
1.png透明背景,FF下面没有问题,IE需要用滤镜通道
2.z-index在IE、FF下面的解释问题,
12、IE会认为第一个z-index=0
13、.长字符串,word-wrap:
break-all可以解决IE,但是FF需要overflow:
hidden才行
补充:
1、有些标签在ff中不能用,比如button
2、滤镜
3、鼠标cursor:
handcursor:
pointer
4、div的高度自适应
5、对box模型解析不一样
6、ul、ol的padding和margin
IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别!
important;
IE7能识别*,也能识别!
important;
FF不能识别*,但能识别!
important;
例如style=”*width:
10px;!
importantwidth:
20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
12、web前端技术的展望
答:
javascriptajax;flashAS;Flex;Sliveright
XXweb开发工程师笔试问题集
1、编写一个方法求一个字符串的字节长度
newfunction(s)
{
if(!
arguments.length||!
s)returnnull;
if(”"==s)return0;
varl=0;
for(vari=0;i{
if(s.charCodeAt(i)>255)l+=2;
elsel++;
}
alert(l);
}(”hello你好,我好,大家好!
world!
”);
2、编写一个方法去掉一个数组的重复元素
Array.prototype.strip=function()
{
if(this.length<2)return[this[0]]||[];
vararr=[];
for(vari=0;i{
arr.push(this.splice(i–,1));
for(varj=0;j{
if(this[j]==arr[arr.length-1])
{
this.splice(j–,1);
}
}
}
returnarr;
}
vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
3、用脚本写去除字符串的前后空格
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{
returnthis.trim(’left’).trim(’right’);
}
};
5、算出字符串中出现次数最多的字符是什么,出现了多少次
//
[CDATA[varstr="adadfdfseffserfefsefseeffffftsdg";//命名一个变量放置给出的字符串
varmaxLength=0;//命名一个变量放置字母出现的最高次数并初始化为0
varresult='';//命名一个变量放置结果输入
while(str!
=''){//循环迭代开始,并判断字符串是否为空
oldStr=str;//将原始的字符串变量赋值给新变量
getStr=str.substr(0,1);//用字符串的substr的方法得到第一个字符(首字母)
eval("str=str.replace(/"+getStr+"/g,'')");//详细如补充
if(oldStr.length-str.length>maxLength)
{//判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度
maxLength=oldStr.length-str.length;//两字符串长度相减得到最大的字符串长度
result=getStr+"="+maxLength//返回最大的字符串结果(字母、出现次数)
}
}
alert(result)//弹出结果
//]]>
6、写出3中使用this的典型应用
在HTML元素事件属性中inline方式使用this关键字:
7.最后一个问题是,如何制作一个combo选项,就是可以输入可以下拉菜单选择。
这个网上有很多成品,主要是通过绝对定位和相对定位结合的方式,改造原有的select标签和input标签的方法。
附上javascript正则表达式的基本知识:
g:
全局匹配
i:
忽略大小写
^匹配一个输入或一行的开头,/^a/匹配”anA”,而不匹配”Ana”
$匹配一个输入或一行的结尾,/a$/匹配”Ana”,而不匹配”anA”
*匹配前面元字符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]字符集(characterset),匹配这个集合中的任一一个字符(或元字符)
[^xyz]不匹配这个集合中的任何一个字符
[b]匹配一个退格符
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
varmyReg=/^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail))returntrue;