jQuery编程陷阱两枚

作者：黑眼刀豆 发布时间：August 20, 2010 分类：前端 1 Comment

$(undefined)会以document作为选择器

这个问题在jQuery1.3.2中存在，查看源代码36-38行

    init: function( selector, context ) {
        // Make sure that a selection was provided
        selector = selector || document;

可以看到如果选择器为空，则默认使用document作为选择器， 这个时候$(undefined).bind('click')将会把点击事件绑定到整个页面上

在1.4.2版本中修复了这个bug，查看源代码75-81行

    init: function( selector, context ) {
        var match, elem, ret, doc;

        // Handle $(""), $(null), or $(undefined)
        if ( !selector ) {
            return this;
        }

当选择器为空时，不选中任何元素

$.bind会同时阻止默认事件和事件冒泡

使用$.bind进行的事件绑定，只要其中一个事件返回了false，那么jQuery将同时阻止事件的默认行为(例如a标签的跳转)和事件冒泡，查看代码1936-1944行

                    var ret = handleObj.handler.apply( this, arguments );

                    if ( ret !== undefined ) {
                        event.result = ret;
                        if ( ret === false ) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }

假如你有一个这样的设计思路：

一个A标签，点击之后不希望页面跳转，但是希望A标签的点击事件能冒泡到document.body容器，从而触发document.body的点击事件

那么用$.bind来做事件的绑定显然不适合

No Country For Young Man

作者：黑眼刀豆 发布时间：July 31, 2010 分类：生活 No Comments

今天早上，在我这住了一个礼拜的同学走了，由于个人原因，我不能再收留他。

从去年六月份辞职到现在，他几乎没有收入，生活压力很大。

辞职后住在广州，在淘宝上开过小店，生意不好。期间也去过越南边境考察，希望做些外贸生意，但是发现那边早已经没有了市场。

这次到深圳是来参加阿里巴巴电子商务外贸培训，培训后希望能找个外贸相关的工作。

培训的费用是首付480元，培训完成后会推荐就业机会，就业后从工资里面再扣4K多作为学费返还。

很遗憾我不能为他做点什么，只是发了个短信告诉他，如果在深圳有需要帮忙的就给我打个电话。

在这样的社会里，要追求自己的理想的确不容易，甚至会比自己当初想像时难得多，在这里祝他一切顺利。

http://pic.yupoo.com/o56103/957329b7c61f/medium.jpg

jQuery中的奇技淫巧(二)：短路表达式

作者：黑眼刀豆 发布时间：July 26, 2010 分类：前端 No Comments

短路表达式(Short-circuit evaluation)，也叫短路求值。

在jQuery1.4.2的第5680行有一个短路表达式的典型应用

speed: function( speed, easing, fn ) {
    var opt = speed && typeof speed === "object" ? speed : {
        complete: fn || !fn && easing ||
            jQuery.isFunction( speed ) && speed,
        duration: speed,
        easing: fn && easing || easing && !jQuery.isFunction(easing) && easing
    };
    ......

如何来阅读这段代码呢？其实很简单：

|| : 前后相当于两个if分支，如果前面的分支为真，则不运算后面的分支
&& : 如果全部表达式为真，则返回最后一个表达式的值，否则在第一个为假的表达式处停止运算

所以其实上面代码中complete属性的赋值语句可以改写为：

if(fn){
    return fn;
}
elseif(!fn && easing){
    return easing;
}
elseif(jQuery.isFunction( speed ) && speed){
    return speed;
}

怎么样，是不是很明了？那么就动动手改写下easing属性的赋值语句吧，相信也难不到聪明的你。

OAuth新手指南：协议工作流程

作者：黑眼刀豆 发布时间：July 25, 2010 分类：翻译 1 Comment

原文地址：http://hueniverse.com/2007/10/beginners-guide-to-oauth-part-ii-protocol-workflow/
为了使读者在以后阅读英文文档时不会产生困惑，文中的OAuth术语未做翻译。

通过真实生活中的场景介绍OAuth协议的工作流程真的是再适合不过了。
注意本故事中的站点和人物皆为虚构。

故事开始......
http://hueniverse.com/wp-content/uploads/2009/09/flow1g.png

某年某日，小娴从苏格兰度假归来，她花了两个星期在艾莱岛上品尝当地的威士忌。在回到家之后，她打算将自己在苏格兰拍的照片放到网上向朋友们炫耀一下。小娴最喜欢用Faji网，一个很著名的照片分享网站。登录到Faji之后，小娴上传了两张照片，并将照片设置为私密照片。
http://hueniverse.com/wp-content/uploads/2009/09/screen1.png

在OAuth协议的术语中：
小娴称为User；
Faji网称为Service Provider；
小娴在Faji网上传的两张照片称为Protected Resources。

这个时候，小娴想让外婆看看这些照片，但是外婆从来不上网，所以小娴打算将这两张照片打印出来寄给外婆。作为一名新时代青年，小娴使用Beppa网提供的在线打印服务。

在OAuth协议术语中：Beppa网称为Consumer。
因为小娴设置了自己在Faji上的照片为私密照片，
所以Beppa需要使用OAuth协议取得授权后才能获取照片并打印。

小娴访问Beppa并准备下单打印，Beppa支持从许多其他网站获取照片并打印，当然也包括Faji。小娴选择Faji后点击了下一步。
http://hueniverse.com/wp-content/uploads/2009/09/screen2.png

为了支持从Faji获取照片进行打印，Beppa的工程师(Consumer Developer)从Faji申请了Consumer Key和Consumer Secret，这样才可以和Faji提供的OAuth接口进行通信。

在小娴点击了下一步之后，Beppa和Faji开始在后台进行通信。首先Beppa从Faji获取Request Token，这个Request Token还没有经过小娴授权，所以还不能用来获取小娴在Faji的私密照片。
http://hueniverse.com/wp-content/uploads/2009/09/flow2g.png

获取到了Request Token之后，Beppa重定向浏览器到Faji的OAuth授权地址，地址中包含了需要授权的Request Token。Beppa同时告诉Faji在小娴确认授权后将浏览器重定向到自己的网上下单地址http://beppa.com/order。

在进入Faji的OAuth授权网页之前，小娴需要输入自己的Faji帐号与密码进行登录。小娴从浏览器的地址栏看到这个的确是Faji的网页，所以输入了自己的帐号信息。
http://hueniverse.com/wp-content/uploads/2009/09/screen3.png

OAuth协议使得小娴在使用Beppa打印Faji的照片时，不需要向Beppa提供自己在Faji的帐号信息。

Faji的授权网页告诉小娴需要对Beppa的Request Token进行授权，并提醒小娴在授权之后Beppa可以获取她的私密照片。

小娴当然不希望Beppa可以修改她在Faji网上的照片和其他信息，她必须确认授权只允许Beppa获取照片。从Faji的授权网页上小娴也注意到授权的有限期被限制在1个小时内，足够Beppa获取需要打印的照片了。
http://hueniverse.com/wp-content/uploads/2009/09/screen4.png

在小娴点击确认之后，Faji将这个Request Token标志为经过授权，接下来Faji告诉浏览器带着这个Request Token把小娴重定向到Beppa提供的下单地址http://beppa.com/order。
Beppa这个时候知道已经获得了小娴的授权，并且可以开始获取需要打印的照片了。

小娴开始等待Beppa获取自己在Faji上需要打印的照片。
http://hueniverse.com/wp-content/uploads/2009/09/screen5.png

在小娴等待的过程中，Beppa首先使用授权过的Request Token向Faji请求Access Token。Request Token只是为了取得用户授权，而Access Token则是用来获取Protected Resources，也就是小娴的私密照片。在第一个请求中，获取Access Token，第二个请求(也可能是多个请求，首先获取照片列表，然后逐张获取照片)使用Access Token获取需要打印的照片。
http://hueniverse.com/wp-content/uploads/2009/09/flow3g.png

当获取到需要打印的照片之后，Beppa告诉浏览器刷新页面，并展示需要打印的照片缩略图和提供下单的按钮。

小娴很惊讶Beppa不需要她的Faji帐号信息就获取到了需要打印的照片，她对这个结果很满意，于是点击了同意下单。
http://hueniverse.com/wp-content/uploads/2009/09/screen6.png

使用js_beautify统一团队代码风格

作者：黑眼刀豆 发布时间：July 24, 2010 分类：前端 No Comments

介绍

js_beautify是Einar Lielmanis开发的在线javascript代码格式化工具。Einar在github上开源了这个项目的代码，并加入了格式化html代码的支持。

项目地址：http://github.com/einars/js-beautify

看看格式化前后代码比较： http://pic.yupoo.com/o56103/860859ae0b8a/medium.jpg
注意逗号换行和大括号换行的风格都统一了

在Aptana中使用

http://assets.aptana.com/images/generic/aptana-logo.png
1.下载beautify_js_html.js这个文件
2.使用文本编辑器打开，全选，复制
3.打开Aptana，在菜单中选择Scripts->Paste new script
4.用Aptana打开js或html文件，选择菜单Scripts->Javascript->beautify_js_html运行格式化

默认绑定的快捷键是Alt+B，需要修改其他快捷键请修改beautify_js_html.js文件
更多关于在Aptana中使用Eclipse monkey脚本的信息请参考：
http://forums.aptana.com/viewtopic.php?t=5216
http://docs.aptana.com/docs/index.php/About_Eclipse_Monkey
http://docs.aptana.com/docs/index.php/Adding_metadata_to_an_Eclipse_Monkey_script
  1. 1
  2. 2
  3. 3
量子统计