让我们看看jQuery 3.0有什么新玩意

zsyzk 5年前
   <p>作为迄今为止最流行的 JavaScript 库, <a href="/misc/goto?guid=4958183308549259819" rel="nofollow,noindex"> <strong>jQuery</strong> </a> 为无数的 Web 开发者带来了福利。 jQuery 从 2006 年诞生至今,已经被许许多多的 Web 开发者运用在项目中,极大地方便了开发。</p>    <p>时间回到 2015 年 7 月, jQuery 3.0 发布了第一个测试版———这是长久以来的一次重要发布。让我们一起来看看 jQuery 中有什么新的东东,能帮我们更愉快地玩耍。</p>    <h2>show() 和 hide()</h2>    <p>show() 和 hide() 这两个函数的工作方式发生了重要的变化。 jQuery 这么做当然有他的理由。在过去,使用 hide() 会把元素的 CSS 属性 display 设置为 none ,而使用 show() 会把这个元素清除。这么做就容易乱套。举几个例子:</p>    <ol>     <li>如果一个元素的属性设为了 display:inline ,而在另一个样式表中想通过使用 show() 方法,把属性变成 display:block ,这种做法会破坏代码。</li>     <li>当我们设计响应式网站,进行媒体查询时,可能会通过使用 display 或者 visibility 属性来控制元素是否可见。这么做也会干扰 show() 和 hide() 方法。</li>    </ol>    <p>除了以上说的这两个以外,还能举出很多 jQuery 团队不得不填这个坑的例子。恶果就是运行效率下降、性能低下,所以 jQuery 团队推出了一种简单的模型。</p>    <p>这样一来,一旦把元素设置成 display:none ,那么不管接下来你使用什么方法, show() 、 slideDown() 、 fadeIn() 还是其它类似的方法,你都没法让这个元素显示出来。控制元素可见性的最好方法是使用 addClass() 和 removeClass() 方法。或者我们也可以在调用 ready() 的期间,调用元素的 hide() 方法。</p>    <p>用简单的例子说明一下:</p>    <pre>  <code class="language-xml"><!DOCTYPE HTML>  <html>      <head>      <style>          .invisible{              display: none;          }          .visible{              background-color: deepskyblue;              display:block;          }      </style>      <script src="jquery-3.0.0-beta1.js"></script>      <script>          $(document).ready(function(){              $("#div1").addClass("invisible");              $("#toggle").click(function(){                  $("#div1").removeClass("visible");                  $("#div1").addClass("invisible");              });          });      </script>      <title>Control Visibility</title>      </head>      <body>          <p>Hello!</p>          <divid="div1">Can you see this?</div>          <buttonid="toggle">Click me</button>      </body>      </html>  </code></pre>    <p><img src="https://simg.open-open.com/show/df7f96b4bdb84bfde87959fd485cc81b.png"></p>    <p><img src="https://simg.open-open.com/show/e49d3db5d8587f53345eef7e505f347d.png" alt="让我们看看jQuery 3.0有什么新玩意" width="293" height="324"></p>    <p><img src="https://simg.open-open.com/show/da39d32a1fe14adf02a10f24dd8cf084.png"></p>    <h2>.data() 的关键字命名</h2>    <p>为了顺应 HTML5 数据集合的标准,jQuery 团队 改变了 .data() 的运行机制。如果 data-* 属性中的关键字中包含数字的话,这个数字不再参与转化。看看下面这个例子:</p>    <p>在 jQuery 2.1.4 中 :</p>    <p><img src="https://simg.open-open.com/show/8ea43404cd3bca31915033d4d3996153.png"> 控制台并没有显示出这个对象。</p>    <p>在 jQuery 3.0.0 中 : <img src="https://simg.open-open.com/show/9485fe813763e5c44810118372c32f13.png"></p>    <p>由于数字不再转化成驼峰表示,所以关键字被转化成了 foo-42-name ,控制台输出了结果。可以在 fiddle 上观看演示 <a href="/misc/goto?guid=4959674288801332715" rel="nofollow,noindex">http://jsfiddle.net/nWCKt/25/</a> 。你可以改变 jQuery 版本,看看结果有什么不同。</p>    <p>同样道理,如果想通过不带参数的 data() 方法来显示所有的 data 内容的话,我们发现如果在 data-* 属性中的关键名中,短线“-”后紧跟着一个数字的话,新旧版本的 jQuery 中参数的个数是不同的,正如上面的例子。</p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><divdata-foo-42-name="namebar" data-foo-42-yes="yesbar"></div>  </code></pre>    <p>JavaScript:</p>    <pre>  <code class="language-javascript">var div = $('div');  console.log(div.data());  </code></pre>    <p>在 jQuery 3.0中,会显示对象{foo-42Name: “namebar”, foo-42Yes: “yesbar”}。但是在之前的版本中则只显示一个空的对象{}。</p>    <p>部分浏览器会返回 width 和 height 的像素值。现在不论是 .width() , .height() , .css(“width”) , 还是 .css(“height”) ,只要是支持的浏览器, jQuery 都将返回十进制数。对于一直使用像素值设计网页的朋友们,可谓一件值得庆幸的好消息。</p>    <p>去掉了 .load()、 .unload() 和 .error() 方法</p>    <p>这些方法早都是老掉牙过时的了,现在终于从 jQuery 3.0.0 测试版中移除了。推荐做法是使用 .on() 方法来处理相应的事件。举一个简单的例子:</p>    <p>HTML:</p>    <pre>  <code class="language-javascript"><imgsrc="space-needle.png" alt="Space Needle" id="spacen">  </code></pre>    <p>老掉牙的做法(现在已经抛弃了这种做法)</p>    <pre>  <code class="language-javascript">$( "#spacen" ).load(function() {        // Handler implementation      });  </code></pre>    <p>现在推荐的做法:</p>    <pre>  <code class="language-javascript">$( "#spacen" ).on( "load", function() {          // Handler implementation      });  </code></pre>    <h2>jQuery 对象终于支持迭代了</h2>    <p>从现在起,你可以用 ES2015 中的 for-of 对 jQuery 对象进行迭代。所以,你可以写出这样的代码:</p>    <pre>  <code class="language-javascript">for ( nodeof $( "<div id=spacen>" ) ) {    console.log( node.id ); // Returns ‘spacen’  }  </code></pre>    <p>(源代码请戳 <strong> <a href="/misc/goto?guid=4959674288895496680" rel="nofollow,noindex">这里</a> </strong> )</p>    <h2>jQuery 动画现在在后台使用 requestAnimationFrame API</h2>    <p>所有的现代浏览器现在都支持 requestAnimationFrame (详见: <a href="/misc/goto?guid=4959674288981714865" rel="nofollow,noindex">http://caniuse.com/#search=requestAnimationFrame</a> )。由于 requestAnimationFrame 的普及度如此之广,jQuery 使用这个 API 来执行动画操作。它的优点包括支持更平滑的动画和更少的 CPU 密集型动画(也就是说能节省移动设备的电量)。</p>    <h2>.unwrap() 方法的增强</h2>    <p>.unwrap() 方法可以让你移除 DOM 中匹配元素的父节点,但这个方法在以前都不能接收参数。如果想基于父节点的条件来执行 .unwrap() 的话,就会遇到麻烦。</p>    <p>在 jQuery 3.0.0 测试版中, jQuery 3.0.0 alpha能接受 jQuery 选择器的参数,这个问题也就迎刃而解了。</p>    <h2>将 jQuery.Deferred 更新成可兼容 Promises/A+</h2>    <p>promise 是一个异步操作的的最终结果 —— 它指的是这样一个对象,它能保证在将来产生一个结果。和 promise 互动的主要方式是通过 then 方法,then 方法注册了回调函数。在 JavaScript 中使用 Promise 来实现异步已经变得越来越流行。Promises/A+ 是交互的 JavaScript promises 的一个开放标准。(更多详细信息,请戳这里: <a href="/misc/goto?guid=4958866170093509700" rel="nofollow,noindex">https://promisesaplus.com/</a> )</p>    <p>在 jQuery 文件中, Deferred 对象是一个可链接适用对象,通过调用 jQuery.Deferred() 方法创建。它能注册多个回调函数到回调队列中,引发回调队列,并能传递每个同步或异步函数的成果获失败状态。在 jquery 3.0.0 测试版中,更新了 jQuery.Deferred 对象,来兼容 Promises/A+ 和 ES2015 Promises。所以, .then() 方法也有了重大的变化。</p>    <h2>更好的错误处理能力</h2>    <p>这版的 jQuery 能更好地处理错误事例 —— 被忽略的不正确的请求,抛出错误。</p>    <p>比如:根据相关标准文件, offset 属性代表了匹配元素中第一个元素的坐标。如果你想获取 window 的 offest 属性值的话,老版本的 jQuery 回返回结果 {top: 0, left: 0} ,并没有报错。但是我们知道 window 的 offset 属性本身是没意义的。所以在 3.0 测试版中,更正了这个错误,获取 window 的 offest 属性值的话就会报错</p>    <p>另外一个例子: $("#") 现在会报错,而不再是返回一个长度为 0 的集合。</p>    <h2>定制选择器( 比如:visible)速度的大幅度提升</h2>    <p>在 DOM 中多次使用 :visible 等等选择器的性能已经有了很大的提升。这其实是缓存发挥了作用 —— 所以在第一处使用选择器的地方,性能并没有提升。但是,在后面每个调用选择器的地方,性能都得到了巨大的提升,缓存在这里发挥着功不可没的作用。 jQuery 团队的 Timmy Willison <a href="/misc/goto?guid=4959674289088520088" rel="nofollow,noindex">指出</a> 由于缓存的作用, :visible 选择器性能提升了大约 17 倍。</p>    <p>以上都是新版中的重要更新。完整的更新列表请参见官方博客: <a href="/misc/goto?guid=4958961894659665489" rel="nofollow,noindex">http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/</a> 。</p>    <h2>下载新版本的途径</h2>    <p>本次发布了两个版本:</p>    <ol>     <li>jQuery 3.0, 支持现代浏览器 : <a href="/misc/goto?guid=4958961894304569191" rel="nofollow,noindex">https://code.jquery.com/jquery-3.0.0-alpha1.js</a></li>     <li>jQuery Compat 3.0, 还能兼容支持 IE8 : <a href="/misc/goto?guid=4958961894400719515" rel="nofollow,noindex">https://code.jquery.com/jquery-compat-3.0.0-alpha1.js</a></li>    </ol>    <p>同时也可以通过 npm 安装</p>    <p>安装指令:</p>    <pre>  <code class="language-javascript">npminstalljquery@3.0.0-alpha1  npminstalljquery-compat@3.0.0-alpha1  </code></pre>    <p>欢迎试用新版本,可以在 <a href="/misc/goto?guid=4958524645790811766" rel="nofollow,noindex">https://github.com/jquery/jquery</a> 网站反馈信息。真的值得一用哦!</p>    <h2>Web 开发的更多实战</h2>    <p>本文属于本文属于微软公司 web 开发系列文章,该系列关注实践 JavaScript 学习、开源项目以及 <a href="/misc/goto?guid=4959674289406742326" rel="nofollow,noindex">Microsoft Edge</a> 浏览器和新版 <a href="/misc/goto?guid=4959674289493711347" rel="nofollow,noindex">EdgeHTML 渲染引擎</a> 的最佳互操作实践。</p>    <p>我们欢迎你在装有 Microsoft Edge 的浏览器和设备上测试 —— Microsoft Edge 是 Windows 10 的默认浏览器, <a href="https://dev.windows.com/en-us/microsoft-edge/?utm_source=SitePoint&utm_medium=article80&utm_campaign=SitePoint" rel="nofollow,noindex">dev.microsoftedge.com</a> 网站提供了许多相关的免费工具:</p>    <ul>     <li><a href="http://dev.modern.ie/tools/staticscan/?utm_source=SitePoint&utm_medium=article80&utm_campaign=SitePoint" rel="nofollow,noindex">扫描检测你的网站上是否存在过时的库、样式文件,并能检测网站的访问性</a></li>     <li><a href="http://dev.modern.ie/tools/vms/windows/?utm_source=SitePoint&utm_medium=article80&utm_campaign=SitePoint" rel="nofollow,noindex">提供 Mac、Linux 和 Windows虚拟机的下载</a></li>     <li><a href="https://dev.modern.ie/platform/status/?utm_source=SitePoint&utm_medium=article80&utm_campaign=SitePoint" rel="nofollow,noindex">在带有 微软 Edge roadmp 的浏览器上,能检测网站平台的跨浏览器性能</a></li>     <li><a href="https://remote.modern.ie/?utm_source=SitePoint&utm_medium=article80&utm_campaign=SitePoint" rel="nofollow,noindex">在自己的设备上远程测试微软 Edge 浏览器</a></li>    </ul>    <p>更多深入的学习请移步大神们的文章:</p>    <ul>     <li>互操作的最佳实践( <a href="/misc/goto?guid=4959674289971556505" rel="nofollow,noindex">系列文章</a> ):      <ul>       <li><a href="/misc/goto?guid=4959674290065265272" rel="nofollow,noindex">如何避免浏览器检测</a></li>       <li><a href="/misc/goto?guid=4959674290140742420" rel="nofollow,noindex">CCS Prefix 最佳实践</a></li>       <li><a href="/misc/goto?guid=4959674290216737599" rel="nofollow,noindex">维护和更新你自己的 JS 框架和库</a></li>       <li><a href="/misc/goto?guid=4959674290296162096" rel="nofollow,noindex">打造插入式 web 体验</a></li>      </ul> </li>     <li><a href="/misc/goto?guid=4959674290376723435" rel="nofollow,noindex">Coding Lab on GitHub : 跨浏览器测试及最佳实践</a></li>     <li><a href="/misc/goto?guid=4959674290465218971" rel="nofollow,noindex">哇哦~我有在 Mac 和 Linux 上测试 Edge 和 IE 的特殊技能!</a> (来自 Rey Bango )</li>     <li><a href="/misc/goto?guid=4959674290543468909" rel="nofollow,noindex">不破坏Web的同时优化 JavaScript(</a> 来自 Christian Heilmann )</li>     <li><a href="/misc/goto?guid=4959674290622801526" rel="nofollow,noindex">用 WebGL 进行 3D 渲染</a> (来自 David Catuhe )</li>     <li><a href="/misc/goto?guid=4959674290703571125" rel="nofollow,noindex">托管 web app 以及 web平台创新</a> (来自 Kiril Seksenov)</li>    </ul>    <p>我们社区的开源项目:</p>    <ul>     <li><a href="/misc/goto?guid=4959674290783128250" rel="nofollow,noindex">vorlon.JS</a> (跨设备远程 JavaScript 测试)</li>     <li><a href="/misc/goto?guid=4959674290863703844" rel="nofollow,noindex">manifoldJS</a> (部署跨平台托管 web app)</li>     <li><a href="/misc/goto?guid=4959674290942001079" rel="nofollow,noindex">http://babylonjs.com/?WT.mc_id=16544-DEV-sitepoint-article80</a> babylonJS (3D 图像 so easy)</li>    </ul>    <p>更多的免费工具和后端 web 开发工具:</p>    <ul>     <li><a href="/misc/goto?guid=4959674291027146007" rel="nofollow,noindex">Visual Studio Code</a> (适合 Mac、Linux 和 Windows 的轻量级代码编辑器 )</li>     <li><a href="/misc/goto?guid=4959674291110249858" rel="nofollow,noindex">Visual Studio Dev Essentials</a> (免费, 具有订阅式培训和云的优点)</li>     <li><a href="/misc/goto?guid=4959674291188509064" rel="nofollow,noindex">Code with node.JS</a> 和 <a href="/misc/goto?guid=4959674291273241230" rel="nofollow,noindex">trial on Azure Cloud</a></li>    </ul>    <p> </p>    <p>来自: <a href="/misc/goto?guid=4959674291355129723" rel="nofollow">http://web.jobbole.com/86316/</a></p>    <p> </p>