25个Web前端重难点Word下载.docx
《25个Web前端重难点Word下载.docx》由会员分享,可在线阅读,更多相关《25个Web前端重难点Word下载.docx(28页珍藏版)》请在冰豆网上搜索。
2)针对Web组件使用域名无关性的Cookie(UseCookie-freeDomainsforComponents)
这个话题在此前针对Web图片服务器的讨论中曾经提及。
这里说的Web组件(Component),多指静态文件,比如图片CSS等,Yahoo!
的静态文件都在上,客户端请求静态文件的时候,减少了Cookie的反复传输对主域名()的影响。
2、javascript闭包?
Closure,所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式,因而这些变量也是该表达式的一部分。
简单来讲,ECMAScript允许使用内部函数--即函数定义和函数表达式位于另一个函数的函数体内。
而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
也就是说,内部函数会在外部函数返回后被执行。
而当这个内部函数执行时,它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。
这些局部变量、参数和函数声明(最初时)的值是外部函数返回时的值,但也会受到内部函数的影响。
闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。
比如,在对函数调用的过程中,将一个对内部函数对象的引用指定给另一个对象的属性。
或者,直接将这样一个(内部)函数对象的引用指定给一个全局变量、或者一个全局性对象的属性,或者一个作为参数以引用方式传递给外部函数的对象。
保护函数内的变量安全。
以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
闭包使用:
1)在内存中维持一个变量。
依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
2)通过保护变量的安全实现JS私有属性和私有方法(不能被外部访问)
3)私有属性和方法在Constructor外是无法被访问的。
functionexampleClosureForm(arg1,arg2){
varlocalVar=8;
functionexampleReturned(innerArg){
return((arg1+arg2)/(innerArg+localVar));
}
/*返回一个定义为exampleReturned的内部函数的引用-:
-*/
returnexampleReturned;
}
varglobalVar=exampleClosureForm(2,4);
3、javascript跑马灯
<
!
DOCTYPEHTML>
html>
head>
metacharset="
gb2312"
>
title>
RandomRunHouse<
/title>
scriptlanguage="
javascript"
msgArray=newArray(4);
msgArray[0]="
欢迎光临"
;
msgArray[1]="
白日依山静,黄河入海流"
msgArray[2]="
人道是,三国周郎赤壁"
msgArray[3]="
EmailTo:
**************"
varmsg="
"
varflag=true;
varaddOne=1;
varspace=50;
varaddTwo=0;
functionrandomMessage()
{
if(flag==true){//判断次句跑马灯是否跑完,跑完则重新随机获得语句
msg=msgArray[Math.floor(Math.random()*msgArray.length)];
flag=false;
//表示跑马灯已开始,下次调用此函数则不在随机获得语句,直到跑马灯结束
}
if(addOne<
msg.length){
//在状态栏中先一个字一个字递加的把msg字符串显示出来
window.status=msg.substring(0,addOne);
addOne++;
}else{
varscroller="
for(i=0;
i<
space;
i++){//添加状态栏前的空格
scroller+="
"
}
scroller+=msg;
window.status=scroller.substring(addTwo,space+msg.length);
addTwo++;
//表示跑马灯结束,初始化数据
if(addTwo>
space+msg.length){
addOne=0;
addTwo=0;
flag=true;
}
}
setTimeout('
randomMessage()'
100);
<
/script>
/head>
bodyonLoad="
randomMessage();
/body>
/html>
16,javascript浅复制与深度复制
浅复制(影子克隆):
只复制对象的基本类型,对象类型仍属于原来的引用.
深复制(深度克隆):
不仅复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的.
例子:
HTML>
HEAD>
TITLE>
NewDocument<
/TITLE>
METANAME="
Generator"
CONTENT="
WawaEditor1.0"
Author"
八神奄"
Keywords"
Javascript,Java,XML,net,C#,C++,Database"
Description"
不及格的程序员,无所不在"
/HEAD>
BODY>
SCRIPTLANGUAGE="
JavaScript"
--
functionObject.prototype.clone(){
varnewObj=newObject();
for(elementsinthis){
newObj[elements]=this[elements];
returnnewObj;
functionObject.prototype.cloneAll(){
functionclonePrototype(){}
clonePrototype.prototype=this;
varobj=newclonePrototype();
for(vareleinobj){
if(typeof(obj[ele])=="
object"
)obj[ele]=obj[ele].cloneAll();
returnobj;
varobj1=newObject();
obj1.Team="
First"
obj1.Powers=newArray("
Iori"
"
Kyo"
);
obj1.msg=function(){alert()};
obj1.winner=newObject();
obj1.winner.name=obj1.Powers[0];
obj1.winner.age=23;
obj1.winner.from="
Japan"
varobj1_clone=obj1.cloneAll();
obj1_clone.Team="
Second"
obj1_clone.Powers=newArray("
Jimmy"
Anndy"
obj1_clone.winner.name=obj1_clone.Powers[1];
obj1_clone.winner.age=22;
obj1_clone.winner.from="
USA"
msg="
2003界拳皇单打独斗杯,拳皇挑战赛:
\n\nA组对战形式:
\n\n"
msg+=obj1.Team+"
组,人员名单:
+obj1.Powers+"
\n"
msg+="
第一轮过后,胜利者为:
+obj1.winner.name+"
参赛者年龄:
+obj1.winner.age+
来自岛国:
+obj1.winner.from+"
\n\nB组对战形式:
msg+=obj1_clone.Team+"
+obj1_clone.Powers+"
+obj1_clone.winner.name+
+obj1_clone.winner.age+"
来自国际警察
部队:
+obj1_clone.winner.from+"
alert(msg);
//-->
/SCRIPT>
/BODY>
/HTML>
深度clone方法1:
object.prototype.clone=function(){
if(typeOf(this)!
='
object'
){
returnthis;
if(this==null){
varnewObj=newObject();
for(variinthis){
newObj[i]=this[i].clone;
return(newObj);
深度clone方法2:
functionclone(obj){
functionclone(){};
clone.prototype=obj;
returnnewclone();
4、浏览器中用javascript如何取得用户系统当前的时间?
scripttype='
text/javascript'
varnow=newDate();
varhour=now.getHours();
varmin=now.getMinutes();
varsec=now.getSeconds();
document.write('
当前时间是:
'
+hour+'
:
+min+'
+sec);
5、JavaScript脚本为Array对象添加一个indexOf方法。
Array.prototype.indexOf=function(item,i){
i||i=0;
varlength=this.length;
if(i<
0){
i=length+i;
for(;
i<
length;
i++){
if(this[i]==item){
return(i);
return(-1);
6、写一个网页版的comboBox,即可以下拉选择又可以文本框输入的组合文本框。
inputtype='
text'
class='
combobox'
item='
aaa,bbb,ccc,ddd'
/>
varinputs=document.getElementsByTagName('
input'
for(vari=0;
inputs.length;
if(inputs[i].type=='
&
inputs[i].className='
){
varinput=inputs[i];
varitems=input.item.split('
'
varselect=document.createElement('
select'
for(i=0;
items.length;
option=document.createElement('
option'
);
option.value=i;
option.text=items[i];
select.options.add(option);
}
select.style.position='
absolute'
select.style.width=input.clientWidth+20+'
px'
select.style.clip='
rect(autoautoauto'
+input.clientWidth+'
px)'
;
select.onchange=function(){
varinput=this.nextSibling;
input.text=this.text;
input.select();
input.focus();
varparent=input.parentNode;
parent.insertBefore(select,input);
7、ActionScript与JavaScript的交互?
ActionScript提供了外部API,那就是ExternalInterface类,通过ExternalInterface类可以实现ActionScript和FlashPlayer容器之间的直接通信。
1)在JavaScript中调用ActionScript方法
在FlashPlayer中,可以使用HTML页中的JavaScript来调用ActionScript函数。
ActionScript函数可以返回一个值,JavaScript会立即接收它作为该调用的返回值。
第一步:
在ActionScript中调用addCallback()把ActionScript注册为可从容器调用。
成功调用addCallBack()后,容器中的JavaScript代码可以调用在FlashPlayer中注册的ActionScript方法。
addCallBack定义如下:
addCallback(functionName:
String,closure:
Function):
void
functionName参数就是在Html页面中脚本调用的方法名。
closure参数是要调用的本地方法,这个参数可以是一个方法也可以是对象实例。
?
xmlversion=”1.0″encoding=”utf-8″?
mx:
Applicationxmlns:
mx=”layout=”absolute”
initialize=”this.initApp()”>
Script>
[CDATA[
importmx.controls.Alert;
importflash.external.ExternalInterface;
publicfunctionsayHelloWorld(name:
String):
String{
varmsg:
String=name+"
helloworld!
Alert.show(msg);
returnmsg;
publicfunctioninitApp():
void{
ExternalInterface.addCallback("
sayHelloWorld"
sayHelloWorld);
]]>
/mx:
Application>
第二步:
那么在Html页面中,先获得SWF对象的引用,也就是用<
object…/>
声明的Swf的对象,比如说是testJs。
然后就可以用以下方式调用ActionScript中的方法。
functioncallActionScript(){
alert(document.getElementById(“testJs”).sayHelloWorld(“奎跃翔“));
2)在ActionScript中调用JavaScript
在ActionScript中调用JavaScript最简单的方法是使用ExternalInterface(),可以使用此API调用任意JavaScript,传递参数,获得返回值,如果调用失败,ActionScript抛出一个异常。
mx=”layout=”absolute“>
importflash.external.ExternalInterface;
publicfunctioncallJavaScript():
Alert.show(ExternalInterface.call("
奎跃翔"
));
}
Buttonx=”290”y=”10”label=”Button”click=”callJavaScript()”/>
Html页面中有如下函数定义:
functionsayHelloWorld(name){
varmsg=name+”,helloworld!
”
8、web跨域访问解决方案
1)Web代理的方式。
即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果。
此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求A网站提供Web代理的支持,因此A网站与B网站之间必须是紧密协作的,且每次交互过程,A网站的服务器负担增加,且无法代用户保存session状态。
2)on-Demand方式。
MYMSN的门户就用的这种方式,不过MYMSN中不涉及跨域访问问题。
动态控制script标记的生成,通过修改script标记的src属性完成对跨域页面的调用。
此方案存在的缺陷是,script的src属性完成该调用时采取的方式时get方式,如果请求时传递的字符串过大时,可能会无法正常运行。
不过此方案非常适合聚合类门户使用。
3)iframe方式。
查看过醒来在javaeye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。
数据提交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无法完成对父窗口效果的影响。
4)用户本地转储方式:
IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置Interval进行轮询,获得结果后清除Interval即可。
FF的平台独立性决定了它不支持剪贴板这种方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF无法通过内存来完成暗渡陈仓。
而由于文件操作FF也没有提供支持(无法通过Cookie跨域完成数据传递),致使这种技巧性的方式只能在IE中使用。
9、js中如何