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.
对于如今的软件开发人员来说,各类五花八门的框架是满天飞,尤其是web开发领域,RoR、Spring、Struts、Zend等等,但要说到CSS框架,知道的人并不多,CSS也有框架吗?有,而且对web开发人员非常有帮助。
随 着Web UI Designer慢慢抛弃传统的table架构,转而纷纷采用xhtml+div+css模式,css的重要性也是与日俱增,往往会占去一个web项目中 一部分较大的工作量。而且时常会遇到各种浏览器兼容的问题,在ie上看起来很美观的页面,放到firefox下浏览却会出现错位等等这类问题。如何有效的 提高开发人员的效率,同时尽可能的解决浏览器兼容问题,于是有了CSS Framework。
什么是CSS框架
- 框架是个概念性很强的名词,对于CSS来说,所谓的框架就是一些预先定义了全局style重置、一致style设置、form style设置的css文件,这样当启动一个新项目时,可以直接拿来就用,在这些文件的基础上做修改就可以了。
- CSS框架没必要太复杂和庞大,一般就是以下这几个文件差不多:
- typography.css 字体修饰
- grid.css 表格修饰
- layout.css页面布局修饰
- form.css 表单修饰
- general.css 一些常用修饰,如reset修饰等等
使用CSS框架的好处
- 提高了生产效率并可以避免一些常见的错误。
- 规范化CSS和HTML代码,如在类似的项目HTML元素都使用相同的IDs和class names。
- 更加规范了项目流程,如果CSS框架整理了相应的文档,在UI上面一个Team里面的沟通会更加容易。
- 提高了浏览器兼容性。
- 你的代码将显得更加清晰、简单、完整以及合理的结构和可读性。
使用CSS框架的坏处
- 你需要理解整个框架
- 可能也会引入这个框架本身自带的bug和错误
- 太依赖于框架,以致对CSS的本质反而不是很了解
- 源代码相对会比较庞大,因为框架中很多代码可能是你用不到的
CSS框架推荐
如果一个web开发者的PC到现在还没有装Firefox浏览器,在我看来已经不能算是一个合格的web开发者。首先一个web开发人员需要考虑的 就是跨浏览器问题,Firefox市场份额的急剧扩大,已经是web开发人员在开发过程中必须考虑的一款浏览器,而不像以前只要在ie上测试通过就可以。 还有一个更重要的原因是Firefox数量众多的插件和扩展,对于一个web developer来说,里面有很多非常有价值的工具。合理的利用这些工具,可以让开发事半功倍。
Debugging工具
Firebug - 可以让你实时的编辑html和css源码并preview,分类查看页面中的html、css、javascript代码以及dom树.
JavaScript Debugger - 一个强大的javascript调试工具.
Console Two - 帮助显示页面上的javascript错误和html语法警告.
Analysis分析工具
View Source Chart - 以图表的形式显示页面中用到的颜色.
OperaView - 在Firefox的tab中用opera打开页面.
View Dependencies - 显示当前页面中包含的已经加载的其他文件列表.
lori - 告诉你加载页面花了多长时间.
HTML Validator - HTML语法校验插件,会分析当前页面的html中出现的错误和警告.
CSS Validator - 验证css语法.
RSS Validator - 验证RSS格式.
Window Resizer - 调整窗口大小到各类标准大小,如1024*768,800*600等等,方便在各个大小下查看页面的显示效果.
IE Tab - 在firefox的tab中用ie打开页面.
ViewSourceWith - 默认情况下firefox中的“查看页面源代码”使用firefox的一个窗口打开的,这个插件可以指定外部的应用程序来浏览页面源代码。
CSS
Aardvark - 把鼠标移到页面元素上,会显示当前元素css的attributes和classes.
Font Finder - 功能同Aardvark差不多.
SEO
Niche Watch Tool - Very good plugin that provides you the technical information like backlinks, page rank, keywords strength… everything a webmaster needs to analyze his site.
KGen - This addon retrieves all words of a page and lets you know how many times they appear; interesting for SEO optimization.
其他
Greasemonkey - 允许你通过写javascript在客户端控制网站页面的显示。
ColorZilla - 颜色收集器,把鼠标移到页面元素上,可以显示出当前元素的颜色参数值.
Screengrab! - 保存当前页面为图片.
Image Zoom - 帮助你缩放页面上的图片.
Web Developer - 不多说了,web开发人员必须,功能超级强大.
ShowIP - 显示当前浏览页面对于的IP地址. ServerSpy - 显示当前浏览页面所在web server的具体名称和版本号
Tags: Firefox.
标准的xhtml主要以div+css来实现页面布局和style修饰。这类架构往往需要写比较多的styles,这样的结果导致css文件会很大,本文讨论的是一些缩小css文件大小的技巧。
注释
如果css文件中一些注释是必须不能去掉的,则尽量写的简单一些。如下的注释:
/*———————-*/
/*—–Comment—–*/
/*———————-*/
可以简化成:
/*Comment*/
同时尽量去掉多于的空格。
颜色定义
如下的颜色定义:
color: #000000;
color: #dd44ff;
可以简化成:
color:#000;
color:#d4f;
margin、padding多行定义写成一行
如:
Padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;
简写成:
Padding: 0 20px 30px 10px;
又或者:
padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;
可以简写成:
Padding:10px 0;
0px可以去掉后面的px
如Padding: 10px 0px 0px 0px;可以写成:Padding: 10px 0 0 0;
合理的定义id和class
尤其是class,如果定义的合理,可以很好的重用。
对于不同元素的相同定义可以连起来定义
如:
h1{
margin:0;
padding:0;
}
h2{
margin:0;
padding:0;
}
h3{
margin:0;
padding:0;
}
可以写成:
h1, h2, h3{
margin:0;
padding:0;
}
最后一点,借助工具来压缩你的css文件
如去掉空格、分行和注释等等。推荐一个csscompressor。
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.
这段时间装了一些扩展,Firefox的运行环境估计被搞的有点乱了,启动速度很慢,打开标签页的速度也没有原先快了。Google上搜了一下“speed up firefox”,找到些有用的建议。
加快启动速度:
- 选项-主要-系统默认值中,取消“启动时总是检查firefox是否为默认浏览器”。
- 在启动ff的快捷方式里面加入启动参数: /Prefetch:1,也就是比如:如 “C:\Program Files\Mozilla Firefox\firefox.exe” /Prefetch:1
- 另外在你的 FF 快捷方式后面加上 -turbo如 “C:\Program Files\Mozilla Firefox\firefox.exe” -turbo
- 删除一些不用的扩展和插件,还有一点要注意,有些扩展和插件是恶意的或者存在缺陷的,比如会导致内存泄露等等,对这类扩展建议删除。
- 高级-更新中,取消“自动检查下列更新”中的所有更新选项。
- 不要用花哨的主题(Theme),建议还是用默认的Firefox主题。
- 定期删除网页缓存和cookies。
加快网页浏览速度:
在地址栏输入“about:config”,设置以下参数的值:
network.http.pipelining, true
network.http.proxy.pipelining, true
network.http.pipelining.maxrequests, 30
content.notify.backoffcount, 5
plugin.expose_full_path, true
ui.submenuDelay, 0
(如果about:config中没有相关的参数,可以在Application Data下找到一个prefs.js的文件,在里面加javascript代码就可以了)
更多的设置或者一些帮助加速的插件见下面的相关链接:
Tags: Firefox.