AS代码如下:
function callMe(name:String):String
{
return “busy signal”;
}
ExternalInterface.addCallback(”myFunction”, callMe);
则在html中可以通过如下方式来调用:
<script language=”JavaScript”>
// result gets the value “busy signal”
var result = flashObject.myFunction(”my name”);
</script>
…
<object id=”flashObject”…>
…
<embed name=”flashObject”…/>
</object>
这是flex doc中的官方example,但是在firefox下,如果你是动态的来生成object tag,则以上方式无效,需要改成:
var result = document[”flashObject”].myFunction(”my name”);
Tags: AS3,Javascript.
在很多情况下,需要定期的刷新页面,比如显示股票或者比赛比分的页面(当然现在一般都是通过ajax去定期的从后台取数据,然后更新局部页面),又或者你网站的域名换了以后,当用户打开旧网站的时候重定向到新域名(告诉用户5秒钟后转到另一个页面等等)。
<html>
<head>
<script type=”text/javascript”>
function delayedRedirect(){
window.location = “http://www.collin.cn”
}
</script>
</head>
<body onLoad=”setTimeout(’delayedRedirect()’, 5000)”>
<h2>5秒钟后你将重定向到www.collin.cn!</h2>
</body>
</html>
Tags: Javascript.
javascript提供了两种页面重定向(redirection)的方法。分别是:
<script type=”text/javascript”>
location.href=’http://dev.collin.cn/’;
</script>
<script type=”text/javascript”>
location.replace(’http://dev.collin.cn/’);
</script>
两者的不同之处是前者会在浏览器的历史浏览记录(history对象)中增加一条新的记录,而后者则是相当于用replace中的url代替了现有的页面url,并把history中的url也替换为重定向后的url。
Ajax的兴起,给Javascript带来了新的生机,大量的javascript框架(Javascript Framework)层出不穷,一些框架来至于开发人员项目经验的总结和提炼,也有一些框架来至于商业公司,同时以开源和商业两种方式发布。借助这些框 架,可以大大加速Ajax项目的开发速度,但同时也面临不同的学习曲线,以及架构扩展性等等问题。如何选择Javascript框架,成为开发人员和架构 师头痛的一个问题。如果你正面临这样的问题,希望下面的几个建议对你在选择javascript框架上会有所帮助。
你的项目需求是什么
首 先要问自己这是一个什么项目,具体的需求是什么,是一个普通类型的网站还是一个在线的web应用程序,是否需要处理大量的键盘和鼠标事件,是否需要给用户 各类高级的ajax特性,还是说只要实现一个简单的异步页面刷新和一些简单dom操作,如果是后者,则可以选择一个相对简单的javascript框架, 封装基本的xmlhttprequest操作和dom操作就足够了。
浏览器的支持情况
不 同的框架兼容的浏览器会有所不同,尤其是一些高级的javascript框架,对低版本的浏览器都不支持,还有一些框架只支持ie和firefox,对其 他浏览器如opera、safari不支持。所以在框架的选择上还要考虑到系统的目标用户,如果目标用户都只使用ie6.0以上浏览器,那么在框架的选择 上余地就更大了。
框架后面是否有一个核心的开发团队
很多框架往往都是个人在业务时间开发的,随时可能停止更新,而如果后面有一个团队,则可以在一定程度上保准代码的更新,对bug和一些问题的及时响应,同时在代码质量上也相对有保准。
框架的成熟度
如果一个新的框架刚刚发布,使用的人往往不多,如果你贸然采用,在使用过程中遇到问题,可能要找个能帮你解决问题的人或者在网上找资料都显的很难。所以在这方面也要有所考虑。
框架的发布更新频率
一个框架有很高的发布更新频率说明新的功能在不断加入或者bug被fix的速度很快,反之一个框架半年都不出一个版本,基本可以说明这个框架已经不被开发者重视,很难得到新的发展。
文档的友好性
一个框架尤其是相对比较复杂的框架,如果没有充分和友好的文档,学习曲线会比较高,使用者在使用过程中往往需要通过阅读代码和其他外部的文章来学习怎么使用和解决一些问题。所以文档也是很重要的一个因素。
是否有个活跃的社区
一些成功的开源框架背后往往有一个社区在支撑,大家在里面交流使用经验,互相帮助解决使用过程中遇到的问题。任何问题,只要在这类社区中寻求帮助,往往很快就可以得到他人的帮助。这样的框架,即使一开始不是很成熟,也会很快发展起来。
框架的扩展性
在 实际的项目过程中,往往一个特定的框架是很难直接满足你的所有需求的,这就要求你需要去做一些定制和扩展的工作,如果一个框架没有很好的扩展性,则你可能 在项目后期为了实现某个特定的需求,不得不采用另一个新的框架,大大加大了项目的成本。所以选择一个有很好扩展性,如支持plugin等机制的框架,对你 今后系统的扩展会有很大的帮助。
性能和网络环境
不同的系统在性能和功能的侧重上会 有所不同,比如一个基于互联网的项目,可能考虑更多的是要求在保准性能的前提下,再来讲功能,很多高级的javascript框架往往在性能上不能让人满 意,一部分原因是封装了太多功能,导致js文件会非常大,在互联网环境下,下载这个js文件就会耗去不少时间,还有就是为了保准如框架的扩展性,往往做了 多层封装和抽象,在某种程度上其实是以牺牲部分性能为代价的。所以这样的框架可能更适合一些intranet内部的项目,而不是基于互联网的项目。
Tags: Javascript.
1.优化循环的一个小技巧
for ( var i = 0; i < elements.length; ++i )
for ( var i = 0, j = elements.length; i < j; ++i )
在第二个循环中,首先把elements.length附给变量j,这样不用每次都计算elements的length
2.对于事件响应采用匿名函数
button.onclick = function(){
//do something
return false;
}
这 种方式比起在html代码中给element加上onclick参数,然后调用一个javascript中已经声明的function来说,性能上会有所 提高,尤其是当同一个window中有很多个function的时候,因为这些function会在内存中建立类似Map的数据接口,按照 [functionName,function]这样的键值接口存放在里面,在onclick需要调用对于名字的function的时候,需要花去一定的 查询时间。
Tags: Javascript.
这类压缩工具主要的原理通过去掉代码中的注释,空格和空行,来缩小文件大小,同时通过分析代码,把局部变量以及function参数的名称换成如1、2或者A、B、C这类短字母。
要注意的是往往这类工具会对原有的Javascript引入一些bug,所以代码在压缩完以后,需要做仔细的测试。
更新:Packer有一种压缩方式是通过base64算法把javascript代码进行编码,其实就是引入了一个正则表达式,被压缩过的代码在load到浏览器中的时候,首先会被decode,这其实也是要耗去一些时间的。
在进行完上述源代码预压缩以后,还可以通过web server对javascript的请求响应进行gzip压缩,这部分的压缩比率会相对比较大,所以建议最好设置该项功能。
看看这几个工具的压缩比较:CompressorRater
Tags: Javascript.
网页设计中圆角的使用越来越多,往往多是以图片背景的方式来实现,用这种方式实现圆角的缺点是图片加载增加了网络传输量,同时如果圆角的大小需要改 变,需按照尺寸重新制作圆角图片。这里介绍一种用javascript来灵活实现圆角的方式,开发人员要实现圆角效果,不用每次都去求助美工了。
首先从curvycorners.net下载一个rounded_corners.js的js文件,遵循LPGL协议,最新的版本是1.2.9,支持对HTML中DIV元素实现圆角(rounded corners)修饰。主要特性:
- 免费
- 易于使用的javascript对象
- 不需要任何图片
- 反锯齿支持
- 可以在背景图片上实现反锯齿
- 可以修饰带有背景图片的DIV
- 可变的高度和宽度设置
- 支持solid border,也就是可以实现带颜色的圆角border
- 用户可以自定圆角半径
- 支持所有主流浏览器
用法:
<script type=”text/JavaScript” src=”rounded_corners.js”></script>
<DIV id=”myDiv”></DIV>
<script type=”text/JavaScript”>
window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById(”myDiv”);
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
更 加详尽的用法参考它自带的demo,大概的工作原理是curvyCorners一个像素一个像素的画出圆角,每一个像素用一个div实现,同时通过给每一 个像素加上一定的不透明性来实现反锯齿。可以同时给多个div实现圆角,通过newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
Tags: Javascript.
用ajax方式来提交form,不能用document.forms[0].name.value这样的方式取到input radio的值。提供一个用javascript取radio值的function:
/** 输入input radio对应的name值,返回选中的radio的value */
function getRadioValue(name)
{
var l=document.getElementsByName(name)
for(i=0;i
{
if(l[i].checked) return l[i].value;
}
}
需要注意的一点是在同一个document中不要出现与input radio相同的name,否则可能带来一些问题。
Tags: Javascript.