典型代码示例

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加载失败的情况做了一个备用处理。

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的步骤

代码示例

首先是代码示例，使用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的项目主页，我会把这个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替换了一些内容保证插件的正常运行。

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

代码示例

<img id="myImage" src="small_144.jpg" width="640" />
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提供了针对Flash或javascript无效这两种环境的额外接口，其中一种可以支持jsonp方式调用，跨域调用feed就全靠它了。

jsonp调用代码示例

<script>
function foo(rss) {
	console.log(rss);
}
</script>
<script src="http://ajax.googleapis.com/ajax/services/feed/load?q=http%3A%2F%2Ffeed.ooso.net&v=1.0&callback=foo"></script>

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

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')

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

简化的API调用

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

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

jQuery UI的另外一个杀手级应用——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是利用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使用效果图

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

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

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

google ajax library api使用方法

传统方式

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

使用google.load载入

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>

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

Update

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

使用方法

• 首先你需要使用firefox浏览器
• 安装firefox的greasemonkey插件
• 安装firebug插件并重启firefox
• 安装TudouDownloadList，如果greasemonkey安装正确的话，点击之前的链接应该会弹出一个安装框。
• 去访问土豆的豆单播放页，比如机动战士高达seed，呼出firebug(按F12就可以了)，你会看到firebug的控制台里生成了一批flv文件的列表
• 复制这批flv文件的url，保存为后缀为.lst的文件
• 使用flashget导入列表即可批量下载土豆豆单了

补充

为了能使用快车正常下载，你需要把下图所示的小勾去掉。

这本书按照 创造共用方式授权，这意味着你不仅仅可以合法的免费下载，还可以按照自己的意愿做些修改。我翻看了一些章节，这本书对于AIR的html + js开发者来说，是一本很好的入门教程。这次更新的内容还包括AIR的安全模型介绍。

但是兴趣这玩意可能也有些生理周期，前几天突然来了神把这个AIR好好端详一番，却发觉网上暂时没有适合我这种初级新手看的AIR教程，鼓捣了几天，仍然是毫无进展，我甚至连个hello world之类的简单air package都打不出来。也许小时候特意去踩过狗屎，因此现在我又走上狗屎运，在即将放弃的前一刻找到了一篇比较细致的AIR教程，记录下来，好记性不如烂键盘。

俺目前的情况是，没有安装Dreamweaver，Flash之类的软件，只用一些免费软件，所以我只打算写html/javascript之类的代码，flash方面的暂时不涉及，另外adobe提供的dreamweaver air sdk也是用不上，可谓一穷二白。

第一步 — 安装Adobe AIR和Adobe AIR SDK

如果你还没装，可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后，为了方便，你还需要把它的bin目录添加到系统的path变量下，这样你可以直接运行它的打包和debug工具。

第二步 — 创建一些目录

接下来创建一些目录来放置代码，比如：

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

第三步 — 创建一个Application Descriptor

AIR需要一个Application Descriptor来描述它的内容和属性，这是一个XML格式的文件。

它的文件名是application.xml，放置在/appname/source/目录。

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.appname </id>
  <version>1.0 </version>
  <filename>AppName </filename>
  <initialWindow>
    <content>index.html </content>
    <visible>true </visible>
    <width>600</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/appname-16.png</image16x16>
    <image32x32>icons/appname-32.png</image32x32>
    <image48x48>icons/appname-48.png</image48x48>
    <image128x128>icons/appname-128.png</image128x128>
  </icon>
</application>

这个xml文件很有些复杂，也很有一些历史，最可恶的是AIR beta1到后来的beta2乃至最后的1.0，从来就没统一过，变了又变，所以我在网上找到的一些教程都失效了，只能针对早期的beta版使用。

关于它的详细内容，可以参考模板，在adobe sdk安装目录下的templates/descriptor-template.xml.

第四步 — 创建你的应用

下一步，创建一个index.html.

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

如果需要添加css,javascript以及图片，可以在/appname/source/下创建子目录放进去，就像平常写web应用那样。

第五步 — 测试你的应用

如果你已经配置好了path环境变量（见第一步,需要重启电脑），下面很简单，首先打开一个命令行窗口，进入/appname/source/目录，然后运行：

adl application.xml

一切顺利的话，你的应用应该已经跑起来了，一个弹出的AIR应用窗口好不容易的展示它的第一次。

第六步 — 打包你的AIR应用

在很多磕磕碰碰，反复调试之后，你可能已经完成了应用，现在你准备向朋友或者网上的菜鸟炫耀一下你的处女作。那么我们开始打包，这一步其实比我想象的要简单。

首先需要生成一个签名Certificate，并放置在应用的根目录/appname/

adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 换成你的密码

然后就是进入source目录打包：

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

不出意外的话，会当场生成一个AppName.air文件，你可以安装一下感受亲手做的第一个Air应用。

原文：Adobe AIR Tutorial for HTML / JavaScript Developers

列一下最近碰到的问题，备忘。

混用时，YUI的Event在ie6下表现异常

下面代码中，没能在window.onload事件中弹出一个alert弹出窗口。

<script>
YAHOO.util.Event.on(window, 'load', function() {alert('hello');});
</script>

猜想是jQuery重写了window.onload事件引起冲突，解决办法，使用jQuery的event。

<script>
jQuery.event.add(window, "load", function() {alert('hello');});
</script>

Download

Inline-js 0.4

详细信息

inline-js wordpress plugin

2月20日，YUI Team发布了YUI的最新版本2.5.0。增加了6个全新的组件：Layout Manager, Uploader(结合Flash和Javascript的多文件上传引擎), Resize Utility, ImageCropper, Cookie Utility和ProfilerViewer Control。同时这一版还提升了DataTable Control的功能和Slider Control增加了双滑块功能。

这个版本中的Uploader以及ImageCropper应该是相当有用的控件

• Uploader采用javascript和flash，不仅支持多文件上传，更可以直观的查看上传进度，以前虽然有类似的代码，但是组件化的代码显然通用性和可用性更好。
• ImageCroper可用于制作图片切片，基于YUI的Dragdrop和Resize

与YUI 2.5.0相关的链接

• http://developer.yahoo.com/yui
• yuiblog.cn

放出来给需要的同学下载。

安装这个脚本的步骤

• 首先你必须是使用firefox浏览器
• 安装greasemonkey插件
• 下载俺的NewsSina greasemonkey脚本，如果你已经安装好greasemonkey，点击前面的链接应该会弹出一个安装窗口
• 去新浪的新闻页上看看，右边的内容还有吗？

2008年1月14日雅虎中国正式发布本地版的YUI 2.4.1，今后将与YUI保持同步更新。这对国内的YUI使用者来说绝对是一个好消息，本地版的YUI采用了本地CDN部署，对于国内用户来说访问速度更快(图一)，比较访问国际YUI主机的速度(图二)快了至少5倍以上。

使用firebug查看载入速度

原文：YUI Blog China

YUI Rich Text Editor的特点

• 标识为A级的浏览器支持良好，跨浏览器也有很好的表现
• 扩充方便，可以添加你自己的button
• 从图片上看，这个编辑器还支持直接从flickr抓取图片——可惜flickr在国内已经被和谐…

YUI 2.3.0另外新增的5个组件

• Base CSS
• YUILoader Utility (beta)
• ImageLoader Utility (experimental)
• Color Picker Control (beta)
• YUI Test Utility (beta)

object操作

• firefox:可支持

  var obj = { 'key' : 'aaa', }

• ie:不支持

  var obj = { 'key' : 'aaa', }

  会报javascript错误,最后的”,“必须去掉

javascript对select元素的option操作

• firefox:可直接设置

  option.text = 'foooooooo';

• ie:只能设置

  option.innerHTML = 'fooooooo';

删除一个select的option

• firefox:可以

  select.options.remove(selectedIndex);

• ie7:可以用

  select.options[i] = null;

• ie6:需要写

  select.options[i].outerHTML = null;

真是万恶的浏览器。

Javascript

• + 不需要额外的插件.
• - 不同的浏览器下可能会产生不同的行为
• - 不能访问音视频设备
• - 可能会有少数用户会关闭javascript
• - 如果你写的代码很烂,大家都能看到

Flash

• - 需要额外安装插件
• + 在各种浏览器上,如果flash player的版本一致,那么flash的行为也会基本一致
• - 用户可能不会安装有相同版本的flash player
• + 可以直接访问音视频设备
• - 可能会有很多用户屏蔽flash
• + 如果你写的代码很烂,不用担心,大家都看不到

这里是一段提醒jquery已经载入的脚本，为了避免和页面上原有的代码冲突，得运行$.noConflict().

// All your GM code must be inside this function
function letsJQuery() {
//make sure there is no conflict between jQuery and other libraries
$.noConflict()
//notify that jQuery is running...
  $('<div>jQuery is running!</div>')
	.css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'})
	.prependTo('body')
	.fadeIn('fast')
	.animate({opacity: 1.0}, 300)
	.fadeOut('fast', function() {
	  $(this).remove();
	});
//start custom jQuery scripting.
}

引入jquery.js只用简单的一行，感谢greasemonkey!

GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';

载入jquery的脚本

var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

原文:Have Your jQuery Fun on Any Site with Greasemonkey

newjs.onreadystatechange = function () {
        if (newjs.readyState == 'loaded') {
            // ready!
        }
    }

    newjs.onload = function () {
        // ready!
    }

主要利用了onload以及onreadystatechange事件。把这个加以利用，也能动态载入外部css。下面是同时适合Ie/firefox的写法。

var css;
function include_css(css_file) {
    var html_doc = document.getElementsByTagName('head')[0];
    css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);

    // alert state change
    css.onreadystatechange = function () {
        if (css.readyState == 'complete') {
            alert('CSS onreadystatechange fired');
        }
    }
    css.onload = function () {
        alert('CSS onload fired');
    }
    return false;
}

var js;
function include_js(file) {
    var html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);

    js.onreadystatechange = function () {
        if (js.readyState == 'complete') {
            alert('JS onreadystate fired');
        }
    }

    js.onload = function () {
        alert('JS onload fired');
    }
    return false;
}

这里是Demo，有动态载入css以及js的例子。

原文地址

http://www.phpied.com/javascript-include-ready-onload/

1. Rich Text Editor
The YUI RTE beta comprises an editor window and toolbar, the latter of which has a simple, extensible plugin architecture. It will feature full A-grade support. (Dav Glass)

2. ImageLoader Utility
Images often constitute the most data-heavy parts of a page, but many times users load images that they never see — because the image is below the fold, because it is in an obscured tab in a TabView, etc. The YUI ImageLoader is a new, experimental component that allows you to defer the loading of images based on criteria you specify and to then load those images when a specific “trigger” is hit. In some cases, use of ImageLoader can significantly reduce bandwidth and increase performance. (Matt Mlinac)

3. Base CSS
YUI’s Reset CSS normalizes browser CSS styles by stripping out browser-defined styles; this allows you to begin your CSS styles with all style decisions being intentional rather than inherited. YUI’s Base CSS will help you begin the process of making your styles intentional by providing a common set of treatments that most implementations share. (Nate Koechley)

4. Color Picker
Previous versions of YUI shipped a Color Picker example as part of the Slider Control. In 2.3, we’re formalizing Color Picker and completing its API to make it easier to implement this powerful control in your apps. (Adam Moore)

Notable Changes to Existing Components:

1. Button
Button remains in beta as we modify the architecture a bit. As of 2.3, the SplitButton implementation will replace MenuButton and be generic — allowing you to implement Buttons that have Menus or any other sub-control you wish. (Todd Kloots)

2. Connection Manager
YUI’s XHR utility will be enhanced with a Custom Event API that adds granularity to the interesting moments you can pipe into on your XHR transactions. (Thomas Sha)

3. DataTable
DataTable will undergo a major rearchitecture as it evolves to its second beta. Details on the DataTable evolution for 2.3 will be presented during an open conference call for all interested implementers during the second half of June. An invitation to the call will be sent out to this list a week prior to that call. (Jenny Han)

4. Browser History Manager
Browser History Manager comes out of experimental status with 2.3 and is promoted to beta, accompanied by several bug fixes and some key enhancements requested by YUI implementers during the experimental phase. (Julien Lecomte)