Miclle's Posts

TestSwarm: Continious & Distributed JS Testing
TestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious & distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.

Minimee
On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.

Doctor JS
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint as well.

Remy Sharp’s JSConsole
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.

JavaScript Library Boilerplate
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!

jsdoc-toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

Jasmine: BDD for your JavaScript
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

ObfuscateJS: JavaScript compressor
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.

Online JavaScript beautifier
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

PEG.js
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

JSONView
JSONView is a Firefox extension that helps you view JSON documents in the browser.

jsPerf: JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

JSonduit
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.

jsplumb
jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.

Helma
Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.

HTML + JSON Report
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.

JSON Editor
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.

JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.

原文地址：http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins/

    <a onclick="alert('Click event')" href="#">单击事件</a>
    当点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何已绑定到该元素的单击事件上的函数的执行。这个时候会弹出消息“Click event"。click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素直至document根节点，只要是它的某个后代元素上的单击事件被触发，事件就会传给它，这称之为事件冒泡（又称事件传播）

.bind() ：
    $('a').bind('click', function() { alert("jQuery bind") });
    jQuery扫描文档找出所有的$('a')元素，并把alert函数绑定到每个元素的click事件上。

.live() ：
    $('a').live('click', function() { alert("jQuery live") });
    jQuery把alert函数绑定到$(document)元素上，并使用'click'和'a'作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。
    live方法还可以被绑定到具体的元素（或“context”）而不是document上，像这样：
    $('a', $('#container')[0]).live(...);
    提示：$('#container')返回的是jQuery对象，$('#container')[0]是这个标签的DOM对象。
    live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作。

.delegate()
    $('#container').delegate('a', 'click', function() { alert("jQuery delegate") });
    jQuery扫描文档查找$('#container')，并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
    这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。但是$('a').live()等同于$(document).delegate('a')吗？不完全是。

为什么.delegate()要比.live()好用
    基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：
    $('a').live('click', function() { blah() });
    // 或者
    $(document).delegate('a', 'click', function() { blah() });

速度：
    后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$('a')元素，把它们存成jQuery对象。尽管live函数仅需要把 'a' 作为串参数传递以用做之后的判断，但是$()函数并未“知道”被链接的方法将会是.live()。
    而另一方面，delegate方法仅需要查找并存储$(document)元素。
    一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力:
    live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

仅支持CSS选择器:
    前面有讲过live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

为什么选择.live()或.delegate()而不是.bind() ？
    毕竟，bind看起来似乎更加的明确和直接，难道不是吗？嗯，有两个原因让我们更愿意选择delegate或live而不是bind：
    为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。
    如果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
   或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个（或是一小组）祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

停止传播（阻止冒泡事件传递）
    通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：
    $('a').bind('click', function(e) {
        e.preventDefault();    // 或者 e.stopPropagation();
});
    不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

参考：
http://article.yeeyan.org/view/213582/179910
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/