jQuery

目前,此分类下共有文章 5 篇。

有趣的setTimeout和clearTimeout

| 1 条评论 2008-04-22 20:45:21

今天使用我写的jQuery Countdown Plugin时,遇到一个特殊的需求:要停止正在进行的倒计时。

Google了一下,发现window.clearTimeout可以做这事儿,但要求首先获得window.setTimeout的句柄,我在写这个plugin时并没有考虑这点,又不想加个句柄变量到jQuery对象中,于是再度Google,并发现了一个window.clearTimeout的很奇怪的用法,可以自动获得句柄:

window.clearTimeout(setTimeout("0")-1);

这条语句确实能够满足我的需求,可我不明白这是什么意思,哪位高手能给解释下?

根据这个发现,我顺便更新了plugin-加了个stop()方法,详细用法和下载见这里

此外一个有趣的现象就是:在IE和FF下,window.setTimeout返回的句柄不同。在IE下,它是一个8位的数字,并且每次刷新页面时这个数字以3递增;在FF下,它是个各位的数字,并且刷新时不会有变化。

强悍的jQuery选择器

| 2 条评论 2007-12-02 11:02:00

周四在公司加班到近凌晨1点,期间在和开发部门的同事焦头烂额的编写js代码时,深深被jQuery强大的选择器所折服。

1、选择不存在的HTML对象时,jQuery不会报错

这点我早就深有体会。在此前使用的Prototype中,选择HTML对象前必须要保证这个对象的合法性,如果这个对象不存在,Prototype就会报错。这听起来很正常,但在jQuery中这种检查完全没必要,因为当一个对象不存在时,它会自动跳过那段代码!这样用起来非常方便。

2、parents()、children()和find()

利用parents()和children()可以很快捷地找到一个对象的父对象和子对象,但在实际使用时,常常遇到使用这两个函数编写好的js代码无法重用的问题,这是因为js代码是按照现有HTML的层级关系编写的,一旦HTML中的层级关系发生变化,js就失效了。幸好有find()这个函数,它可以让你完全不顾上下文的关系,而选择你想要选择的对象。

比如我想在用户点链接的时候,把如下代码中span的内容打印出来:

<div id="wrapper">
<p><a id="testLink">This is a test link.</a></p>
<div>
<p><span>Some text</span></p>
</div>
</div>

如果用parents()和children():

$('#testLink').click(function() { alert($(this).parents().parents().children().children().children('span').html()); return false; });

如果用find():

$('#testLink').click(function() { alert($(this).parents().parents().find('span').html()); return false; });

这看起来好像没什么区别?别急,find()还可以这样用:

$('#testLink').click(function() { alert($('').find('span').html()); return false; });

这一点当时就把我们给震了!虽然实际编写的代码比这个要复杂的多,但我们怎么也没想到前面为空时find()依然有效!我估计此时find('span')就相当于$('span')。

最后就是,有谁知道到底用什么工具可以给jQuery代码生成注释文档?之前提的JSDoc不行。

网站前台开发,你用什么工具生成文档?

| 4 条评论 2007-11-22 17:01:05

随着在日常工作中接触CSS/Javascript编写的机会越来越多,才发现和后台程序比起来,这方面的开发还处于一个较初级的阶段,比如,找不到一个十分好用的文档注释生成工具。以下两个是目前我在使用的:

CSSDOC

我不知道是否还有其它更好的方案了,抑或CSS不需要注释和文档?反正这是我唯一找到的一个CSS注释文档生成工具,而且它才刚刚起步而已!目前CSSDOC的开发者提供了第一个草案,内容很少,但大致对CSS注释的规范作了一些设定。所幸这个工具遵循DocBlock规范,更新速度也不错,并且计划支持Aptana,从这几方面来看还是颇值得期待的。

JSDoc

JSDoc要稍微完善一些。同样基于DocBlock规范,提供了使用Perl编写的文档分析和生成工具,我简单试用了一下,不管怎么说它能用(要求相当的低,哈哈)。但对我来说最为可惜的是,这东西尚不支持jQuery。

新blog、CakePHP、jQuery和其它

| 2 条评论 2007-11-11 22:46:01

有两个多月没有更新过这里了,这段时间陆陆续续地写着新blog(如你所见)的程序,工期远远超过了原有的预想,甚至直到现在我也没能最终完成原计划的功能!因此写这篇文章的目的,就不仅仅在于表明新blog的开张,还在于把其间的一些感受和经验分享出来。

CakePHP

这是一个PHP的开发框架,基本上,你可以把它看成是Ruby on Rails的PHP实现。我于05年春天接触到Cake,并当即用它给一个客户做了个网站(我有时会利用业余时间做网站,算是赚外快吧),当时就被这个框架的魔法(“automagic”)迷住了,并一直使用至今。

应该说,Cake的功能是非常强大的,Rails的思想很容易让初次接触的人着迷,然而用的越多,我却越来越陷入一个两难的困境:Cake能让你在极短时间内畅快地完成一些支持“魔法”的任务,比如ActiveRecord、Routes(类似URL映射)和Cache处理等,然而在不支持“魔法”的任务上,你不得不花极高的成本、以不怎么优美的方式去完成,最终的结果,便是前者所带来的效率提升往往被后者所抵消甚至超过,因此要么放弃Cake并花费许多精力自己从头构建一个框架,要么在Cake上花更多的学习时间。

出现这一问题的原因有很多,除却我自己的水平问题外,可以归结为以下几方面:

  1. 文档缺乏。毫不夸张的说,我有50%的时间都花在找文档上。作为号称最流行的PHP开源开发框架,Cake文档的缺乏到了令人发指的地步!官方只提供了一个内容不多的手册(Manual)、一个API查询站点(谢天谢地,虽然内容非常简单,但至少提供了API查询)、一个Google Group和一个称为“Bakery”的社区。核心开发小组中没有人出来解释一下隐藏在成千上万行代码下的Cake到底是如何运行的,手册只能让你对整个框架有个非常初步的认识(最新的1.2版甚至连手册都没有!),API库中的函数功能描述往往语焉不详,没有示例,甚至连参数和返回值都没有相应说明,从我的个人经验来看,要解决一个问题,最有效的方式就是在Google Group中不停的搜索。

    Cake的开发小组如果真想让更多的人了解和使用Cake,与其不停地增加新功能,倒不如花时间在写文档上。

  2. 设计更新太频繁当然这只针对尚处于“pre beta”阶段的1.2版而言,然而即便如此,变化的速度还是有些快了,用了一个月的函数在新的nightly版中失效,或是处理逻辑上出现大的变化,这样的例子屡见不鲜,让人很难适应。

在对Ruby及RoR做出了一段时间的考察后,我越来越倾向于放弃Cake并转移到RoR上来。

jQuery

这是我见过的最棒的Javascript框架!我曾经花了几个月的时间去了解和评估当前的一些JS框架,尝试了PrototypeMoo ToolYUI/YUI ExtQooxdoo等等一系列框架,最终被jQuery强大的功能、简洁优雅的语法、方便的扩展性和庞大的用户群所吸引,并决定以它作为今后几年的主力JS框架。如果你还在为做出正确的选择而犹豫不绝,或者喜欢Ruby那种接近自然语言的语法,我强烈推荐jQuery。

Qooxdoo(QX)

此外要提的是Qooxdoo(QX)。它的设计思路明显不同,其它JS框架可以说是对由HTML/CSS构成的用户界面和行为的补充,但QX则不仅完全以其自身来构建用户界面,而且还提供了许多其它类库。给我的感觉是,其开发团队要么野心非常庞大,要么就是思路的确与众不同。

CSS

做网页也有8年多的时间了,这是我第一次完全弃用表格、并使用CSS定位。对我这个初学者来说,使用CSS最爽的便是逻辑和控制。各个HTML元素、或者说样式定义都能体现彼此间的逻辑关系,这样事物会显得井井有条;其次,使用CSS而不是表格来控制布局,可以真正做到灵活多变,这是表格布局很难做到的;此外,CSS的定义方式很好的体现了“Dont't Repeat Yourself(DRY)”的思想,尤其适于我这种懒人。总的来说,使用CSS布局是一种令人愉快的体验。

当然问题也不是没有,各个浏览器对CSS支持的程度和方式不同,也是非常头疼的一点。并且在Windows下我还没有找到像CSSEditCoda这样好用的CSS编辑器。

啰啰嗦嗦地说了一通,其实心里还是很高兴新Blog开张的,:D

jQuery的Ajax在特定版本的IE下执行失败

| 3 条评论 2007-08-27 15:49:01

最近一直在用CakePHPjQuery做东西,不亦乐乎。昨天突然发现在版本号为6.0.2900.2180.xpsp_sp2_gdr.070227-2254的IE上,jQuery内建的Ajax功能无法使用,用ajaxError这个callback可以捕捉到相关的错误,IE给出的提示是”对象不支持此属性或方法”。 Google了一阵子发现我所遇到的情况并非个案,以下是一些相关的讨论: 其中第四条来自于jQuery的Trac,原作者直接提到了这一问题,可惜处理结果居然是”won’t fix”(不会修正)。 诸位有什么好办法?

关于

丁宇(Felix Ding),电脑Geek,狂热的爱书和爱乐分子。现就职于上海的一家设计工作室。

我的Email:

订阅到RSS