yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

典型代码示例


yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?

个人认为主要 是这两点:

  • 可以同时处理javascript以及css
  • 能够按条件加载

yepnope的全部参数

yepnope([{
  test : /* boolean(ish) - 你要检查真伪的表达式             */,
  yep  : /* array (of strings) | string - test为true时加载这项  */,
  nope : /* array (of strings) | string - test为false时加载这项 */,
  both : /* array (of strings) | string - 什么情况下都加载              */,
  load : /* array (of strings) | string - 什么情况下都加载              */,
  callback : /* function ( testResult, key ) | object { key : fn }   当某个url加载成功时执行相应的方法         */,
  complete : /* function   都加载完成了执行这个方法                                                   */
}, ... ]);

这里的参数都可以是array或者object,在加载多个资源文件的时候有用。

yepnope加载jquery的实例

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。

如何安装Node.js

下面分别介绍在Mac, Ubuntu,Centos以及Windows下安装Node.js.

Mac

在Mac下,如果你喜欢用homebrew,那么只用一行就可以装好:

brew install node

否则,只能考虑手工安装了,步骤如下:

    1. 安装Xcode
    2. 安装git
    3. 运行下面的命令行编译node.js
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Ubuntu

    1. 安装依赖包
      sudo apt-get install g++ curl libssl-dev apache2-utils
      sudo apt-get install git-core
    2. 运行下面的命令行:
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Windows

用cygwin来安装node,步骤如下:

    1. 安装cygwin
    2. 在cygwin的目录下,运行setup.exe安装下面列表中的包
      • devel → openssl
      • devel → g++-gcc
      • devel → make
      • python → python
      • devel → git
    3. 运行cygwin
    4. 运行下面的命令行:
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Centos

yum install gcc-c++ openssl-devel
wget --no-check-certificate https://github.com/joyent/node/tarball/v0.3.3
tar -xzvf ry-node-v0.3.3-0-g57544ba.tar.gz
cd ry-node-v0.3.3-0-g57544bac1
./configure
make
make install

Hello Node.js!

写一段小程序例如hello_node.js来验证安装是否正确:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

用node来运行这段代码

node hello_node.js
Server running at http://127.0.0.1:8124/

现在,用浏览器打开 http://127.0.0.1:8124/ , 应该能够看到一条好消息。

参考文档

How to Install Node.js

Update

  • 补充了在centos上安装Node.js的步骤

如何在jquery mobile中加载google map api

介绍一个用jquery mobile的ajax效果加载google map api,实现地图呈现的例子。

代码示例

首先是代码示例,使用iphone或android之类的手机查看,效果更佳
google map with jquery mobile

关键代码说明

map.js

map.js定义了加载地图的方法initiallize(),这个和常规网页中加载google map是一致的,因此这里不再细述。

map.html

地图的实际页面,在这个页面中不能直接加载google map的api,因为它是采用document.write再次写入script来实现的,所以我们采用callback的方式来加载它,见下面的代码:

head.js(
        "map.js",
        function() {
            head.js("http://maps.google.com/maps/api/js?sensor=true&callback=initialize");
        }
    );

首先用head.js把initialize方法装载进来,然后用callback方式调用google map api。你可以试试用最平常的方式加载这段代码,看看有什么效果。


<script src="map.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"></script>

code-prettify — wordpress语法高亮插件

最近基于google-code-prettify实现了一个代码高亮的wordpress插件 — code-pretttify,测试了下效果还不错,所以我马上把全站的代码高亮插件换成了这个。

这里是code-prettify的项目主页,我会把这个plugin的最新情况更新在这里。

code-prettify的特点

  • 完全由javascript完成代码高亮,不占用服务器资源
  • 使用简单,只要用<pre><code>和</code></pre>包住代码,发布即可,这是wordpress编辑器自带的quicktag。
  • 没有添加额外的hook,所以不会和别的wordpress插件产生冲突,绿色无污染
  • 载入速度很快,因为js是在页面尾部加载的,不会堵塞页面的载入!

代码高亮效果演示

eg:


<pre><code>
class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}
</code></pre>

Effect:


class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}

测试objective-c的code prettify效果

TTImageView *thumb = [[[TTImageView alloc] initWithFrame:CGRectMake(30, 30, 0, 0)] autorelease];
[thumb setAutoresizesToImage:YES];
[thumb setURL:@"http://farm4.static.flickr.com/3163/3110335722_7a906f9d8b_m.jpg"];
[self.view addSubview:thumb];

code-prettify下载

暂时把代码托管到github.com/volca/code-prettify,所以你可以直接使用git下载代码,或者直接从github下载现成的zip包。

代码非常简单,如果你有合适修正,可以试着用github推给我。

Update

另外安装了一个全新的wordpress测试,发现一些bug,因为wordpress默认对文本进行格式修正,在代码后面添加了很多br以及p标签,导致插件失效,所以我不得已用php替换了一些内容保证插件的正常运行。

图片预加载效果的实现

使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~

于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js。

代码示例



var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
  document.getElementById('myImage').src = this.src;
}

如此这般,待大图载入完成之后,利用js替换原小图的src,就完成了图片预加载效果。关键点是图片的onload事件利用。

Google AJAX Feed API的冷门用法

Google AJAX Feed API是google提供的一个很实用的API,我经常用它来跨域获取某些rss feed并展现。但是使用前需要申请一个API KEY,然后才可以在指定网站上使用,如果有多级子域名的话,挨个申请key是一个很烦人的事情,所以也就有了下面说的冷门用法。

Google AJAX Feed API提供了针对Flash或javascript无效这两种环境的额外接口,其中一种可以支持jsonp方式调用,跨域调用feed就全靠它了。

jsonp调用代码示例



这段代码中,指定了callback function为foo,所以我预先定义了一个function foo,运行时就可以在firebug的控制台里清楚的看到返回的json串结构。

jQuerify书签

我不知道有多少人在使用浏览器的书签,这东东有时候实在是很有用的,比如现在说到的jQuerify书签

jQuerify书签的功能很简单,那就是在当前页面中直接载入jquery.js,并以一个粉红色的浮动层提示jquery已经载入。书签的源代码如下:

var s=document.createElement('script');
s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
if(typeof jQuery!='undefined') {
  var msg='This page was already jQuerified'
} else {
  document.getElementsByTagName('head')[0].appendChild(s);
  var msg='This page is now jQuerified'
}
var el=document.createElement('div');
  el.style.position='fixed';
  el.style.height='30';
  el.style.width='200';
  el.style.margin='0 auto 0 auto';
  el.id='jq-kswedberg';
  el.style.top='0';
  el.style.left='40%';
  el.style.padding='5px 10px 5px 10px';
  el.style.backgroundColor='#f99';
  el.innerHTML=msg;
var b=document.getElementsByTagName('body')[0];
b.appendChild(el);
window.setTimeout(function() {
  jQuery('#jq-kswedberg').fadeOut('slow',function() {
	jQuery(this).remove()
  });
}, 2500);
void(s);

书签的链接在下边,如果是firefox的话,可以直接拖拽到firefox的书签栏上。

» jQuerify «

这里用到了最近说到的google cdn,速度可是足够快的。在使用书签之后,就可以尽情享受jquery的便利了,比如在firebug的console输入:

$('body').background('#ffc')

你会看到屏幕的背景色变黄了:)

jQuery UI 1.5

jQuery UI 1.5正式版发布,仍然保持了jquery简单易用的特点。

简化的API调用

这个版本最大的改进是重新定义了API规则,之前API提供的95%以上的方法都移除了,取而代之的是更简单的调用规则,每个plugin只保留了一个方法,以draggable为例:

  • $(”div”).draggable() 创建一个拖拽对象
  • $(”div”).draggable(”destroy”) 删掉拖拽对象
  • $(”div”).draggable(”method”) 呼叫这个plugin的其它方法

jQuery UI的另外一个杀手级应用——ThemeRoller

ThemeRoller

利用ThemeRoller,你只要几分钟就可以创建一个自己的主题,可以方便调整色彩并预览效果,在调整满意之后,还能将主题的图片和css以zip包下载,算是相当贴心的一个功能,只可惜从国内访问过去速度有些抱歉。

jQuery UI 1.5的整个包包大小是1.78M,相比yui来说是有过之而无不及。好在包内的各个demo都是真材实料,相当精彩,大一点也无妨。

更详细的信息请看:jQuery UI v1.5 Released, Focus on Consistent API and Effects

我也试用YUI Uploader

早就知道YUI里面有Uploader这么一个上传组件,可以按住ctrl多选文件上传(就像flickr那样的上传),并且可以支持进度条,这样对用户来说是相当方便的。

由于YUI Uploader是利用javascript + flash实现的,所以用户的浏览器上只要有flash player就可以使用,也不需要额外安装别的插件了,这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

  • 首先下载Uploader批量上传页的html源文件
  • 解压后放置在你的web服务器上,比如我就是在自己的台式机上安装了一个xampp
  • 现在需要一个处理上传操作的后端程序,在这里我是用php简单的写了一个,如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php,源文件如下:
    foreach ($_FILES as $fieldName => $file) { 
    	$name = md5(microtime());
    	move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg'); 
    	echo $fieldName . ' uploaded!';
    }
  • 下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf,然后把uploader.swf放在和upload.php的同一目录下,这是为了避免javascript和flash交互过程中出现跨域问题。
  • 修改uploader-advanced-source.html
    • 把”YOUR UPLOAD URL GOES HERE”替换成你的upload.php所在的url,比如我的就是http://localhost/yui/upload.php
    • 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
  • 现在访问uploader-advanced-source.html,试试批量上传功能吧

试用的一点补充

  • 这个例子里面的php源文件只是考虑上传n张jpg文件的情况,可根据实际情况调整。
  • 上传后的文件名是md5随机加密的,在upload.php同一目录可见
  • 由于flash的bug,运行在windows下的firefox无法正确获得flash传递过来的cookie,如果上传应用对cookie有依赖,可能会需要做额外的处理。
  • 为了能够确切的显示上传进度条,可能需要php 5.2的apc扩展支持
  • 上传进度由flash完成
  • YUI 2.5.2已经附上uploader.swf的actionscript,有一定的学习价值

贴一张Uploader使用效果图

利用Google Ajax Library API加速常用js类库的载入

google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有:

google提供的这批js类库都有使用cdn,同时提供压缩和非压缩版本,并gzip输出。比如Prototype在未压缩前是124k,压缩后则只有30k,而jquery经过瘦身以后,也是从97k降到了16k。

这项服务的意义在于,如果各个网站都使用google提供的某个js类库比如jquery,那么由于浏览器缓存的缘故,用户就可以避免下载相同内容的js,这样也就能提高js的载入速度了。

google ajax library api使用方法

传统方式

使用google.load载入



下面是一段小小的视频用来解释它的工作原理:

Update

昨天在某个小页面上尝试引入google提供的jquery.min.js,结果让我大失所望,虽然有时候访问速度很快,但是偶尔能刷出22秒以上的响应时间,如果是这样不稳定的话,那么实在是不敢放心使用。