月度归档:2011年05月

jQuery的事件命名空间-Namespaced Events

命名空间简单易懂的说就是为了避免混淆,恰似人类的姓+名。专业解释请看 http://zh.wikipedia.org/wiki/命名空间

命名就是取名,比如两个人都叫做小明,空间就是区分命名的,比如一个小明姓王,一个小明姓张。王,张的姓就是空间,命名+空间(姓,名合体:王+小明,张+小明),你就不会混淆到底在说哪个小明。

jquery的事件命名空间,就是为了区分同一个jquery元素绑定的多个同名事件,使用方法就是: $.bind(“事件名.区分后缀”, function),$.trigger(“事件名.区分后缀”)。下面仅以unbind举例说明,trigger也是同样道理:

<script type="text/javascript">
$(function(){
    $("body").bind('click', function(){
        console.info('第一次单击绑定输出');
    });
    $("body").bind('click', function(){
        console.info('第二次单击绑定输出');
    });
    $("#unbind").click(function(){
        $('body').unbind('click');
        console.info('解除了body的所有单击事件');
    });
});
</script>

以上代码绑定了两次click事件,会同时执行。unbind(‘click’),就会解除全部的click事件。

如果我只想解除其中之一,而不是解除所有的单击事件,怎么办?答案就是使用命名空间。看以下代码:

<script type="text/javascript">
$(function(){
    $("body").bind('click.one', function(){
        console.info('第一次单击绑定输出');
    });
    $("body").bind('click.two', function(){
        console.info('第二次单击绑定输出');
    });
    $("#unbind").click(function(){
        $('body').unbind('click.one');
        console.info('只解除body的第一次单击事件');
    });
    $("#unbind-all").click(function(){
        $('body').unbind('click');
        console.info('解除了body的全部单击事件,包括有命名空间的单击事件');
    });
});
</script>

当解除click.one时候,click.two事件就被保留了下来。但是unbind(‘click’)会解除所有(无论有没有命名空间)的单击事件。

简单的说: 杀死王小明,那么张小明会活下来。杀死小明,那么代表王小明和张小明都要被干掉。

所以,jquery的事件命名空间就是提供一种途径,让你恰当的对指定事件解除绑定(unbind)或触发(trigger),而不影响其他已绑定的“同名不同姓”的事件。

PS. 官方说明 http://docs.jquery.com/Namespaced_Events

在jquery1.2+就已经可以使用命名空间。在jquery1.3+以后,还可以这样绑定:

$('.class').bind('click.a.b', function(){});
$('.class').trigger('click.a');
$('.class').unbind('click.b');
//经测试 click.a.b === click.a === click.b 这样的命名空间有什么用?囧,貌似曾用名,现用名,但还是同一个人。

另外看看这样:

$("a").bind("click.one", function)
$("a").bind("mouseover.one", function)
$("a").unbind(".one"); //结果会怎样呢?

	

魔数的魔力伤害

网站运营后,因为一次功能修订,被魔数的魔力命中,稍微纠结了一下。

可能多数程序员会这么做,将上传的图片按照一定规则命名, 这没什么问题,关键在于有人或许把图片尺寸纳入了此规则。

我们的规则是:文件数据库id_图片宽度_XX.png,其中图片宽度是固定尺寸,比如文件名为  0001_128 _aa.png, 页面程序输出就按此规则: echo $id.’_128_’.name, $id是变量,128就成了“魔数”。

而我们遇到的问题是,运营后boss因为某个页面效果提出问题,需要修订这个图片的尺寸,此时就感觉到魔数的魔力了,囧。

为啥会发生这种问题。。。貌似很多因素会促成这个习惯,最常见的是某些书籍,某些例子,某些教学过程。还好我们遇到的问题还不是那么难解决。无量天尊!

PS. 避免魔数的方式,很显然我们应该按这样规则命名: id_large_name.png, id_small_name.png 等等,用语义去代替具体数字。