彬Go » Javascript http://blog.bingo929.com 关注前端开发/网页设计/网站可用性/用户体验 Fri, 16 Dec 2011 17:14:51 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html#comments Sun, 11 Dec 2011 15:30:11 +0000 彬Go http://blog.bingo929.com/?p=3186

　　早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog！

您还可以参考以下HTML5相关文章:
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

人人网 - 拖拽上传

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

拖拽上传应用主要使用了以下HTML5技术：

  • Drag&Drop : HTML5基于拖拽的事件机制.
  • File API :  可以很方便的让Web应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
  • FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&Drop 拖拽事件

　　关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

var oDragWrap = document.body;

//拖进
oDragWrap.addEventListener('dragenter', function(e) {
　e.preventDefault();
}, false);

//拖离
oDragWrap.addEventListener('dragleave', function(e) {
　dragleaveHandler(e);
}, false);

//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
//不然会无法触发后面的drop事件
oDragWrap.addEventListener('dragover', function(e) {
　e.preventDefault();
}, false);

//扔
oDragWrap.addEventListener('drop', function(e) {
　dropHandler(e);
}, false);

var dropHandler = function(e) {
//将本地图片拖拽到页面中后要进行的处理都在这
}

获取文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是<input type=”file”>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

var fileList = e.dataTransfer.files;

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

var fileNum = fileList.length;

　　拖拽上传需要注意的是需要判断两个条件，1:拖拽的是文件不是页面中的元素; 2:拖拽的是图片而不是其它文件,可以通过file.type属性获取文件的类型

//检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {return;};
//检测文件是不是图片
if (fileList[0].type.indexOf('image') === -1) {return;}

　　下面让我们来看看如何结合之前的拖拽事件来实现拖拽图片并在页面中进行预览：

var dropHandler = function(e) {
　e.preventDefault();

　//获取文件列表
　var fileList = e.dataTransfer.files;

　//检测是否是拖拽文件到页面的操作
　if (fileList.length == 0) {return;};

　//检测文件是不是图片
　if (fileList[0].type.indexOf('image') === -1) {return;}

　//实例化file reader对象
　var reader = new FileReader();
　var img = document.createElement('img');

　reader.onload = function(e) {
　　img.src = this.result;
　　oDragWrap.appendChild(img);
　}
　reader.readAsDataURL(fileList[0]);

}

　　这里有一个简单的拖拽图片预览的Demo

　　这时你如果用FireBug等类似调试工具查看DOM的话，会看到<img>标签的src属性是一个超长的文件二进制数据，所以如果DOM有很多这类图片，那就要当心浏览器性能了，因为这些数据极大地扩充的页面的代码量，而每次页面的reflow都会对浏览器形成很大的负担，So,如果这些图片还在DOM中，那就尽量不要做动画或任何重绘操作，如果真的要做就尽量让图片脱离文档流，让其绝对定位比较靠谱。

补充：可以使用window.URL.createObjectURL(file)来获取文件的URL(Chrome下用window.webkitURL.createObjectURL(file))，这种方式获取的URL要比上面说的readAsDataURL简短很多。而且可以省去使用FileReader。下面是使用readAsDataURL与createObjectURL生成的<img>代码对比：

readasdataurl-vs-createobjecturl

优化后的代码：

var dropHandler = function(e) {
　e.preventDefault();

　var fileList = e.dataTransfer.files;　　//获取文件列表
　var img = document.createElement('img');

　//检测是否是拖拽文件到页面的操作
　if (fileList.length == 0) {return;};

　//检测文件是不是图片
　if (fileList[0].type.indexOf('image') === -1) {return;}
　
　if (window.URL.createObjectURL) {
　　//FF4+
　　img.src = window.URL.createObjectURL(fileList[0]);
　} else if (window.webkitURL.createObjectURL) {
　　//Chrome8+
　　img.src = window.webkitURL.createObjectURL(fileList[0]);
　} else {
　　//实例化file reader对象
　　var reader = new FileReader();

　　reader.onload = function(e) {
　　　img.src = this.result;
　　　oDragWrap.appendChild(img);
　　}
　　reader.readAsDataURL(fileList[0]);
　}
}

　　需要注意的是，window.URL.createObjectURL是有生命周期的，也就意味着你每用此方法获取URL，其生命周期都会和DOM一样，它会单独占用内存，所以当删除图片或不再需要它是，记得用window.URL.revokeObjectURL(file)来释放其内存。当然，如果你没有释放，刷新页面也是可以释放的。

AJAX上传图片(file.getAsBinary & FormData)

　　既然已经获取到了拖拽到web页面中图片的数据，下一步就是将其发送到服务器端了。

　　话说HTML5时代之前，AJAX传输文件二进制流数据是不可能完成的事情，而现在我们完全可以通过file.getAsBinary获取文件的二进制数据流，进而将其当做XHR的data数据传送到后端，8过由于Chrome不支持file的getAsBinary方法，FF3.6+支持此方法。所以Chrome就要另寻它法了，这时我们发现XMLHttpRequest Level 2中的FormData接口完美解决了这个问题，它可以很快捷的模拟Form表单数据并通过AJAX发送至后端，FormData的支持情况是FF5及以上支持，Chrome12及以上支持。

　　 file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata对象中即可：

var xhr = new XMLHttpRequest();
var url = 'http://upload.renren.com/......';
var boundary = '-----------------------' + new Date().getTime();
var fileName = file.name;

xhr.open("post", url, true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

if (window.FormData) {
　//Chrome12+
　var formData = new FormData();
　formData.append('file', file);
　formData.append('hostid', userId);
　formData.append('requestToken', t);

　data = formData;
} else if (file.getAsBinary) {
　//FireFox 3.6+
　data = "--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"" +
　'file' +
　"\"; " +
　"filename=\"" +
　unescape(encodeURIComponent(file.name)) +
　"\"" +
　crlf +
　"Content-Type: image/jpeg" +
　crlf +
　crlf +
　file.getAsBinary() +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"hostid\"" +
　crlf +
　crlf +
　userId +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"requestToken\"" +
　crlf +
　crlf +
　t +
　crlf +
　"--" +
　boundary +
　'--';
}

xhr.send(data);

首先表单数据headers头信息需要以下两项：

  • Content-Type ： 设置其为multipart/form-data来模拟表单数据
  • boundary ： 表单数据中的分隔符，用于分隔不同的文件或表单项，这是服务器端设置的格式。

发送时的post数据类似这样：

-------------------------1323611763556
Content-Disposition: form-data; name="file"; filename="4.jpg"
Content-Type: image/jpeg

ÿØÿà�JFIF�...这里是文件二进制流...~iúoî­5P%-vãîHü 4QHgÿÙ
-------------------------1323611763556
Content-Disposition: form-data; name="hostid"

229421603
-----------------------------1323612996486

Content-Disposition: form-data; name="requestToken"

369009193
-------------------------1323611763556--

好了，现在文件上传成功后你就可以按照平常AJAX的操作来进行后续处理了。

最后，再来总结一下拖拽上传的技术要点：

  1. 监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；
  2. 获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。
  3. 读取图片数据并添加预览图：实例化FileReader对象，通过其readAsDataURL(file)方法获取文件二进制流，并监听其onload事件，将e.result赋值给img的src属性，最后将图片append到DOM中。
  4. 发送图片数据：使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。

　　OK,拖拽上传就讲到这里，欢迎大家一起探讨。也在这里推荐一下人人网FED的Blog，大家多多捧场，哈~

留意更新

订阅彬Go以查看HTML5最新资源、教程。

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作
]]> http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html/feed 19 规范自己的JavaScript书写 – Dojo Javascript 编程规范 http://blog.bingo929.com/dojo-javascript-style-guide.html http://blog.bingo929.com/dojo-javascript-style-guide.html#comments Mon, 25 Oct 2010 07:46:49 +0000 彬Go http://blog.bingo929.com/?p=3082 Dojo Javascript 编程规范

前言

良好的JavaScript书写习惯的优点不言而喻，今天彬Go向大家推荐Dojo Javascript 编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。感谢i.feelinglucky的翻译。

序

Any violation to this guide is allowed if it enhances readability.

所有的代码都要变成可供他人容易阅读的。

快读参考

核心 API 请使用下面的风格：

结构 规则 注释
模块 小写 不要使用多重语义（Never multiple words）
类 骆驼
公有方法 混合 其他的外部调用也可以使用 lower_case()，这样的风格
公有变量 混合
常量 骆驼 或 大写

下面的虽然不是必要的，但建议使用：

结构 规则
私有方法 混合，例子：_mixedCase
私有变量 混合，例子：_mixedCase
方法（method）参数 混合，例子：_mixedCase, mixedCase
本地（local）变量 混合，例子：_mixedCase, mixedCase

命名规范

1.变量名称 必须为 小写字母。
2.类的命名使用骆驼命名规则，例如：

   Account, EventHandler

3.常量 必须 在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员 必须 使用骆驼命名规则或使用大写：

var NodeTypes = {
    Element : 1,
    DOCUMENT: 2
}

4.简写单词 不能使用 大写名称作为变量名：

getInnerHtml(), getXml(), XmlDocument

5.方法的命令 必须 为动词或者是动词短语：

obj.getSomeValue()

6.公有类的命名 必须 使用混合名称（mixedCase）命名。
7.CSS 变量的命名 必须 使用其对应的相同的公共类变量。
8.私有类的变量属性成员 必须 使用混合名称（mixedCase）命名，并前面下下划线（_）。例如：

var MyClass = function(){
   var _buffer;
   this.doSomething = function(){
   };
}

9.变量如果设置为私有，则前面 必须 添加下划线。

this._somePrivateVariable = statement;

10.通用的变量 必须 使用与其名字一致的类型名称：

setTopic(topic) // 变量 topic 为 Topic 类型的变量

11.所有的变量名 必须 使用英文名称。
12.变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
13.如果变量有其隐含的返回值，则避免使用其相似的方法：

getHandler(); // 避免使用 getEventHandler()

14.公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如：

MouseEventHandler

，而非 MseEvtHdlr。
　　请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如：
　　　

dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler

15.类/构造函数 可以使用 扩展其基类的名称命名，这样可以正确、迅速的找到其基类的名称：
　EventHandler
　UIEventHandler
　MouseEventHandler
　　基类可以在明确描述其属性的前提下，缩减其命名：
　　　MouseEventHandler as opposed to MouseUIEventHandler.

特殊命名规范

  1. 术语 “get/set” 不要和一个字段相连，除非它被定义为私有变量。
  2. 前面加 “is” 的变量名 应该 为布尔值，同理可以为 “has”, “can” 或者 “should”。
  3. 术语 “compute” 作为变量名应为已经计算完成的变量。
  4. 术语 “find” 作为变量名应为已经查找完成的变量。
  5. 术语 “initialize” 或者 “init” 作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量。
  6. UI （用户界面）控制变量应在名称后加控制类型，例如： leftComboBox, TopScrollPane。
  7. 复数必须有其公共的名称约定（原文：Plural form MUST be used to name collections）。
  8. 带有 “num” 或者 “count” 开头的变量名约定为数字（对象）。
  9. 重复变量建议使用 “i”, “j”, “k” （依次类推）等名称的变量。
  10. 补充用语必须使用补充词，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end, etc.
  11. 能缩写的名称尽量使用缩写。
  12. 避免产生歧义的布尔变量名称，例如：
    　　isNotError, isNotFound 为非法
  13. 错误类建议在变量名称后加上 “Exception” 或者 “Error”。
  14. 方法如果返回一个类，则应该在名称上说明返回什么；如果是一个过程，则应该说明做了什么。

文件

缩进请使用 4 个空白符的制表位。
如果您的编辑器支持 文件标签_（file tags），请加添如下的一行使我们的代码更容易阅读：

// vim:ts=4:noet:tw=0:

译注：老外用 VIM 编辑器比较多，此条可以选择遵循。

代码折叠必须看起来是完成并且是合乎逻辑的：

var someExpression = Expression1
    + Expression2
    + Expression3;

var o = someObject.get(
    Expression1,
    Expression2,
    Expression3
);

注：表达式的缩进与变量声明应为一致的。
注：函数的参数应采用明确的缩进，缩进规则与其他块保持一致。

变量

  1. 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
  2. 变量不能产生歧义。
  3. 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
  4. 变量应该尽量保持最小的生存周期。
  5. 循环/重复变量的规范：
    1. 只有循环控制块的话，则必须使用 FOR 循环。
    2. 循环变量应该在循环开始前就被初始化；如使用 FOR 循环，则使用 FOR 语句初始化循环变量。
    3. “do … while” 语句是被允许的。
    4. “break” 和 “continue” 语句仍然允许使用（但请注意）。
  6. 条件表达式
    1. 应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。
    2. The nominal case SHOULD be put in the “if” part and the exception in the “else” part of an “if” statement.
    3. 应避免在条件表达式中加入块。
  7. 杂项
    1. 尽量避免幻数（Magic numbers），他们应该使用常量来代替。
    2. 浮点变量必须指明小数点后一位（即使是 0）。
    3. 浮点变量必须指明实部，即使它们为零（使用 0. 开头）。

布局

块

  1. 普通代码段 应该 看起来如下：

    while (!isDone){
            doSomething();
        isDone = moreToDo();
    }
  2. IF 语句 应该 看起来像这样：

    if (someCondition){
            statements;
    } else if (someOtherCondition){
        statements;
    } else {
        statements;
    }
  3. FOR 语句 应该 看起来像这样：

    for (initialization; condition; update){
            statements;
    }
  4. WHILE 语句 应该 看起来像这样：

    while (!isDone) {
            doSomething();
        isDone = moreToDo();
    }
  5. DO … WHILE 语句 应该 看起来像这样：

    do {
            statements;
    } while (condition);
  6. SWITCH 语句 应该 看起来像这样：

    switch (condition) {
    case ABC:
        statements;
        //  fallthrough
    case DEF:
        statements;
        break;
    default:
            statements;
        break;
    }
  7. TRY … CATCH 语句 应该 看起来像这样：

    try {
        statements;
    } catch(ex) {
        statements;
    } finally {
        statements;
    }
  8. 单行的 IF – ELSE，WHILE 或者 FOR 语句也 必须 加入括号，不过他们可以这样写：

    if (condition){ statement; }
    while (condition){ statement; }
    for (intialization; condition; update){ statement; }

空白

  1. 操作符 建议 使用空格隔开（包括三元操作符）。
  2. 下面的关键字 避免使用 空白隔开：
    • break
    • catch
    • continue
    • do
    • else
    • finally
    • for
    • function （如果为匿名函数，例如：var foo = function(){}; ）
    • if
    • return
    • switch
    • this
    • try
    • void
    • while
    • with
  3. 下面的关键字必须使用空白隔开：
    • case
    • default
    • delete
    • function （如果为申明，例如：function foo(){}; ）
    • in
    • instanceof
    • new
    • throw
    • typeof
    • var
  4. 逗号（,） 建议 使用空白隔开。
  5. 冒号（:） 建议 使用空白隔开。
  6. 点（.） 在后部 建议 使用空白隔开。
  7. 点（.） 避免 在前部使用空白。
  8. 函数调用和方法 避免 使用空白，例如： doSomething(someParameter); // 而非 doSomething (someParameter)
  9. 逻辑块 之间使用空行。
  10. 声明 建议 对齐使其更容易阅读。

注释

  1. 生涩的代码就 没有必要 添加注释了，首先您需要 重写 它们。
  2. 所有的注释请使用英文。
  3. 从已解决的方案到未开发的功能，注释 必须 与代码相关。
  4. 大量的变量申明后 必须 跟随一段注释。
  5. 注释需要说明的是代码段的用处，尤其是接下来的代码段。
  6. 注释 没有必要 每行都添加。

文档

下面提供了一些基本的函数或者对象的描述方法：

  • 总结（summary）: 简短的表述此函数或者对象实现的目的
  • 描述（description）: 对于此函数或者类的简短的描述
  • 返回（return）: 描述此函数返回什么（并不包括返回类型）

基本函数信息

function(){
    // summary: Soon we will have enough treasure to rule all of New Jersey.
    // description: Or we could just get a new roomate.
    //          Look, you go find him.  He don't yell at you.
    //          All I ever try to do is make him smile and sing around
    //          him and dance around him and he just lays into me.
    //          He told me to get in the freezer 'cause there was a carnival in there.
    // returns:  Look, a Bananarama tape!
}

对象函数信息

没有返回值描述

{
    // summary: Dingle, engage the rainbow machine!
    // description:
    //          Tell you what, I wish I was--oh my g--that beam,
    //          coming up like that, the speed, you might wanna adjust that.
    //          It really did a number on my back, there. I mean, and I don't
    //          wanna say whiplash, just yet, cause that's a little too far,
    //          but, you're insured, right?
}

函数的声明

在有的情况下，对于函数的调用和声明是隐义（invisible）的。在这种情况下，我们没有办法在函数中加入说明等（供程序调用）。如果您遭遇了这种情况，您可以使用一个类来封装函数。

注：此此方法只能在函数没有初始化的参数情况下。如过不是，则它们会被忽略。

dojo.declare(
    "foo",
    null,
    {
        // summary: Phew, this sure is relaxing, Frylock.
        // description:
        //              Thousands of years ago, before the dawn of
        //              man as we knew him, there was Sir Santa of Claus: an
        //              ape-like creature making crude and pointless toys out
        //              of dino-bones, hurling them at chimp-like creatures with
        //              crinkled hands regardless of how they behaved the
        //              previous year.
        // returns: Unless Carl pays tribute to the Elfin Elders in space.
        }
);


<h3>参数</h3>
<ol>
    <li>简单类型
　　　简单的类型的参数可以直接在函数参数定义中注释说明。
[cc lang="javascript"]function(/*String*/ foo, /*int*/ bar)...
  • 可变类型参数
    　　下面是几个修饰符供参考：
    • ? 可选参数
    • … 说面参数范围不确定
    • 数组
    function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...
  • 全局参数描述
    　如果你想增加一个描述，你可以将它们移至初始化块。

    基本信息格式为： *关键字* 描述字段 （ *key* Descriptive sentence）
    参数和变量的格式为： *关键字* ~*类型*~ 描述字段 （ *key* ~*type*~ Descriptive sentence）
    注： *关键字* 和 ~*类型*~ 可以使用任何字母和数字表述。

    function (foo, bar) {
        // foo: String
        //          used for being the first parameter
        // bar: int
        //          used for being the second parameter
    }

    变量

    由于实例变量、原型变量和外部变量的声明是一致的，所以有很多的方法声明、修改变量。具体的如何定义和定位应在变量最先出现的位置指明变量的名称、类型、作用域等信息。

    function foo() {
        // myString: String
        // times: int
        //          How many times to print myString
        // separator: String
        //          What to print out in between myString*
        this.myString = "placeholder text";
        this.times = 5;
    }
    foo.prototype.setString = function (myString) {
        this.myString = myString;
    }
    foo.prototype.toString = function() {
        for(int i = 0; i < this.times; i++) {
            dojo.debug(this.myString);
            dojo.debug(foo.separator);
            }
    }
    foo.separator = "=====";

    对象中的变量注释

    应使用和对象值和方法一致的标注方式，比如在他们声明的时候：

    {
        // key: String
        //          A simple value
        key: "value",
        // key2: String
        //          Another simple value
    }

    返回值

    因为函数可以同时返回多个不同（类型）的值，所以应每个返回值之后加入返回类型的注释。注释在行内注释即可，如果所有的返回值为同一类型，则指明返回的类型；如为多个不同的返回值，则标注返回类型为”mixed”。

    function() {
            if (arguments.length) {
                    return "You passed argument(s)"; // String
            } else {
            return false; // Boolean
        }
    }

    伪代码（有待讨论）

    有时候您需要在函数或者类中添加对于此函数和类的功能性流程描述。如果您打算这样做，您可以使用 /*======== （= 字符最好出现 5 次或者更多），这样做的好处就是可以不用将这些东西加入代码（译注：原作者的意思可能为代码管理系统）。

    这样看起来在 /*===== 和 =====*/ 会有非常长的一段注释，等待功能调整完毕以后就可以考虑是否删除。

    /*=====
    module.pseudo.kwArgs = {
            // url: String
        //          The location of the file
        url: "",
        // mimeType: String
        //          text/html, text/xml, etc
        mimeType: ""
    }
    =====*/

    function(/*module.pseudo.kwArgs*/ kwArgs){
        dojo.debug(kwArgs.url);
            dojo.debug(kwArgs.mimeType);
    }

    原文链接： http://dojotoolkit.org/developer/StyleGuide
    翻译（Translated by）：i.feelinglucky{at}gmail.com from http://www.gracecode.com

    ]]> http://blog.bingo929.com/dojo-javascript-style-guide.html/feed 28 HTML5 WebSockets 基础使用教程 http://blog.bingo929.com/html5-websockets.html http://blog.bingo929.com/html5-websockets.html#comments Mon, 09 Aug 2010 17:30:28 +0000 彬Go http://blog.bingo929.com/?p=3003 html5-websockets-教程

    　　HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。

    您还可以参考以下HTML5相关文章:
    《关于HTML 5 canvas 的基础教程》
    《让所有IE支持HTML5的解决方案》
    《一起感受HTML5和CSS3的能量》

    什么是WebSockets？

    　　WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。

    WebSockets将会替代什么？

    　　WebSockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。

    　　一些AJAX应用使用上述技术-这经常是归因于低资源利用。

    　　试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！

    第一步：搞定WebSocket服务器

    　　这篇教程会把更多的精力放在客户端的创建而不是服务器端的执行等操作。

    　　我使用基于windows 7的XAMPP来实现本地运行PHP。phpwebsockets是PHP WebSocket服务器。(以我的经验这个版本存在一些小问题，我已对它做了些修改并上传源文件共享给大家)下面的这些不同版本也可以实现WebSocket，如果某个不能用，你可以试试其它版本或者继续看下面的教程。

    　　jWebSocket (Java)
    　　web-socket-ruby (ruby)
    　　Socket IO-node (node.js)

    启动Apache服务器

    html5-websocket-apache

    第二步：修改URLs和端口

    　　根据你之前的安装修改服务器，下面是setup.class.php中的例子：

    public function __construct($host='localhost',$port=8000,$max=100)  
    {  
        $this->createSocket($host,$port);  
    }

    　　浏览文件并在适当情况下进行更改。

    第三步：开始创建客户端

    　　下面来创建基本模板，这是我的client.php文件：

    <!DOCTYPE html>  
    <html>  
    <head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
     
    <title>WebSockets Client</title>  
     
    </head>  
    <body>  
    <div id="wrapper">  
     
        <div id="container">  
     
            <h1>WebSockets Client</h1>  
     
            <div id="chatLog">  
     
            </div><!-- #chatLog -->  
            <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>  
     
            <input id="text" type="text" />  
            <button id="disconnect">Disconnect</button>  
     
        </div><!-- #container -->  
     
    </div>  
    </body>  
    </html>​

    　　我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。

    第四步：添加一些CSS

    　　没什么花俏代码，只是处理一下标签的样式。

    body {  
        font-family:Arial, Helvetica, sans-serif;  
    }  
    #container{  
        border:5px solid grey;  
        width:800px;  
        margin:0 auto;  
        padding:10px;  
    }  
    #chatLog{  
        padding:5px;  
        border:1px solid black;  
    }  
    #chatLog p {  
        margin:0;  
    }  
    .event {  
        color:#999;  
    }  
    .warning{  
        font-weight:bold;  
        color:#CCC;  
    }

    第五步：WebSocket事件

    首先让我们尝试并理解WebSocket事件的概念：
    WebSocket-事件

    WebSocket事件：
    我们将使用三个WebSocket事件：
    onopen: 当接口打开时
    onmessage: 当收到信息时
    onclose: 当接口关闭时

    我们如何来实现呢？
    首先创建WebSocket对象

    var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

    然后向下面这样检测事件

    socket.onopen = function(){  
        alert("Socket has been opened!");  
    }

    当我们收到信息时这样做：

    socket.onmessage = function(msg){  
        alert(msg); //Awesome!  
    }

    但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

    第六步：JavaScript

    　　首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持WebSocket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

    $(document).ready(function() {  
        if(!("WebSocket" in window)){  
            $('#chatLog, input, button, #examples').fadeOut("fast");  
            $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
        }else{  
     
        //The user has WebSockets  
     
        connect();  
     
        function connect(){  
            //the connect function code is below  
     
        }  
    });

    　　如你所见，如果用户浏览器支持WebSocket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。

    我们将在我们的服务器定义URL。

    var socket;  
    var host = "ws://localhost:8000/socket/server/startDaemon.php";

    　　你可能会发现URL中怎么没有http？恩，是的，这是一个WebSocket URL，使用了不同的协议。下面是URL分解图示：
    html5-websocket-url

    　　下面让我们继续完成connect()函数，我们将代码放入try/catch块，这样如果代码出现问题，我们能让用户知道。我们创建WebSocket，并将信息传递到message()函数，之后会做讲解。我们创建我们的onopen、onmessage和onclose函数. 需要注意的是我们为用户提供了端口状态，这并不是必需的，但我们把它放进来主要是为了方便调试。

    CONNECTING = 0
    OPEN = 1
    CLOSED = 2

    function connect(){  
        try{  
     
        var socket;  
        var host = "ws://localhost:8000/socket/server/startDaemon.php";  
        var socket = new WebSocket(host);  
     
            message('<p class="event">Socket Status: '+socket.readyState);  
     
            socket.onopen = function(){  
                 message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
            }  
     
            socket.onmessage = function(msg){  
                 message('<p class="message">Received: '+msg.data);  
            }  
     
            socket.onclose = function(){  
                 message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
            }            
     
        } catch(exception){  
             message('<p>Error'+exception);  
        }  
    }

    　　message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。 我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

    function message(msg){  
        $('#chatLog').append(msg+'</p>');  
    }

    目前的成果

    　　如果你已按上面教程按部就班的做的话，很好，我们已经创建了 HTML/CSS 模板、创建并建立Websocket连接、通过创建连接保持用户的进展更新。

    HTML5-websocket

    第七步：发送数据

    　　现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

    $('#text').keypress(function(event) {  
        if (event.keyCode == '13') {  
            send();  
        }  
    });

    下面是send()函数：

    function send(){  
     
        var text = $('#text').val();  
        if(text==""){  
            message('<p class="warning">Please enter a message');  
            return ;  
        }  
        try{  
            socket.send(text);  
            message('<p class="event">Sent: '+text)  
        } catch(exception){  
        message('<p class="warning"> Error:' + exception);  
        }  
     
        $('#text').val("");  
     
    }

    下面我们需要：

    socket.send();

    　　那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

    关闭Socket

    　　关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

    $('#disconnect').click(function(){  
        socket.close();  
    });

    websocket-close

    完整JavaScript代码

    $(document).ready(function() {  
     
      if(!("WebSocket" in window)){  
      $('#chatLog, input, button, #examples').fadeOut("fast");  
      $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
      }else{  
          //The user has WebSockets  
     
          connect();  
     
          function connect(){  
              var socket;  
              var host = "ws://localhost:8000/socket/server/startDaemon.php";  
     
              try{  
                  var socket = new WebSocket(host);  
     
                  message('<p class="event">Socket Status: '+socket.readyState);  
     
                  socket.onopen = function(){  
                     message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
                  }  
     
                  socket.onmessage = function(msg){  
                     message('<p class="message">Received: '+msg.data);  
                  }  
     
                  socket.onclose = function(){  
                    message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
                  }          
     
              } catch(exception){  
                 message('<p>Error'+exception);  
              }  
     
              function send(){  
                  var text = $('#text').val();  
     
                  if(text==""){  
                      message('<p class="warning">Please enter a message');  
                      return ;  
                  }  
                  try{  
                      socket.send(text);  
                      message('<p class="event">Sent: '+text)  
     
                  } catch(exception){  
                     message('<p class="warning">');  
                  }  
                  $('#text').val("");  
              }  
     
              function message(msg){  
                $('#chatLog').append(msg+'</p>');  
              }  
     
              $('#text').keypress(function(event) {  
                  if (event.keyCode == '13') {  
                    send();  
                  }  
              });    
     
              $('#disconnect').click(function(){  
                 socket.close();  
              });  
     
          }//End connect  
     
      }//End else  
     
    });

    第九步：运行WebSocket服务器

    我们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：
    php -q path\to\server.php
    现在你已经运行了WebSocket服务器！
    HTML5-webSocket

    大功告成！

    　　当页面读取后，将尝试创建一个WebSocket连接，然后用户可以输入信息并从服务器接收信息。
    html5-websocket-教程实例

    　　感谢大家耐心阅读本教程，希望你能从中学到有用的知识，HTML5 WebSocket的确令人兴奋不已！大家可以通过The WebSocket API了解HTML5 WebSocket的最新动态。

    点击这里下载源文件

    留意更新

    订阅彬Go以查看HTML5最新资源、教程。

    英文原文:Start Using HTML5 WebSockets Today
    翻译原文:HTML5 WebSockets 基础使用教程(彬Go)

    转载声明:
    原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
    本文链接:http://blog.bingo929.com/html5-websockets.html
    如需转载必须以链接形式注明原载或原文地址，谢谢合作
    ]]>     http://blog.bingo929.com/html5-websockets.html/feed 31     关于HTML 5 canvas 的基础教程 http://blog.bingo929.com/html-5-canvas-the-basics-html5.html http://blog.bingo929.com/html-5-canvas-the-basics-html5.html#comments Tue, 15 Jun 2010 17:31:30 +0000 彬Go http://blog.bingo929.com/?p=2947

    HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。

    大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas ：

    本文介绍 2D canvas
    基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。

    可以点击此处批量下载本文实例代码

    目录

    canvas 基础

    创建 canvas 的方法很简单，只需要在 HTML 页面中添加 <canvas> 元素：

    <canvas id="myCanvas" width="300" height="150">
    Fallback content, in case the browser does not support Canvas.
    </canvas>

    为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。

    创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas
    元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)：

    // Get a reference to the element.
    var elem = document.getElementById('myCanvas');
     
    // Always check for properties 和 methods, to make sure your code doesn't break
    // in other browsers.
    if (elem &amp;&amp; elem.getContext) {
      // Get the 2d context.
      // Remember: you can only initialize one context per element.
      var context = elem.getContext('2d');
      if (context) {
        // You are done! Now you can draw your first rectangle.
        // You only need to provide the (x,y) coordinates, followed by the width and
        // height dimensions.
        context.fillRect(0, 0, 150, 100);
      }
    }

    可以把上面代码放置在文档 head 部分中，或者放在外部文件中。

    2D context API

    介绍了如何创建 canvas 后，让我们来看看 2D canvas API，看看能用这些函数做些什么。

    基本线条

    上面的例子中展示了绘制矩形是多么简单。

    通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla()（ 若浏览器支持，如 Opera 10 和 Firefox 3)。

    通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。

    可以使用 lineWidth 属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：

    context.fillStyle   = '#00f'; // blue
    context.strokeStyle = '#f00'; // red
    context.lineWidth   = 4;
     
    // Draw some rectangles.
    context.fillRect  (0,   0, 150, 50);
    context.strokeRect(0,  60, 150, 50);
    context.clearRect (30, 25,  90, 60);
    context.strokeRect(30, 25,  90, 60);

    此例子效果图见图1.

    Example render of fillRect, strokeRect and clearRect.

    图 1: fillRect, strokeRect 和
    clearRect效果图

    路径

    通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。

    下面是一个绘制三角形的例子：

    // Set the style properties.
    context.fillStyle   = '#00f';
    context.strokeStyle = '#f00';
    context.lineWidth   = 4;
     
    context.beginPath();
    // Start from the top-left point.
    context.moveTo(10, 10); // give the (x,y) coordinates
    context.lineTo(100, 10);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
     
    // Done! Now fill the shape, 和 draw the stroke.
    // Note: your shape will not be visible until you call any of the two methods.
    context.fill();
    context.stroke();
    context.closePath();

    其效果图见图2.

    Triangle

    图 2: 三角形

    另一个较负责的例子中使用了直线、曲线和圆弧。

    插入图像

    drawImage 方法允许在 canvas 中插入其他图像
    ( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数：

    • 3个参数：最基本的 drawImage 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
    • 5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
    • 9个参数：最复杂drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

    下面是上述三个使用方法的例子：

    // Three arguments: the element, destination (x,y) coordinates.
    context.drawImage(img_elem, dx, dy);

    // Five arguments: the element, destination (x,y) coordinates, and destination
    // width and height (if you want to resize the source image).
    context.drawImage(img_elem, dx, dy, dw, dh);

    // Nine arguments: the element, source (x,y) coordinates, source width and
    // height (for cropping), destination (x,y) coordinates, and destination width
    // and height (resize).
    context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

    其效果见图3.

    Example rendering of drawImage.

    图 3: drawImage 效果图。

    像素级操作

    2D Context API 提供了三个方法用于像素级操作：createImageData, getImageData, 和
    putImageData。

    ImageData对象保存了图像像素值。每个对象有三个属性: width, height 和
    data。data 属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至 255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。

    为了更好的理解其原理，让我们来看一个例子——绘制红色矩形

    // Create an ImageData object.
    var imgd = context.createImageData(50,50);
    var pix = imgd.data;
     
    // Loop over each pixel 和 set a transparent red.
    for (var i = 0; n = pix.length, i &lt; n; i += 4) {
      pix[i  ] = 255; // red channel
      pix[i+3] = 127; // alpha channel
    }
     
    // Draw the ImageData object at the given (x,y) coordinates.
    context.putImageData(imgd, 0,0);

    注意: 不是所有浏览器都实现了 createImageData。在支持的浏览器中，需要通过 getImageData 方法获取 ImageData 对象。请参考示例代码。

    通过 ImageData 可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。下面特效实现了简单的颜色反转滤镜：

    // Get the CanvasPixelArray from the given coordinates and dimensions.
    var imgd = context.getImageData(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>);
    var pix = imgd.data;
     
    // Loop over each pixel and invert the color.
    for (var i = 0, n = pix.length; i &lt; n; i += 4) {
      pix[i  ] = 255 - pix[i  ]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
    }
     
    // Draw the ImageData at the given (x,y) coordinates.
    context.putImageData(imgd, <var>x</var>, <var>y</var>);

    图 4 显示了使用此滤镜后的 Opera
    图像 (图 3是原图)。

    Example rendering of the invert color filter.

    图 4: 颜色反转滤镜

    文字

    虽然最近的 WebKit 版本和 Firefox 3.1 nightly build 才开始支持 Text API ，为了保证文章完整性我决定仍在这里介绍文字 API 。

    context 对象可以设置以下 text 属性：

    • font：文字字体，同 CSS font-family 属性
    • textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
    • textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.

    有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

    文字对齐属性影响文字与设置的
    (x,y) 坐标的相对位置。

    下面是一个在 canvas 中绘制”hello world” 文字的例子

    context.fillStyle    = '#00f';
    context.font         = 'italic 30px sans-serif';
    context.textBaseline = 'top';
    context.fillText  ('Hello world!', 0, 0);
    context.font         = 'bold 30px sans-serif';
    context.strokeText('Hello world!', 0, 50);

    图 5 是其效果图。

    Example text render.

    图 5: 文字效果

    阴影

    目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为：

    • shadowColor：阴影颜色。其值和 CSS 颜色值一致。
    • shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
    • shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。

    下面是 canvas 阴影的例子：

    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
    context.fillStyle     = '#00f';
    context.fillRect(20, 20, 150, 100);

    其效果见图 6。

    Example canvas shadow - a blue rectangle with a red shadow.

    图 6: canvas 阴影效果——蓝色矩形，红色阴影

    颜色渐变

    除了 CSS 颜色， fillStyle 和 strokeStyle 属性可以设置为 CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。

    欲创建 CanvasGradient 对象，可以使用两个方法：createLinearGradient 和 createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。

    创建颜色渐变对象后，可以使用对象的 addColorStop 方法添加颜色中间值。

    下面的代码演示了颜色渐变使用方法：

    // You need to provide the source 和 destination (x,y) coordinates
    // for the gradient (from where it starts 和 where it ends).
    var gradient1 = context.createLinearGradient(<var>sx</var>, <var>sy</var>, <var>dx</var>, <var>dy</var>);
     
    // Now you can add colors in your gradient.
    // The first argument tells the position for the color in your gradient. The
    // accepted value range is from 0 (gradient start) to 1 (gradient end).
    // The second argument tells the color you want, using the CSS color format.
    gradient1.addColorStop(0,   '#f00'); // red
    gradient1.addColorStop(0.5, '#ff0'); // yellow
    gradient1.addColorStop(1,   '#00f'); // blue
     
    // For the radial gradient you also need to provide source
    // 和 destination circle radius.
    // The (x,y) coordinates define the circle center points (start 和
    // destination).
    var gradient2 = context.createRadialGradient(<var>sx</var>, <var>sy</var>, <var>sr</var>, <var>dx</var>, <var>dy</var>, <var>dr</var>);
     
    // Adding colors to a radial gradient is the same as adding colors to linear
    // gradients.

    我也准备了一个更复杂的例子，使用了线性颜色渐变、阴影和文字。其效果见图 7。

    Example rendering using a linear gradient.

    图 7: 使用线性颜色渐变的例子

    canvas 演示

    如果你想知道使用 Canvas可以做些什么，可以参看以下的工程：

    小节

    Canvas 是 HTML 5最让人期待的特性之一，目前已获得大部分 Web 浏览器支持。Canvas 可以帮助创建游戏、增强图形用户界面。2D context API 提供大量图形绘制功能——我希望通过本文你了解了 canvas 使用，并且你有兴趣了解更多！

    本文转自：operachina

    本文翻译自 HTML 5 canvas – the basics
    作者 Mihai Sucan

    ]]>     http://blog.bingo929.com/html-5-canvas-the-basics-html5.html/feed 28     用CSS3制作50个超棒动画效果教程 http://blog.bingo929.com/50-awesome-css3-animations.html http://blog.bingo929.com/50-awesome-css3-animations.html#comments Mon, 15 Mar 2010 06:20:28 +0000 彬Go http://blog.bingo929.com/?p=2857 50个css3技术教程

    　　CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)

    您还可以参考以下CSS3相关文章:
    《5个CSS3技术实现设计增强》
    《一起感受HTML5和CSS3的能量》
    《提升你设计水平的CSS3新技术》

    1.CSS3实现钟表效果(基于jQuery)

    　　使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。
    表-jQuery-css3

    2.模拟时钟

    　　模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。
    时钟效果-css3

    3.可使用箭头键旋转的3D立方体

    　　你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。
    css3-3D立方体

    4.多种3D立方体(淡入淡出)

    　　多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。
    多种3D立方体(淡入淡出)

    5.CSS3手风琴效果

    　　使用CSS3实现的手风琴菜单效果，基于webkit浏览器专有属性。
    CSS3手风琴效果

    6.自动滚动视差效果

    　　自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。
    自动滚动视差效果

    7.Isocube

    　　Isocube有些类似于3D立方体，但也有不同之处，它可以让他片贴在立方体面。
    CSS3实例

    8.CSS3图片集

    9.CSS3 Matrix(黑客帝国效果)

    　　黑客帝国是最棒的科幻小说改编电影之一，现在使用纯CSS就能实现电影中的矩阵效果。
    CSS3 Matrix(黑客帝国效果)

    10.7种CSS3结合javascript技术的特效

    　　7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动, 轻移, 扩大, 跳动, 旋转 和 手风琴效果。
    7种CSS3结合javascript技术的特效

    11.各种鼠标悬停图片特效

    　　六个由CSS3替代JavaScript而实现的鼠标悬停图片效果，CSS3实现这种悬停效果依然很炫！
    各种鼠标悬停图片特效

    12.旋转的可口可乐易拉罐(使用滚动条控制)

    CSS3实例

    13.3D 《宫女》

    CSS3实例

    14.宝利来画廊

    　　宝利来画廊是由CSS3技术实现的将一些照片堆在一起，有趣的是鼠标悬停照片是，照片会旋转并缓慢放大~
    CSS3教程

    15.太空

    CSS3实例

    16.Mac Dock

    　　CSS3模拟的mac操作系统菜单…
    CSS3实例

    17.Drop-In Modals

    CSS3实例

    18.滑动的唱片

    　　该效果使用了CSS3过渡和些许HTML，在它上面放一个唱片专辑会看上去更生动。
    CSS3实例

    19.CSS3 Zooming Polaroids

    　　该效果会将一个照片列表按顺序排列，并把它们按不同的角度旋转，使用了CSS2和CSS3技术，无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。
    CSS3 Zooming Polaroids

    20.CSS3 火箭动画

    CSS3 火箭动画

    21.Poster Circle

    CSS3实例

    22.变形的立方体

    CSS3实例

    23.动画版宝丽来画廊

    CSS3实例

    24.聚光灯下的投影效果

    CSS3实例

    25.色彩鲜艳的时钟

    CSS3实例

    26.Lightbox Gallery

    CSS3实例

    27.弹性缩略图菜单

    弹性缩略图菜单

    28.Coverflow

    CSS3实例

    29.jQuery DJ Hero

    jQuery DJ Hero

    30.Dynamic Stacking Cards

    CSS3实例

    31.另一个CSS3图片画廊效果

    32.雪堆(使用方向键控制)

    CSS3实例

    33.CSS3动画版价格栏

    CSS3动画版价格栏

    34.平滑jQuery+CSS3菜单

    平滑jQuery+CSS3菜单

    35.CSS标签(无JavaScript)

    CSS标签(无JavaScript)

    36.CSS标签菜单(无JavaScript)

    CSS标签菜单(无JavaScript)

    37.SVG+CSS3鱼眼菜单

    VG+CSS3鱼眼菜单

    38.CSS3落叶效果

    CSS3落叶效果

    39.CSS3旋转图集效果

    CSS3旋转图集效果

    40.CSS3下拉菜单

    CSS3下拉菜单

    41.星球大战风格爬行文字(纯HTML+CSS)

    星球大战风格爬行文字(纯HTML+CSS)

    42.CSS3即时贴

    CSS3即时贴

    43.css3雪花

    css3雪花

    44.又一个鱼眼效果

    CSS3实例

    45.CSS3逐帧动画

    　　第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片，当播放到最后一帧时它会自动播放第一帧，如此循环，但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动，依旧是mousemove这个动作，只要鼠标在移动图片动画就会持续播放，但动画的播放速度是与你的鼠标移动速度有关的，该实例支持Safari, Google Chrome, IE8, Firefox 和 Opera。
    CSS3逐帧动画

    46.全地域装甲载具

    CSS3实例

    47.又一个CSS3手风琴效果

    又一个CSS3手风琴效果

    48.无Flash版动态展示

    CSS3实例

    49.平滑菜单栏

    平滑菜单栏

    50.loading旋转效果

    loading旋转效果

    留意更新

    订阅彬Go以查看CSS3最新教程。

    英文原文:50 Awesome Animations made with CSS3
    翻译原文:用CSS3制作50个超棒动画效果教程(彬Go)

    转载声明:
    原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
    本文链接:http://blog.bingo929.com/50-awesome-css3-animations.html
    如需转载必须以链接形式注明原载或原文地址，谢谢合作
    ]]>     http://blog.bingo929.com/50-awesome-css3-animations.html/feed 33     15款提高表格操作的jQuery插件 http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html#comments Mon, 21 Dec 2009 06:40:55 +0000 彬Go http://blog.bingo929.com/?p=2824 jquery-table-表格-插件

    　　table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。

    您还可以参考以下javascript相关资源:
    《推荐9款很棒的网页绘制图表JavaScript框架脚本》
    《了解jQuery技巧来提高你的代码》
    《10种JavaScript特效实例让你的网站更吸引人》
    《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

    1.DataTables-强大的jQuery表格插件

    datatables-jquery-插件
    　　DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

    2.uiTableFilter-jQuery表格过滤插件

    ui-table-filter-jquery-插件
    　　uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。

    3.Scrollable HTML Table-jQuery表格滚动插件

    scrollable-html-table-jquery
    　　Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。

    4.Tablesorter-jQuery表格排序插件

    tablesorter-jquery-插件
    　　Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。

    5.Flexigrid-Web2.0 jQuery表格插件

    flexigrid-jquery
    　　Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。

    6.HeatColor-jQuery表格颜色插件

    heatcolor-jquery
    　　HeatColor可以让你根据元素的值来为元素设置颜色。 它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。

    7.JQTreeTable-jQuery树形表格插件

    jqtreetable-jquery
    　　使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响可访问性。

    8.Ingrid-jQuery表格插件

    ingrid-jquery-表格-插件
    　　Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何从头使用这个jQuery表格插件。

    9.jQuery ColumnManager plugin

    jquery-column-manager-jquery-表格插件
    　　columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件非常小巧轻量，仅3.6kb。

    10.jQuery treeTable-jQuery树形表格插件

    jquery-treetable-树形表格插件
    　　jQuery treeTable是小型的JQTreeTable, 它也能让你的table显示成树形结构. 这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.

    11.CSV2Table-CSV格式读取表格插件

    csv2table-jQuery表格插件
    　　CSV2Table 可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.

    12.Table Pagination-jQuery表格分页插件

    table-pagination-jQuery表格插件
    　　这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。

    13.jQuery TableRowCheckboxToggle

    jquery-table-插件
    　　这个jQuery表格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。

    14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

    　　这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。

    15.uiTableEdit

    　　uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件，它允许用户编辑表格内容。

    留意更新

    订阅彬Go以查看网页设计最新资源。

    英文原文:15 Great jQuery Plugins For Better Table Manipulation
    翻译原文:15款提高表格操作的jQuery插件(彬Go)

    转载声明:
    原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
    本文链接:http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html
    如需转载必须以链接形式注明原载或原文地址，谢谢合作
    ]]>     http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html/feed 7     了解jQuery技巧来提高你的代码 http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html#comments Mon, 23 Nov 2009 02:01:13 +0000 彬Go http://blog.bingo929.com/?p=2760 jquery-技巧-教程

    　　jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性。我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的jQuery技巧，他们肯定会能够派上用场的！

    您还可以参考以下JavaScript相关教程及资源:
    《10种JavaScript特效实例让你的网站更吸引人》
    《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》
    《10个非常棒的Ajax及Javascript实例资源网站》
    《推荐9款很棒的网页绘制图表JavaScript框架脚本》

    1.测试并提升你的jQuery选择器水平

    　　这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。
    jquery-选择器-技巧
    点击上图查看清晰大图

    2.测试jQuery包装集是否包含某些元素

    　　如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

    if($(selector)[0]){...}
    // 或者这样
    if($(selector).length){...}

    来看看这个例子：

    //例子.如果你的页面有以下html代码
    <ul id="shopping_cart_items">
      <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
      <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
      <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
    </ul>
    <pre escaped="true" lang="javascript">...
    //这个if条件将返回true，因为我们有两个
    // input域匹配了选择器，所以<statement>代码将会执行
    if($('#shopping_cart_items input.in_stock')[0]){<statement>}

    3.从jquery.org读取jQuery最新版本

    你可以使用这句代码读取jQuery的最新版本的代码文件。

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
    type="text/javascript"></script>

    4.存储数据

    　　使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

    $('selector').attr('alt', 'data being stored');
    //之后可以这样读取数据:
    $('selector').attr('alt');

    　　使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

    $('selector').data('参数名', '要存储的数据');
    //之后这样取得数据:
    $('selector').data('参数');

    　　这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

    这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:
    HTML部分:

    <form id="testform">
     <input type="text" class="clear" value="Always cleared" />
     <input type="text" class="clear once" value="Cleared only once" />
     <input type="text" value="Normal text" />
    </form>

    JavaSript部分:

    $(function() {
     //取出有clear类的input域
     //(注: "clear once" 是两个class clear 和 once)
     $('#testform input.clear').each(function(){
       //使用data方法存储数据
       $(this).data( "txt", $.trim($(this).val()) );
     }).focus(function(){
       // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空
       if ( $.trim($(this).val()) === $(this).data("txt") ) {
         $(this).val("");
       }
     }).blur(function(){
       // 为有class clear的域添加blur时间来恢复默认值
       // 但如果class是once则忽略
       if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
         //Restore saved data
         $(this).val( $(this).data("txt") );
       }
     });
    });

    查看Demo

    5.jQuery手册常备身边

    　　大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
    oscarotero jquery 1.3 (壁纸版)
    jQuery手册

    6.在FireBug控制台记录jQuery

    　　FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox对于记录你的JavaScript代码也得到支持。

    写入FireBug控制台的最简单方式如下:

    console.log("hello world")

    firebug-jquery-控制台

    你也可以按照你希望的方式写一些参数：

    console.log(2,4,6,8,"foo",bar)

    你也可以编写一个小扩展来记录jQuery对象到控制台：

    jQuery.fn.log = function (msg) {
        console.log("%s: %o", msg, this);
        return this;
    };

    对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。

    $('#some_div').find('li.source > input:checkbox')
        .log("sources to uncheck")
        .removeAttr("checked");

    7.尽可能使用ID选择器

    　　在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法，而class并没有。所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

    <div id="main">
    <form method="post" action="/">
      <h2>Selectors in jQuery</h2>
      ...
      ...
      <input class="button" id="main_button" type="submit" value="Submit" />
    </form>
    </div>
    //使用class来调用submit按钮要比使用绝对的ID选择器慢很多
    var main_button = $('#main .button');
    var main_button = $('#main_button');

    8.善于利用jQuery链

    　　jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：

    <li>Description: <input type="text" name="description" value="" /></li>
    $('#shopping_cart_items input.text').css('border', '3px dashed yellow');
    $('#shopping_cart_items input.text').css('background-color', 'red');
    $('#shopping_cart_items input.text').val("text updated");

    取而代之你可以使用jQuery链来完成简便的操作：

    var input_text = $('#shopping_cart_items input.text');
    input_text.css('border', '3px dashed yellow');
    input_text.css('background-color', 'red');
    input_text.val("text updated");
     
    //same with chaining:
    var input_text = $('#shopping_cart_items input.text');
    input_text
     .css('border', '3px dashed yellow')
     .css('background-color', 'red')
     .val("text updated");

    9.绑定jQuery函数到$(window).load事件

    　　大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

    $(window).load(function(){
     // 将你希望在页面完全就绪之后运行的代码放在这里
    });

    10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

    　　由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

    $('#shopping_cart_items input.in_stock')
        .removeClass('in_stock')
        .addClass('3-5_days');

    如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：

    $.fn.makeNotInStock = function() {
        return $(this).removeClass('in_stock').addClass('3-5_days');
    }
     
    $('#shopping_cart_items input.in_stock').makeNotInStock().log();

    11.使用回调函数同步效果

    　　如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：slideDown( speed, [回调] ) ie. $(‘#sliding’).slideDown(‘slow’, function(){… 点击这里预览这个例子.

    <style>
     div.button    { background:#cfd; margin:3px; width:50px;
       text-align:center; float:left; cursor:pointer;
       border:2px outset black; font-weight:bolder; }
     #sliding      { display:none; }
    </style>
    $(document).ready(function(){
    // 使用jQuery的click事件改变视觉效果，并开启滑动效果
     $("div.button").click(function () {
       //div.button 现在看上去是按下的效果
       $(this).css({ borderStyle:"inset", cursor:"wait" });
       //#sliding 现在将渐隐并在完成动作之后开启渐显效果
       //slideup once it completes
       $('#sliding').slideDown('slow', function(){
         $('#sliding').slideUp('slow', function(){
           //渐显效果完成后将会改变按钮的CSS属性
           $('div.button').css({ borderStyle:"outset", cursor:"auto" });
         });
       });
     });
    });

    12.学会使用自定义选择器

    　　jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:

    $.expr[':'].mycustomselector= function(element, index, meta, stack){
        // element- DOM元素
        // index - 堆栈中当前遍历的索引值
        // meta - 关于你的选择器的数据元
        // stack - 用于遍历所有元素的堆栈
     
        // 包含当前元素则返回true
        // 不包含当前元素则返回false
    };
     
    // 自定义选择器的应用:
    $('.someClasses:test').doSomething();

    下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：

    $.expr[':'].withRel = function(element){
      var $this = $(element);
      //仅返回rel属性不为空的元素
      return ($this.attr('rel') != '');
    };
     
    $(document).ready(function(){
    //自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集
    //你可以为他使用格式方法，比如下面这样修改它的css样式
     $('a:withRel').css('background-color', 'green');
    });
    <ul>
      <li>
        <a href="#">without rel</a>
      </li>
      <li>
        <a rel="somerel" href="#">with rel</a>
      </li>
      <li>
        <a rel="" href="#">without rel</a>
      </li>
      <li>
        <a rel="nofollow" href="#">a link with rel</a>
      </li>
    </ul>

    13.预加载图片

    通常使用JavaScript来预加载图片是个相当不错的方法:

    //定义预加载图片列表的函数(有参数)
     
    jQuery.preloadImages = function(){
      //遍历图片
      for(var i = 0; i<arguments.length; i++){
        jQuery("<img>").attr("src", arguments[i]);
     
      }
    }
    // 你可以这样使用预加载函数
    $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

    14.将你的代码测试完好

    　　jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：

    //将测试分成若干模块.
    module("Module B");
     
    test("some other test", function() {
      //指定多少个判断语句需要加入测试中.
      expect(2);
     
      equals( true, false, "failing test" );
      equals( true, true, "passing test" );
    });

    留意更新

    订阅彬Go以查看JavaScript最新教程及资源。

    英文原文:More jQuery and General Javascript Tips to Improve Your Code
    翻译原文:了解更多jQuery技巧来提高你的代码(彬Go)

    转载声明:
    原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
    本文链接:http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html
    如需转载必须以链接形式注明原载或原文地址，谢谢合作
    ]]>     http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html/feed 20     让所有IE支持HTML5的解决方案 http://blog.bingo929.com/html5-ie-enabling-script.html http://blog.bingo929.com/html5-ie-enabling-script.html#comments Tue, 13 Oct 2009 09:08:11 +0000 彬Go http://blog.bingo929.com/?p=2686 html5-ie支持

    　　自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。

    您还可以参考以下HTML5相关教程及资源:
    《HTML5 Drag&Drop 拖拽、FileReader实例教程》
    《HTML5 WebSockets 基础使用教程》
    《HTML5和CSS3工具资源汇总》
    《关于HTML 5 canvas 的基础教程》
    《一起感受HTML5和CSS3的能量》

    使用和下载

    　　html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。)
    　　作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件。
    http://html5shiv.googlecode.com/svn/trunk/html5.js
    　　你可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行:

    <!--[if IE]>
       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    当然如果你不喜欢调用外网文件，你也可以下载下来上传到自己的服务器单独调用(作者允许)。

    以下是js文件中的代码:

    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

    英文原文:JavaScript and the DOM Series: Lesson 1
    翻译原文:让所有IE支持HTML5的解决方案(彬Go)

    转载声明:
    原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
    本文链接:http://blog.bingo929.com/html5-ie-enabling-script.html
    如需转载必须以链接形式注明原载或原文地址，谢谢合作
    ]]>     http://blog.bingo929.com/html5-ie-enabling-script.html/feed 31