jQuery1.7 Beta 预览

jQuery 1.7 Beta 1刚发布，这里我们将介绍一些主要的新特性：

介绍

长期的jQuery开发者，例如, Dave, Rick, Corey, Joh Neal, Timmy还有群其它的热心开发者已经在新的jQuery核心特性上付出了很多努力 。这是个1.7版本的一个beta版，他们希望能在接下来的一到俩个周内完成。

一些补丁和其它的新的递交文件还在测试当中，我想使用我们的单元测试来带大家看看1.7中的新特性将是一个非常有意思的事情。并且我们提供一些额外的代码解释。

所有的这些都可以在jsfiddle（ jsFiddle.net）这样的工具中运行，并且是跨浏览器兼容的。

记住，如果你在浏览中遇到任何bug，请大家给我们提交：http://bugs.jquery.com

支持注册jQuery为一个异步/AMD模块

我们非常兴奋的第一个特性是支持注册jQuery为一个CommonJS，可兼容的异步模块。这个模块是由RequireJS的作者James Burke共享的。

这里有很多的CommonJS兼容的Script Loader（包括RequireJS），能够使用异步模块格式(AMD)加载模块。使用这个特性，jQuery现在可以使用任何兼容的loader来参与浏览器模块加载。

你可能想知道为什么这个这么重要。

因为jQuery的流行，因为理想化的你不能指望几个不同版本同时加载，所以AMD loaders需要考虑多个类库的版本被加载到同一个页面 。Loaders拥有俩个选择：要不考虑处理这个问题，或者知道用户这里有一些已经知道的问题。

James这里额外带来的是帮助你避免和其它第三方代码产生问题。你肯定不希望其它的实例破坏你的应用。

这个工作方式是Script loader将暗示它支持多个jQuery的版本，通过使用一个指定的属性，define.amd.jQuery=true。

对于希望更具体制定执行方式，我们注册jQuery为一个命名的模块因为这里有和其它文件混淆的风险，我们可能需要使用define。

使用命名的AMD可以提供安全健壮的use case。

// Account for the existence of more than one global
// instances of jQuery in the document, cater for testing
// .noConflict()
var jQuery = this.jQuery || "jQuery",
$ = this.$ || "$",
originaljQuery = jQuery,
original$ = $,
amdDefined;
// This is a mock AMD define function for testing AMD
// registration, but could easily be replaced with one
// of define variations from the wild.
function define( name , dependencies, callback ){
amdDefined = callback();
}
// The very easy to implement flag stating support which
// would be used by the AMD loader
define.amd = {
jQuery: true
};
//notice both instances are equivalent
console.log(jQuery, amdDefined);
console.assert(jQuery==amdDefined);

为jQuery提供加强的HTML5支持

jQuery1.7不会拥有它自己的内建HTML5，但是解决以前版本需要处理的俩个问题：

1）在jQuery1.6.4及其以前版本中，HTML5元素不支持内部HTML。

2）克隆的HTML5元素将会使用一个替代方式来支持跨浏览器克隆HTML5元素

// here's an example of a html5 shiv that would be loaded
// in the head of your document you can of course alternative
// between the solutions used for this
( "abbr article aside audio canvas details figcaption figure
footer header hgroup " + "mark meter nav output progress section
subline summary time video").replace(/w+/g, function(n) {
document.createElement(n);
});
// let's append some HTML5 elements which will be inserted
// internally via innerHTML. This should now work fine with
// all browsers, assuming a HTML5 shim/shiv is being used
$("#el").append("
<ARTICLE style="FONT-SIZE: 15px">
<SECTION>
<ASIDE>HTML5 elements</ASIDE>
</SECTION>
</ARTICLE>
");
// selection of HTML5 elements we added above
var article = $("article"),
aside = $("aside");
// simple tests to ensure that the HTML5 elements are valid
// and can be styled via jQuery
console.log( article.css("fontSize"), "15px", 'HTML5 elements
can be styled');
console.log( aside.length, 1, 'HTML5 elements don't collapse
their children')

支持能被.animate()使用的命名队列

以前版本，.animate()支持队列 - 允许一序列的操作被异步调用而不阻断应用。在jQuery1.7中，Corey建议添加队列名称 - 一个字符串用来指定队列按特定顺序来执行动画。这点对于细粒度的操作非常有用。

注意下面例子，每一个队列都可以被赋予一个字符串。"order"数组更新后，回调的顺序会保持因为所有的队列都是同一个定义来定义的。

// For     this particular example, the first callback
     // function for the test is called via a setTimeout()
     // at the end just for the sake of demonstrating
     // dequeuing. You can of course just stick to queues
     // within your original animation chain for most common
     // needs.
     // select an existing element for usage
     var foo = $( "#foobar" ),
     origWidth = foo.width(),
     order = []; // here just for testing purposes
     // animate with a named queue and some standard animation
     // properties
     foo.animate( { width: origWidth + 100 }, {
         queue: 'name',
         duration: 1800,
         complete: function() {
         // our second callback function
         // push the order number into the stack so we
         // test execution order was as expected
         order.push( 2 );
         console.log('second callback', order);
     }
     }).queue( "name", function( next ) {
         // last callback function
         console.log('last callback',order);
     });
     setTimeout( function() {
         // this is the first callback function that should
         // be called
         order.push( 1 );
         console.log('first callback',order);
         foo.dequeue( "name" );
     }, 100 );

支持新的事件APIs：.on()和.off()

以前版本，这里有很多方式来帮定事件或者解除帮定，比如, .bind/.unbind，.delegate()/.undelegate()，以及.live()。因为事件API的演化，很多方法都不知道如何最佳方式使用。

帮助用户来稳定这些API，我们介绍了一组新的事件API，.on()和.off()。以前的方法你可以使用，不过新的API更加直接。

// if a selector is supplied, we consider this a delegated event
     // if not, it's considered directly bound
     $(elem).on(events, selector, data, fn);
     // similar to how you might use .unbind() or .undelegate(),
     // .off() simply 'unbinds' the events attached
     $(elem).off(events, selector, fn);

支持使用.removeAttr()删除多属性

另外一个有趣的小变更是删除多属性方法.removeAttr()。以前这个方法允许删除单个属性，现在支持删除多个属性。

// create an element with a number of sample attributes we
     // can test
     var div = $("<div id='a'    rel='d'></div>"),
     tests = {
         id: "a",
         alt: "b",
         title: "c",
         rel: "d"
     };
     // check to make sure that all attributes have been
     // assigned correctly and exist with their expected
     // values
     $.each( tests, function( key, val ) {
         console.log( div.attr(key), val, "Attribute `" + key     +
         "` exists, and has a value of `" + val + "`" );
     });
     // remove these attributes
     div.removeAttr( "id alt title rel" );
     // check to ensure these attributes are no longer present
     $.each( tests, function( key, val ) {
         console.log( div.attr(key), undefined, "Attribute     `"
         + key + "` was removed" );
     });

支持关闭多次数据缓存属性扫描

很多开发人员使用.date()来保存元素的数据。当你使用多次的.data()方法，底层实现中你实际上会执行多次循环查找。使用jQuery1.7，我们介绍了一个优化方式来避免。这意味着过多使用.data()的程序将会有更好的性能。

// Here's a jsPerf performance test of the optimizations
     // thanks to Corey http://jsperf.com/internal-data/3
     var testing = {
     test: "testing",
     test2: "testing"
     },
     element = jQuery( "<div data-test='testing'>" ),
     node = element[ 0 ];
     // assign some data-attributes to our node for testing
     node.setAttribute( "data-test2", "testing" );
     // ensure that the data we've set is actually present -
     // minor sanity check
     console.log( element.data(), testing, "Sanity Check" );
     // assign some more data-attributes
     node.setAttribute( "data-test3", "testing" );
     // check if .data() has changed as the data-* attributes
     // have console.log( element.data(), testing, "The data
     // didn't change even though the data-* attrs did" );
     // clean up data cache
     element.remove();

总结

这里只是一个简单预览。希望大家能够喜欢。