WordPress稳妥的加载JQuery库(防止CDN外链失效)

这个是制作主题时遇到的,因为引用了JQuery脚本库,为了最佳的浏览体验,当然希望这个脚本库加载得越快越好,或者我们的主机商限制了流量,JQuery几十K的流量也要勒紧裤带啊,所以我们会考虑CDN,国内外流行的JQuery CDN有Google的或者Sina云计划,地址分别是:

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js

然后我们就可以直接用script标签引用了,比如这样:

<script type="text/javascript"
        src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>

好吧,速度问题算是解决了,而且有这些大公司做后盾,我们也不必考虑其他问题,等等,没有其他问题了吗?假如我说假如我使用的这家公司倒闭了呢?好吧,现阶段不可能无缘无故倒闭的;假如链接地址更改了呢?或者被XX了?好吧,这个是我们要考虑的问题,针对XX问题,我们可以选择国内sina的CDN,对于前一个问题,我们就需要考虑容灾措施了,假如这些发生了,我们该怎么做?

继续阅读

博客改版采用新主题界面

由于不能忍受先前的在官方Twenty Eleven主题基础上定制的自用主题Blaue的种种Bug,所以决定重新定制一个新的主题自用,实在想不出什么好的名字,姑且就叫做Blaue V2吧,Blaue这个词是由于之前主题的主色调是Black & Blue,所以造出了这么个词,现实中貌似还真有这么个词,不过好像是德文,好了,扯多了,下面谈谈这次主题改造的细节吧。

这次主题改的母版是toolbox主题,但是改动比较大,特别是将Blaue的部分构架融合过来了,而之前的Blaue是基于Twenty Eleven主题的,算是混血儿,所以这次Blaue V2只算是在Blaue基础上做的改进。

1. 放弃了响应式自适应的流布局,采用固定布局模式,固定布局容易操作些,不容易错位,也能很好兼容大多数浏览器。

2. 采用JQuery库,原先我一直很抵触背这么大个JS库的,之前使用的纯JavaScript代码来实现相关功能,后来采用Sizzle选择器(也是JQuery内置的选择器),现在想想干脆直接用JQuery得了,省得为兼容问题而纠结。

3. 采用Google Web Font优化部分英文字体显示。

4. 菜单挪到了顶部,采用当前比较流行的设计样式,本来想把字体大小那段也弄到顶部的,但是感觉有点奇怪,所以作罢。

5. 评论这块采取了NeoEase的做法,将网友讨论和Trackbacks(Pingbacks)用选项卡进行分离,避免阅读评论的干扰,评论发布采用了Ajax技术,但是感觉发布成功这块处理得不是很好的。

6. 404找不到页面和搜索页面单独进行了优化,搜索页面除了显示本站结果外还将用选项卡分割显示Google自定义搜索的结果。

继续阅读

解决IE下自定义HTTP错误页太小不显示并导致显示默认友好错误页问题

今天研究起WordPress的评论发布页wp-comments-post.php,假如我们提交一个不是期望的评论,比如我们什么都不写就点击提交评论,然后WordPress将交由wp-comments-post.php处理,当然这次处理将以失败告终,WordPress将显示一条错误消息,比如:“错误:请填写必填项目(姓名和电子邮件地址)。”。好了,这时如果我们右击查看源代码会找到一段奇怪的字符串:

WordPress wp-comments-post.php源文件 继续阅读

判断浏览器客户端是否禁用JavaScript脚本

主流现代浏览器默认都不会禁用js脚本的,但是也有例外,除了用户主动禁用脚本外,还有就是维护模式下的安全浏览,这样会禁用页面上的js脚本。

禁用了脚本会发生什么?哦,JQuery无法使用?准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效,比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会,严重一点可能感觉像是过着盲人的生活,呵呵,不过有一点可以肯定的是未开启脚本的这部分用户少之又少,我们可以抛弃他们。你说什么?抛弃我们的客户?这怎么可以?别急,下面我要介绍的就是针对这部分用户的判断,以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了,我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用,见得最多的例子是用在统计代码上面,比如有下面的代码:

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

继续阅读

解决IE7-JS导致的JavaScript Invalid argument错误

本来想让旧版本的IE6、IE7以及IE8也能应用一些新特性的,于是尝试使用了ie7-js这款兼容性脚本。关于ie7-js这个我在前面的文章中介绍过,主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
< ![endif]-->

通过上面的代码引入后,效果确实是有了,但是出现了JS错误,特别是在IE6下JavaScript会报类似下面错误:

继续阅读

巧妙利用label标签去除按钮点击或者submit按钮的黑框线

HTML的label标签大家应该不会陌生,什么?没用过?那可以好好看下aoao的这篇《各位大大行行好,给checkbox配个老婆(label)吧》文章。一般在表单中使用,给类似的checkbox或者radio框配上label,明显有助于改善用户体验。

这里借用一下aoao的测试示例:


点啊点啊点这里也没用

上面测试示例的代码如下:

1
2
3
<input type="checkbox" name="testtest" id="testtest" />
<label for="testtest">点啊点啊点这里</label><br />
<input type="checkbox" name="testtest" />点啊点啊点这里也没用

好了,明显感觉的出点文字就能勾选的舒坦吧,当然要使这个label生效,我们只需要给input配一个唯一的id号,然后label标签使用for属性写上这个id号就可以了,当然不希望使用id号的话可以通过下面这种方式使用label功能:

1
2
3
4
<label>
<input type="checkbox" name="testtest" />
点啊点啊点这里
</label>

其实就是把input放到label里。好了,说了这么多,其实主要为接下来的正文铺垫一下。

继续阅读

JavaScript类似于eval加密编码方式的解密解码过程(Unpack)

类似于下面这样的代码,肯定你在研究前端JavaScript脚本时遇到过:

1
2
3
4
5
6
7
8
9
10
eval(function(p,a,c,k,e,r){
e=String;if(!''.replace(/^/,String))
{while(c--)r[c]=k[c]||c;
k=[function(e){return r[e]}];
e=function(){return'\\w+'};
c=1};while(c--)if(k[c])
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),
k[c]);return p}
('0("1 2");',3,3,
'alert|Hello|World'.split('|'),0,{}))

很多朋友以为这段代码是“加密”的,其实这也谈不上是加密,只能算是一种编码(Encode)或者也可以成为是一种打包(packer),类似于base64这样的编码,都是可以以一定方式还原的,当然也就是“解密”了。

我们仔细分析这一段代码,不难发现代码开头都是eval,特征字符串是function(p,a,c,k,e,r)或者是function(p,a,c,k,e,d),其实这样的pack方式是dean edwards提出的,你可以访问其个人主页以获取这方面的最新信息。后来还有一些编码打包方式也是eval开头,但是特征字符串p,a,c,k,e,r(d)改变了,我们姑且称为是这种打包方式的一个变种吧,其实解码很简单,我们回顾一下JavaScript脚本中eval含义及用法。

继续阅读

全球倒计时,Internet Explorer 6 (IE6),再见!

听闻全球IE6倒计时网站中国版上线,真是个让人欢心鼓舞的消息,想必广大的网页设计师已经受够IE6的气了,是时候翻身得解放了,纵观世界,仅中国Internet Explorer 6(IE6)用户就占了近一半,所以这次全球IE6倒计时网站在中国的上线是具有标志性意义的,至少说微软官方已经在中国表态“换掉你手中的IE6吧!”,但是我们绝大多数人懂得,在中国这个特殊的环境下,IE6将会在很长的一段时间内维持一个很大的比例,所以说,作为前端人员,我们不能完全意义上的抛弃IE6,个性的做法还是不可取的,因为这将给一部分用户带来糟糕的体验,并损失这部分用户。

不过太过于钻浏览器的兼容性也是不当的,当然喜欢玩技术的除外,我们更多的是应该寻求一种优雅的降级,之所以是“优雅的”,首先这个是在不影响功能的前提下,适当的损失一些效果,比如CSS 3.0圆角层,大家都晓得IE6不支持CSS3的相关特性,那么对于一般的网页修饰,我们究竟有没有必要去用图片或者VML去追求在IE6下的表现一致呢?完全没有必要,只要不影响功能,我们没有必要将大量的开发时间耗费在产品修饰这些无伤大雅的小问题上,我们应该节省我们的时间去考虑如何将产品做得更好。之前我的博客设计曾经无聊到兼容了IE5,后来发现IE5的流量基本不存在,而且为了考虑兼容IE5已经耗费了我大量的时间,特别是阻碍了一些新技术的加入,所以为了不被一些条条框框所束缚,我干脆就放弃了IE5这类老掉牙的浏览器。

对于开发人员来说,如果你实在讨厌IE6,那么现在就在你的网站上加入提示吧,当然提示应该用委婉的语气,不能恐吓威胁用户,要记住的是用户有选择浏览器的权利,也有选择网站的权利,任何的威胁利诱,只会让你的用户迅速的流向竞争对手,微软官方已经提供了一段代码。大家可以参考一下,不过我感到不足的是,应该加上一个“不再提示”的按钮,要不用户浏览时老是看到那块醒目的提示就会感觉不舒服啦。

对于浏览器兼容,我之前已经写了多篇文章进行介绍了,大家可以猛击这里查阅

JavaScript让登录或搜索文本框自动获得焦点

这确实是个值得注意的细节,今天在XX网站登录界面上遇到了,就先记录下来了,每个网页都有其专注的功能,有的专注于文章资讯等信息呈现,有的专注于视频播放,有的专注于登录,今天要说的就是专注于像登录或搜索等类似功能的网页,打开这一类页面,你会发现有些做得比较好的页面,输入焦点会自动落在要填写信息的第一个文本框里,这样我们就不需要再点击鼠标让此类文本框获得焦点了,这样无形中为用户减少了一步点鼠标的操作,易用性就显著增强了,当然这类效果都是由JavaScript脚本实现的,具体的实现方式也很简单,即使用Obj.focus()方法,使Obj对象获取焦点,但是在实际操作中还是有很多方面需要注意的。

首先,我们要获取文本框对象,这就注定了我们这段脚本必须在文本框渲染完成后才执行,参考多数登录框的设计方案,这类脚本一般都是放在HTML的最后部分,位置在</body>之前,这样在input加载完成后才执行脚本,避免找不到对象的问题。

其次,Obj.focus()方法需要延时调用,并不等于说我们input文本框呈现出来就可以立即设置focus焦点,大部分情况下这样做也许可以成功,但是多测试几次你会发现有时焦点并不能成功设置,这里的原因是某些浏览器在input文本框渲染完成后不能立即为文本框启用获得焦点的特性,所以我们需要做一定的延时,在JavaScript里延时的方式是通过setTimeout函数,时间设置大概在200毫秒即可(参考WordPress的后台登录)。

最后,即使我们采用延时等措施,仍然会有小几率的情况导致无法获取焦点甚至让脚本执行出错,所以我们需要用try {} catch {} 屏蔽错误,无法获取焦点是小事,脚本出错就坑爹了。下面是实现的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 
<head>
<title>文本框获取焦点</title>
</head>
 
<body>
 
<p>
<input type="text" id="userName" />
</p>
<script type="text/javascript">
setTimeout( function(){
  try{
    document.getElementById('userName').focus();
  } catch(e){}
}, 200);
</script>
 
</body>
</html>

后来发现WP的登录页面除了focus还有select方法,原来在用户名记住的情况下,用户名文本框获得焦点后如果我们要清除原先的用户名,只有移动方向键或者使用鼠标选中然后删除,而select正好替我们做了选中这个事情,要输入就直接输入就行了,以上面的HTML为参考,具体的代码如下:

1
2
3
4
5
6
7
setTimeout( function(){
  try{
    var t = document.getElementById('userName');
    t.focus();
    t.select();
  } catch(e){}
}, 200);

END

某些场景下请不要省去URL链接地址后的斜杠

今天在访问某个博客时,看到某位网友评论上留的网址类似于这样https://wangye.org/blog(这里以我的博客作为例子),这样貌似没有什么问题,也能正常打开这个博客,大家可能注意到在打开博客时网址自动变为https://wangye.org/blog/(多了个斜杠),为什么会这样,因为大多数人包括我喜欢将博客放到自己域名下的Blog文件夹里,那么https://wangye.org/blog指的是wangye.org下blog这个文件,当然我们只有blog这个文件夹,那么服务器会返回如下的301转向信息:

1
2
3
4
5
6
Server: Apache/2
Location: http://wangye.org/blog/
Content-Length: 293
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1

很明显,服务器做了一次判断,进行了一次301转向,浏览器也进行了重新定向才定位到正确的/blog/文件夹,表面上看这没有什么问题,但是对于链接来说,当浏览者访问类似于https://wangye.org/blog这样的链接时,必然会对服务器造成资源负担,访问量少时没有什么,当流量比较大时不必要的资源浪费就比较可观了,还有据说这种转向不利于搜索引擎蜘蛛的抓取,所以请在这种情形下网址保留最后个斜杠,写成https://wangye.org/blog/ 吧。