jQuery最佳实践
jQuery最佳实践
1. 使用最新版本的jQuery
jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。
下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：
$(‘.elem’)
$(‘.elem’, context)
context.find(‘.elem’)
我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下：
可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。
其他语句的测试，比如.attr(“value”)和.val()，也是新版本的jQuery表现好于老版本。
2. 用对选择器
在jQuery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。
（1）最快的选择器：id选择器和元素标签选择器
举例来说，下面的语句性能最佳：
$(‘#id’)
$(‘form’)
$(‘input’)
遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。 Read More
[转]Javascript的10个设计缺陷
前几篇文章，我经常说Javascript的设计不够严谨，有很多失误。
今天的这一篇，前半部分就谈为什么会这样，后半部分将列举Javascript的10个设计缺陷。
我参考的文献主要是Douglas Crockford的专著《Javascript语言精粹》（JavaScript: The Good Parts）和Fredrik Holmström的文章《我对Javascript的抱怨》（My gripes with Javascript）。
一、为什么Javascript有设计缺陷？
这里有三个客观原因，导致Javascript的设计不够完善。
1. 设计阶段过于仓促
Javascript的设计，其实只用了十天。而且，设计师是为了向公司交差，本人其实不愿意这样设计（参见《Javascript诞生记》）。
另一方面，这种语言的设计初衷，是为了解决一些简单的网页互动（比如，检查”用户名”是否填写），并没有考虑复杂应用的需要。设计者做梦也想不到，Javascript将来可以写出像Gmail这种极其庞大复杂的网页。 Read More
【转】关于脚本载入器的思考
最近看了一些脚本载入器的文章，包括很火的LABjs,controlJS,还有淘宝玉伯的seajs,很火的话题，也比较有争议！下面转一篇尼古拉斯的文章，我也同意作者的观点，希望很能够得到浏览器原生的支持！
第一篇日志的评论中有来自 Kyle Simpson 的批评 (Kyle 是另一个脚本载入器 LABjs 的创建者)。LABjs 目标和 ControlJS 有些不同：开启 JavaScript 文件的平行下载，同时管理执行顺序。为了要做到这点，LABjs 需要知道哪些浏览器支持平行下载，然后为不支持的浏览器提供其他解决方案。 Read More
找一个平衡点
好久没写博客了，最近比较忙，感觉有点累。不过好像也明白了一个道理，人都是有理想，然而通常情况下，现实却不尽如人意，怎么办呢。怎么样才会幸福呢？为什么有人会一直抱怨，为什么有些人会潦倒一生呢？或许他们还没有找到那个点，或许人生的很多时候都在寻找这样的点，我希望我的工作可以，让我做我喜欢的事，我希望工作能给我成就感，我希望工作能给我职场的机会，可是太多的人，太多的时候，都会那么几个因素不如意。怎么办，明白一个道理“现实不可能尽如人意，人活着也不能没有理想“，找一个平衡点，可以让我有所追求的活着，可以满足同事，公司还有其它对我的要求，我会奉献出我热情和能量，但是请给我一定要保留，我的热情和理想的火种！工作需要这个点，生活同样也需要，或许还有很多！找到了这样的点，人就会踏实了，我们也才可能专注下来，不管是做学问，或者是寻找到下一个的平衡点！
ie无法使用jquery解析xml
今天做一个区域配送部分，需要调用XML来显示各个地区的配送信息，但是用jquery调用xml时，IE总是提示xml文件加载失败，但是在Firefox中的结果却是成功的。代码如下：
[javascript]
$.ajax({
url:”codArea.xml”,
type: “GET”,
dataType: “xml”,
error: function(xml){
alert(‘Error loading XML document’+xml);
},
success: function(xml){
$(xml).find(“pName”).each(function(i){
$(“#province”).append(“<option id=”+i+”>”+$(this).text()+”</option>”);
});
}
});
[/javascript]
$.ajax({
url:”codArea.xml”,
type: “GET”,
dataType: “xml”,
error: function(xml){
alert(‘Error loading XML document’+xml);
},
success: function(xml){
$(xml).find(“pName”).each(function(i){
$(“#province”).append(“<option id=”+i+”>”+$(this).text()+”</option>”);
});
}
});
[/javascript]
标准的jquery调用xml的方式，问题出在哪里呢百思不得其解，最后上网找到答案了，因为IE出于安全考虑，不允许浏览器去直接请求本地磁盘的文件。如果把文件上传到服务器就可以正常访问了，但是如果想在本地看效果，可修改适当的修改一下代码，如下：
[javascript]
$.ajax({
url:”codArea.xml”,
type: “GET”,
dataType: ($.browser.msie) ? “text” : “xml”,
error: function(xml){
alert(‘Error loading XML document’+xml);
},
success: function(data){
var xml;
if (typeof data == “string”) {
xml = new ActiveXObject(“Microsoft.XMLDOM”);
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
};
$(xml).find(“pName”).each(function(i){
$(“#province”).append(“<option id=”+i+”>”+$(this).text()+”</option>”);
});
}
});
[/javascript]
$.ajax({
url:”codArea.xml”,
type: “GET”,
dataType: ($.browser.msie) ? “text” : “xml”,
error: function(xml){
alert(‘Error loading XML document’+xml);
},
success: function(data){
var xml;
if (typeof data == “string”) {
xml = new ActiveXObject(“Microsoft.XMLDOM”);
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
};
$(xml).find(“pName”).each(function(i){
$(“#province”).append(“<option id=”+i+”>”+$(this).text()+”</option>”);
});
}
});
[/javascript]
wordpress函数中文翻译
在讲述下面的WordPress函数之前，我们需要明确这样一点，所有的WordPress函数都是已经定义好的PHP函数，它们都需要写在PHP 语句中（<?php ?>）才能执行；而且，所有这些函数在PHP语句中都应以分号”;”结尾。其实，为了用好这些函数，为你的WordPress服务，你最好具有 PHP语言的基础。
1.bloginfo()
顾名思义，该函数主要用来显示博客信息；而且根据参数的不同，可以用来显示博客信息中的不同部分。常用的有以下几种：
bloginfo(’name’) 显示博客题名，如“月夜”；默认（不写参数）输出该项；
bloginfo(’description’) 显示博客描述部分，如“分享网络知识·享受快乐生活”；
bloginfo(’url’) 输出博客URL地址，如http://www.yueye.org；
bloginfo(’rss2_url’) 显示博客的RSS2.0 feed地址，如http://www.yueye.org/feed；
bloginfo(’template_url’) 用来获取WordPress博客的模板地址；
bloginfo(’charset’) 显示博客的编码方式，如“UTF-8”；
一种常见的使用bloginfo()函数的组合如下：
<a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’description’); ?>” ><?php bloginfo(’name’); ?>
在月夜博客中，如上信息输出形如月夜的样式。这种形式通常会用来添加博客的底部信息，如Copyright @ 月夜，经常在主题模板中使用。
需要注意的是bloginfo()函数只能输出显示这些参量，如果你想在PHP语句中使用得到的这些值，则需使用get_bloginfo()函数，该函数和bloginfo()使用相同的参数，获得相同的结果。 Read More
【转】WEB移动应用框架构想
iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊 叹 web移动应用充斥着各种各样框架与类库的时候，其实各大web框架才刚刚开始他们的移动领域：Yahoo的YUI3.2的Touch版、jQuery的 jQueryMobile、ExtJS整合JQTouch和Raphaël库推出的Sencha Touch框架。。。
ExtJs更名为Sencha的确让我震惊不少，毕竟自己也曾是ExtJs框架的粉丝，如此重量级的框架忽然掉头往mobile touch的方向发展，确实不是一件易事，我们也不禁惊叹移动应用所带来的重大改变。
OK，在这里我并不是想跟大家介绍各种web移动应用框架的用法介绍和性能对比。只是受ExtJs的影响，以及想知道自己到底去到一个什么程 度，以及更好 的积累沉淀下前端的经验，于是我开始构想一个好的web移动应用框架应该如何如何，并开始尝试着手实现。重复造轮子只是强迫自己更深入地去了解这个领域， 并不是自大到要挑战什么。于是分析对比了下，总结如下：
1.轻量级
这个应该是移动应用框架里最重要的一点，不要想着3G的普及还有wifi啥的，国情就是国情，要大部门用户在3秒内下载完你那100K的css 和js文件 是强人所难。因此我们的移动应用框架必须尽可能的轻量化，所有的命名和函数实现方法都要尽可能的简练和高度压缩。抛掉那些PC上web应用的特效和组件 吧，不要为了一个菜单效果把7，80K的jQuery.js加在你的页面上。
2.主流手机浏览器兼容性
面对如此多的手机平台和浏览器，要你的移动应用在所有浏览器上表现如一是很困难的，有时候你需要对不同浏览器加载不同的样式文件，又或是运行不 一样的函数 来实现效果。因此我们的框架必须有能识别各种主流浏览器的方法，具体点，你的框架必须能区分如iPhone、iPad、Android、Windows Phone等，OK，再国情化一点，QQ手机浏览器和UCWeb。最后要注意的是这里尽量不用UA的方法来判断，因为各浏览器的 avigator.userAgent都很不可靠，这里可以参考下mooltools判断浏览器的思路，应用到我们的移动领域上。 Read More
区别中英文截取字符(二)
是为了对上一篇“区别中英文截取字符”做个补充纠正，其中有一点，我是概念上混淆了，一个UTF-8中文字确实是占了3个字节，但是字符宽度还是2个字符宽度，所以造成了UTF-8下，截取相同数量的字符，但是宽度却不相同,更正后的代码还是有一定的局限性，就是要用等宽字体“如宋体,sans-serif”，但是如果你定义成了非等宽字体就不适用了如“Arial”,举个最简单的例子“a”,”w”这两个字母定义成“Arial”的时候，它们的宽度是不相等的。希望大家能提供更好的思路来解决这个问题，fixtext插件代码如下：
[javascript]
(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:”15″
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
var currentStr=”";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-4:options.maxLen;
for(var i=0,len=textlen;i<len; i++){
currentStr+=text.charAt(i);
if(getCharLength(currentStr)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+”……”}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str){
var charLen=0;
for (var i=0,len=str.length; i<len; i++){
if(str.charCodeAt(i)>255){
charLen+=2;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)
[/javascript]
Demo : http://www.rainboys.cn/demo/fixtext.html
插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js
区别中英文截取字符
最近很忙，博客很久没有更新了，今天抽出了一点闲暇时间，动手写了这个“区别中英文截取固定字符”的jQuery插件，暂且命名为fixtext吧，相信前端的兄弟们，这种情况会经常遇到，但是一直找不到太完美的解决办法，通常下用css截取，但是css有弊端，最令人不满意的是，限定宽度后有可能会截掉不完整的字符，相当的不雅，后台截取当然最好，但是多数情况下PD不一定愿意干这个活。今天特意写了这个插件，基本能满足大家的工作需要了，包括中英文混排的文字，并且可以区分UTF-8,和GB2312，这样大家应该清楚，中文的编码不一样占的字符也是不一样的，UTF-8占了三个字符，而GB2312占了两个字符，另外还包括一个非常实用的功能——是否保留省略号，用起来还算方便吧。
fixtext插件源码：
[javascript]
/*
* fixtext 0.1
* Copyright (c) 2010 Rainboy http://www.rainboys.cn/
* Date: 2010-07-26
* 区别中英文截取字符
*/
(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:”15″
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
//判断网页的编码方式,如果是UTF-8那么一个汉字就占3个字符，如果GB2312一个汉字占2个字符
var webcode;
webcode=(document.characterSet)?document.characterSet:document.charset;
incre=(webcode.toUpperCase()==”GB2312″)?2:3;
var currentStr=”";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-2*incre:options.maxLen;
for(var i=0,len=textlen;i<len; i++){
currentStr+=text.charAt(i);
if(getCharLength(currentStr,incre)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+”……”}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str,incre){
var charLen=0;
for (var i=0,len=str.length; i<len; i++){
if(str.charCodeAt(i)>255){
charLen+=incre;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)
[/javascript]
引用脚本
[javascript]
$(要截取的对象).fixtext({ellipsis:false,maxLen:”20″});
[/javascript]
这里面包括了两个参数ellipsis和maxLen,顾名思义，ellipsis它就是决定是否保留省略号的，当他的参数是“true”的时候，就保留省略号，“false”时就不保留省略号，maxLen就是截取的字符长度，有一点提醒一下大家，maxLen包括省略号的长度，比如要截取20个字符，并且保留省略号，如果页面编码是GB2312,那么截取的字符就是16个。插件的源代码就不解释了，注释已经很详细了。童鞋们使用过程中遇到了问题的话，请给我留言！欢迎大家来交流！
Demo : http://www.rainboys.cn/demo/fixtext.html
插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js