Becomin' Charles » jQuery

jQuery里面用到“打包盒”

Charles — Sat, 22 Oct 2011 17:45:43 +0000

想学学怎么写jQuery的插件，结果发现举步维艰，于是想通过研究插件代码的案例，来积累经验，结果看到第一行，我就郁闷了，天下间最郁闷的事情莫过于你出门去约会，结果刚打开门，就摔个狗吃屎，现在我就那个感觉。看代码：

//第一种“包装盒”
(function($){
// to do things here, I like use this way
})(jQuery);
//第二种“包装盒”
(function(window, undefined){
// this is the wrapper of jquery
})(window);
//第三种“包装盒”
(function($, undefined){
// this is the wrapper of jquery ui components
}(jQuery));

闭包是个好东西啊，自打初窥门径后，我干什么都喜欢在外面套个闭包，我把这个称为是打包盒，而且这个盒子很神奇，里面看得到外面，但是外面看不到里面。好处很多，比如可以放心大胆地命名变量啊，不用担心污染全局空间，也不用担心被全局空间的其他变量污染，还有像上面片段里，第一种那种写法，可以非常安全地去使用$符号代表的jQuery对象。因为在全局空间里，如果一个页面上引入多个类库的话，$符号很可能代表的不是jQuery对象，而用了第一种写法后，$符号变得很安全了。

翻开jQuery和其各类插件的源代码，你会发现，它们都被安放在一些“打包盒”里面，不禁有种英雄所见略同的感觉，但是不要感觉太好，为什么人家用的，跟我用的不太一样呢？看第二种，是jQuery用的“打包盒”。乍看跟第一种很像，但是那两个形参，简直匪夷所思。第一个是window，这明显是地球人都知道的全局变量啊，第二个是undefined，这更加神了@#$%^&。淘宝UED有篇文章解释了这个问题。文章观点大体是，将window由全局变量变为形参，可以在后期代码最小化时候，通过对局部变量名的替换，来大幅度减小代码体积，这算是一个优化吧，undefined那个同理。另一点文中提到的是，undefined可以被重新定义成自定义的值，也即可能被污染，使用这种方式，会得到真正的一个undefined。当然，我的眼光和专业程度也止于此了，但是我还是觉得，还有可能有一些额外的好处，如果看官童鞋你知道，请不吝赐教。

第三种的话，看过了两种，基本上已经有点差不多全懂了，但是仔细一看，还差那么一点的。$形参，和undefined形参不多解释了。请大家关注那个不同点，就是最后一个闭合小括号的位置，发现了吧，最后闭合小括号，为什么是放在最后面了呢？由此我也发现了一个特性，就是在小括号里面的匿名函数，如果在函数结束的大括号后面，直接跟一对小括号的话，会使那个匿名函数立刻执行。如果离开了外面那对小括号，匿名函数是不能生存的，如果是具名函数呢，在闭合大括号后，跟一对小括号，也无法实现对函数的立即调用，反倒会有语法错误。但是还是来看最关键的那个不同，如下：

//写法A
(function($, undefined){
// this is the wrapper of jquery ui components
}(jQuery));
//写法B
(function($, undefined){
// this is the wrapper of jquery ui components
})(jQuery); //不用找茬了，这行不一样，看“)”的位置

这两种“包装盒”到底有何不同？第一种比第二种有什么特别的好处么？

标签：code reading, jQuery

[心得]：在thickbox退出时执行动作

Charles — Tue, 23 Feb 2010 05:01:46 +0000

thickbox是jQuery的插件，可以在页面上显示一个模拟出来的窗体，可以是对话框，AJAX内容，或者仅仅用来展示图片。其使用非常方便，只要在页面中引入了thickbox.js和thickbox.css，就可以通过设定A，INPUT，AREA元素的href或者alt属性，就可以使得其功能得以实现。具体的文档，可以参见这里。

WordPress在脚本库中添加了thickbox的脚本，调用起来格外地简单。所以我就选用了这个作为WP插件后台管理界面中，用户交互对话框的解决方案。在这里，介绍一点我在开发过程中的经验。如果需要在thickbox弹出窗体退出时执行一些动作，那么比较好的办法是向#TB_Window的unload事件绑定动作，thickbox在退出时会触发该动作，该动作是在tb_remove()函数中触发的。

向这个事件绑定动作的方法有点小窍门，因为页面初始化完成后，文档Dom中并不包含#TB_Window元素，只有在thickbox被触发后，该元素才添加到Dom中。经过阅读源代码后，我发现，可以在触发thickbox的对象的blur事件中，向#TB_Window的unload事件绑定动作。示例代码如下：

<a id="open-dialog" href="#TB_inline?height=300&width=400&inlineID=dialog">Click Herea>

$('#open-dialog').blur(function(){
$('#TB_Window').unload(function(){
//do something here
});
});

标签：code, develop, jQuery, usage

也说用jQuery改进WP评论表单

Charles — Fri, 14 Nov 2008 13:49:28 +0000

浏览WordPress博客的用户如果启用了Cookie，在发表评论后，信息会被记录在Cookie里，这样，下次登录同一个博客发表评论时，WordPress会为用户自动填写评论表单。可以说，这是一个十分贴心的设计。本文中，将介绍如何使用jQuery，来做到更进一步。

如果用户的信息已经存在了，那么就帮他填好，如果已经填好了，就可以把表单也隐藏起来，并且显示一句欢迎语。不得不说，这个想法非常的有趣，所以，我决定自己来做一下。

第一次看到这个功能是在stephen的博客，然后从他的博客，我链接到了xiaorsz写的文章，然后看到了mg12的文章，再然后是xiaorsz使用jQuery的改进版本。

上述几篇文章已经对这个问题阐述得非常详细了，虽然说实现细节有所不同，但是基本原理是相同的。

1. 首先，读写Cookie这部分工作，WordPress已经帮我们做好了，基本上不用我们操心，也即如果用户发表过评论，则comment_author变量不为空，并且会自动填写到Comment Form的author输入框中。

2. 然后，我们用一段代码来隐藏昵称，邮件，网站三个输入框。

3. 最后，我们加上一句欢迎语，并且加上能够展开输入框的按钮。

我觉得这样一个小任务，使用jQuery来实现，简直再好也不过了，能够非常好的体现出progress enhancement的精神，所以说，我非要亲手实践一下，过过瘾。

我们看到，如果我们什么也不做，就仅有步骤1所表述的功能，自动填写Comment Form这样一个功能本身就是可用的，只不过不是那么漂亮，那么好玩而已！

接着，如果用户浏览器启用了javascript支持，并且，他正确下载了jQuery和页面代码，那么该用户可以得到步骤2，3提供的功能。也就是说，步骤2，3和javascript支持是并存的。

好了，分析结束，讲讲我的实现。因为是增强页面功能，所以，我就不打算去动原来的页面模板文件了。昵称、邮件和网址输入域，各自都有自己的id（分别是author，email和url），对于jQuery来说，这已经非常足够了，所以模板文件没什么需要改动的。只要创建一个js文件，写好上面的功能，链接进去就ok了。

下面是代码：

jQuery(document).ready(function(){
   var $author = jQuery('#author');
   var $author_email = jQuery('#email');
   if ($author.val() != '' && $author_email.val() != '') {
   $author = $author.parent().css('display','none');
   $author_email = $author_email.parent().css('display','none');
   var $author_url = jQuery('#url').parent().css('display','none');
   $author.before(jQuery('

Welcom Back! '+ $author.find('#author').val() +'!

').append(
   jQuery('Change »').click(function(){
   $author.css('display','');
   $author_email.css('display','');
   $author_url.css('display','');
   jQuery(this).parent().remove();
   return false;
   })
   ));
   }
});

标签：code, DIY, javascript, jQuery, my works, WordPress

无侵入与可用性层

Charles — Thu, 25 Sep 2008 08:28:21 +0000

使用jQuery一段时间的感想

早在使用WP之前的很久，我就听说了jQuery了，那个时候，只是惊叹于jQuery的视觉效果，然后记住了这个名字，但是一直也没有开始学习。直到我开始折腾WP这个程序，模板，插件，我才开始更广泛深入地接触jQuery。

在学习jQuery的过程中，我也看了一些牛人关于js的观点，并且从内心深处对此表示深刻认同。

无侵入

js代码应该单独的放在一个文件里面，而不应该混杂在html代码中。现在的页面设计也要遵循数据，表现，行为（动作？）分离的原则。html代码就是纯数据，按照数据本身的逻辑关系来组织，而页面外观，则是纯表现，使用css来指定，最后是行为（动作？或者事件响应？），使用js来实现。

三者的分离，有多种好处，更清晰的逻辑结构，更纯粹的数据，更好的可维护性，而且还对搜索引擎非常友好。外部引入的js和css不会对爬虫分析页面内容造成太大的影响。

所以，在编写js的时候，就要竭尽全力地去将js代码与页面完全剥离开来，至少要做到在内部，完全不出现js代码。

这种代码编写方式，就要求我们写js的时候改变一些陋习，并且更加地依赖于文档对象模型DOM。好，说道这里，问题就来了，使用DOM模型的话，遍历DOM树，就是关键了，如果不使用框架的话，就要自己写代码遍历，但是，由于那个恶心的问题，就是浏览器兼容性问题，各个浏览器实现的DOM模型和支持的js语法有着细微的差别，自己遍历DOM会痛苦无比。jQuery在这个方面，做得非常出色，基本上包揽了一切肮脏的工作。让人写起代码来格外愉快。

实在是很喜欢jQ在DOM遍历中的便捷。

可用性层

关于可用性层，是又一个现在很流行的概念。在十分关注用户体验的Web 2.0时代，页面可用性，已经成为了考量一个页面的质量的关键标准。

但是js由于其巨大的不稳定性，经常失效；还有就是早先对于js的滥用（如该死的弹出广告，漂浮广告，恶意浏览器插件），使得很多用户对js深具戒心，经常有些极端的用户干脆关闭js，斩草除根。

在这种环境下，js的应用只能在夹缝中艰难求存。于是乎，js成了一个附加的可用性层。“附加”代表可有可无。我现在设计页面，写js，也是在这么一种假设下写的，即“用户可能禁用了js”。追求的效果就是，如果用户没有开启js，那么你能看到全部内容，保证了页面可访问性，牺牲了可用性。而如果开启了js，那么用户将得到更加有趣的体验。

于是乎，我就产生了这么一种感觉，页面上附加的所有js应用，有一种“事务”的特征。我们的术语叫做“transaction”。主要就是其中原子性的特点。如果支持js，那么你觉得这个页面是一个功能丰富的ajax应用，非常炫目。如果不开启js，那么你觉得这是一个普通页面，你甚至没法觉察到这个页面背后其实有着大量的js代码。他们只是简单的被完全的，干干净净的，彻彻底底的拿掉了。

关于这一点，我使用jQ的体验，还是由于jQ那操纵DOM的优秀能力，使得这种理念或者这种理念指导下的开发成为了一件让人愉快的事情。

总结

上面两点是我在学习使用jQ的过程中的一些感想，写出来与大家分享一下。我接触Web开发的时间非常短，基本上没有什么经验可以谈的，上面的很多的观点，来自很多我认为牛的人，包括ppk（这个人让我对js的认识更深了一层），以及我订阅的一些牛人的博客里面展示的代码片段所传达的思想。

标签：ajax, develop, javascript, jQuery, opinion

WordPress插件修改：Share This (jQuery)

Charles — Tue, 02 Sep 2008 12:15:49 +0000

Share This 中文，我很喜欢，看起来效果很好，但是……

建议牛人出来重写sofish改过的那个Share This。

Alex King大大写的Share this基本上没有照顾到中文用户。

后来，经过sofish改写，我们有了非常适合中文博客使用的Share this 中文。

但是，这个插件有三大缺憾：

1. 这么简单的功能，居然动用了prototype，此类库尺寸达128k。

2. 在hook使用方面，没有进行优化，如果一般用户不知道，安装了这个插件会在每一个页面都引用一个prototype进来，汗，实际上只需要在single页面引入，更人性化的做法是根据用户的需求来引入js文件和css文件。

3. 完全应该改个名字重新发布，这并不是说对原作者不尊重，而是现在这个插件的代码看起来和原来的已经差别较大了，而且此插件进入官方目录，使用的是GPL协议，我们可以另立门户，这样使用此插件的用户就不必要收到升级的困扰，上次我误点了升级，直接跳到Alex King的版本上了。

希望能有人接手这个工作！

最后还是要谢谢写出这个插件的Alex King和修改它的sofish。

上面是我在论坛发的帖子，没有人响应我，囧……

其实，说的就是一直以来我想做的事情。

实在不能忍了，于是自己动手了，囧！

那个插件的sofish版本还有一个问题的，当时stephen跟我提出过的，就是点击一个搜藏链接的时候，应该采用打开新页面更加符合中国人的习惯。这次我也一并给改了。

好，我就不多说了，把我改的版本放出来给大家分享下吧。

http://www.box.net/shared/naa6u9oi2j

建议：模板里已经使用了jQuery的人推荐用这个版本。

另外：jQuery也不是必须的，因为基本上没有用到相关度的什么特性，所以，建议使用纯js重写，囧！

有学习js的，jQuery的同学愿意尝试下么？

Updated:2008年9月2日21:28:37

调用方法没有变化，大家去sofish的那个页面看看调用方法吧，我懒得写了

标签：jQuery, my works, plugins, WordPress

怎样增加AJAX的可靠性呢？

Charles — Sat, 14 Jun 2008 08:19:20 +0000

本篇文章不是我的经验介绍，而是我的疑问。我写在这里，希望高手看到了能指点一二，而同样迷惑的人看到了，能参与讨论。

我没有系统地学过javascript，也没有系统地学习过ajax，我只是在兴趣的驱使下，在学习一些jQuery的使用。所以，我几乎对任何问题都很迷惑，而在这些问题中，我最迷惑的就是ajax的可靠性问题。

我说的可靠性问题不是指安全问题，而是说，怎么确保一个页面以设计师希望的那种模样出现在用户的面前。就比如我的页面上使用了Ajax加载了部分内容，但是，是否每个人都能正确地看到我的完整页面呢？这个问题，我是回答不了的。其实，我自己使用IE7浏览器，就总是不能看到我自己的页面正确地全部加载。那么，在真正的商用应用中，这种可靠性是怎么被保证的呢？或者说极大程度的保证。

重试机制，如果ajax加载的内容失效，那么应该捕获这个错误，然后进行重试。我在网上看到过关于这个的介绍。但是，我的疑问是，重试多少次呢？5次？10次？不停地重试？要知道，一次ajax加载失败的原因是多种多样的，有可能是刚巧这个时候网络不畅，有可能这个地方的网络总是不畅，比如我自己所在的地方，还有可能是碰巧超时……有些情况，重试个一两次就能解决，但是也不知道到底是几次，还有些地方是根本解决不了的。怎样区分对待这些情况，给用户最好的体验呢？

如果禁止javascript，又怎样保证用户的体验不会太差呢？这又是一个难题，对待这个问题，我目前的看法是，这个问题最后再去考虑，其实大多数用户都是启用了javascript的，虽说现在很多网页的流氓软件都是在看网页的时候用js干坏事的，但是javascript只是被坏人利用了，没必要一棍子打死，我想大多数用户也应该不愿意看到一个因为缺少了js而变得枯燥乏味的互联网。所幸的是，很多杀毒软件，防流氓软件的出现，都有了区别对待的机制，一般都允许打开js，而在危险的时候预警。不过，这个社会总是少不了“别里科夫”的，对于技术和时间都实在有限的我，只有最后再去关心他们的感受啦……

标签：ajax, javascript, jQuery

IE7不支持focus伪类的解决办法

Charles — Mon, 21 Apr 2008 07:51:24 +0000

我目前使用的主题是我自己从5U移植到K2的一个Style，黑色背景。在ffx下面工作正常，但是到了IE7里面，帖子页的留言输入框的背景色就不会因为获得焦点而改变。因此，造成了在IE7下发表留言时，输入框颜色和文字颜色对比度过低而看不清楚。

看了一下CSS文件，发现使用focus伪类来实现当获得焦点时改变背景色的功能，但是，在IE7下面，没有任何效果。网上搜索了一些办法，我觉得可行，正好K2里面也包含了jQuery，可以好好利用一下。

最后，我使用了：

jQuery("textarea").focus(function(){
jQuery("textarea").css("background","white");
});
jQuery("textarea").blur(function(){
jQuery("textarea").css("background","#666");
});

这样四行代码，实现了当获得焦点时候改变背景色的功能。不禁感慨jQuery的强大，以后还要多学学，关键时刻可以拿来救急，呵呵。

标签：CSS, DIY, javascript, jQuery

隐藏搜索框旁边的按钮

Charles — Mon, 10 Mar 2008 02:32:52 +0000

用惯了K2，很喜欢K2的Live Search，真是相当酷的功能呢，但是以我现在的实例，实在是没有办法模仿出来啊。就算是从K2抄过来，也觉得好难啊，至少不是一朝一夕能办到的。

所以，至少（我总是舍难求易）我要模仿个样子过来，(*^__^*) 嘻嘻……

侧边栏的Search框，是WordPress里面自带的，怎么才能把那个按钮给隐藏掉呢？

嘿嘿，我去参考了K2的代码。说实在的，一开始，还真的没有找到。后来经过多种手段（我偷师有多种办法，以后慢慢介绍，哈哈）分析，终于发现，原来K2使用的是javascript脚本代码做到的这个事情。

毫不留情地偷过来，啦啦啦~~~

首先，我编辑了一段代码，存成了js文件。如下：

下载: customutils.js

jQuery(document).ready(function(){
//提示文字
var searchPrompt = "Search...";
//搜索按钮
var submitButton = jQuery('#searchform input[@type=submit]');
//搜索输入框
var inputAera = jQuery('input#s');
//隐藏搜索按钮
submitButton.hide();
//设定搜索框内提示文字
inputAera.val(searchPrompt);
//设定搜索框的行为
inputAera.focus(function() {
if (inputAera.val() == searchPrompt) {
inputAera.val('');
}
})
.blur(function() {
if (inputAera.val() == '') {
inputAera.val(searchPrompt);
}
})
.keyup(function(event) {
var code = event.keyCode;
if (inputAera.val() == '') {
return false;
} else if (code == 27) {
inputAera.val('');
} else if (code != 13) {
//原来是Live Search，也就是每键入一个
//字符，只要间歇超过2秒，就会启动搜索了
}
});
});

有了这段代码，就可以使有“搜索”两个字的按钮给隐藏掉了。
然后要做的就是把这段代码插入到模板主题中。
打开index.php，找到：

head>

在前面加上：

好了，现在试试看吧，什么不行？使用多种手段（靠！又是这个……）发现，原来没有jQuery对象。只好又去下载了压缩版的jQuery.js（这是什么东东？我以后的文章会说的啦~），然后再加上一句：

好了，这下大功告成了。
（我是基于SandBox1.3改的，实际上，要根据自己模板的不同，来决定是否加入jQuery，有的模板可能本来就有了。）

标签：DIY, javascript, jQuery, SandBox, WordPress

您可能也喜欢：
jQuery里面用到“打包盒”	使用Google AJAX Libraries API替换WordPress自带的js库	为何以及如何整合Google搜索到WP博客	Template Tags（模板标签）使用指南	WordPress插件修改：Share This (jQuery)
无觅

您可能也喜欢：
WordPress插件：选项查看器	WordPress插件介绍：cformsII 及其汉化包	WordPress Plugin：Flash MP3 Player	WordPress主题：GoogleCode	WordPress:插件开发API（Plugin API）
无觅