开心老爸

Head JS : The only script in your HEAD

2010-12-09,17:41

很久没在 blog 里提到有关"技术"的内容了,其实我觉得这是件好事。不然一个咖啡师总是谈些和网站设计什么的相关的话题也有些怪怪的。

但是个人的爱好兴趣什么的也不是说放就可以放掉的,我还是觉得偶尔研究一下网站前端的技术是挺有意思的事。

言归正传,Head JS 是一段只有不到 3K 大的 JS 代码。它诞生的目的是为了独占 <head> 标签,成为页面头部的唯一脚本(The only script in your HEAD)。

事实上之前我的页面头部里也只有一个 JS ,是用来辅助 IE 识别 HTML5 标签的。现在, head.js 也内置了这个功能,所以理所当然的替代了之前的那个功能单一的 JS。替代之后,又给页面增加了很多其他功能,有一些还是很酷的。

1、异步加载其他 JS 文件,比如 Jquery 。虽然之前我也是把引用的外部 JS 放在页面底部的,但是用了 head.js 之后,我可以把所有 JS 内容汇集成一个文件,放在页面的最后。然后就可以在这个 JS 文件里来引用其他外部 JS 。比如我的页面里最下方引用了一个 JS 内容为:


head(function() {
........
});
/* part 1 */
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
/* part 2 */

其中第一部分是页面加载完成后要执行的 JS 脚本,第二部分是执行脚本前先引用的外部 JS 文件地址,很明显如果想要升级使用的 Jquery 版本,我只要修改这个文件就行了而不用变动页面内容。这对于采用静态发布的 MovableType 来说很有用。

2、CSS3 属性支持度检测。说起来很拗口,意思就是可以分辨出浏览器是否支持某条 CSS3 属性。如果支持某条属性,那么将会在页面的 HTML 节点上加上一个以这个属性命名的 class ,如果不支持则这个 class 的名字就有个 no- 前缀。比如,IE6 不支持 boxshadow 属性的,那么浏览这使用 IE6 访问页面时,页面的 html 节点就是类似这样的:<html class="no-boxshadow">

这样就可以在 CSS 文件里设定当浏览器不支持某个高级属性的时候用其他的方案来替代。


.boxshadow .box{
box-shadow: 0px 0px 5px #bbb;
}
.no-boxshadow .box{
border: 2px solid #bbb;
}

目前 head.js 可以检测的 CSS3 属性有 borderimage borderradius boxshadow opacity reflections rgba textshadow transforms transitions

3、head.js 可以检测浏览器的种类、版本,还可以检测当前访问的页面相对于网站根目录的路径,更酷的,head.js 可以动态地检测到浏览器当前窗口大小。并且,把前面这几个属性都动态地传递给 html 节点,添加上相应 class !这样再配合 CSS 就可以制作出一个适应各浏览器、每个页面都独特得、随着窗口大小的改变自动变换排版的酷设计了。

比如本页,如果你使用的是诸如 chrome、safari 等等高级浏览器,并且你的屏幕分辨率大于 1280 ,请拖动浏览器窗口放大或缩小......文章会根据浏览器窗口的大小动态的变换成单列或双列。(临时制作的效果,还有很多不尽人意的地方,仅作演示用吧)

过多得介绍实在没必要,因为官方页面上有详细的文档,比我说的清楚多了。

直接跃迁到 head.js 文档页面: https://headjs.com/

2010/12LearningWeb

fin.

哈喽,我是定格咖啡创始人 dimlau本站界面由我设计。

你可以在其他地方关注我:新浪微博腾讯微博Google+

© 2007-2018 dimlau.