jQuery 3.0의 변경 사항 및 it_jquery 사용 방법
- WBOY원래의
- 2016-05-16 15:16:571310검색
세계에서 가장 인기 있는 JavaScript 라이브러리인 jQuery는 항상 우리 웹 개발자에게 마법의 무기였습니다. 2006년 첫 출시 이후 지금까지 많은 웹 개발자들은 개발 작업을 더 쉽게 만들기 위해 이 우수한 라이브러리를 프로젝트에 도입해 왔습니다.
3개월이 지나 드디어 jQuery 팀이 3.0 알파 버전을 출시했습니다. jQuery compat 3.0과 jQuery 3.0의 두 가지 버전이 있습니다.
•jQuery compat 3.0은 이전 1.x에 대응하고 더 많은 브라우저와 호환되며 IE 버전 8.0까지 지원합니다
•jQuery 3.0은 이전 2.x에 대응하며, 최신 브라우저에 주의하고, IE는 9.0 버전까지 지원합니다
또한 3.0에는 러시아의 브라우저인 Yandex 브라우저에 대한 지원도 추가되었습니다.
1. 단순화된 표시/숨기기
이전의 표시/숨기기는 완벽하게 호환됩니다. 예를 들어 표시 요소의 표시가 스타일로 작성되어도 스타일시트에 표시될 수 있습니다. 3.0에서는 다릅니다. 스타일시트에 작성된 display:none은 show를 호출한 후에도 여전히 숨겨집니다. 3.0 표시하고 숨기려면 클래스 메소드를 사용하거나, 완전히 숨기려면 hide를 먼저 사용하고(CSS 코드를 사용하지 않고) show를 호출하는 것이 좋습니다.
<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>
2. 데이터 방식은 data-name-11 쓰기와 호환됩니다.
<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}， 之前版本输出 {}
$('#txt').data()
</script>
이 문제의 핵심은 $.camelCase 메소드의 구현 차이입니다
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11')
3. deferred는 Promise/A+와 호환됩니다
3.0은 그동안 거세 버전이라는 비판을 받아온 Promise/A에 대한 지원을 드디어 자신 있게 선언할 수 있게 되었습니다.
4. $.ajax 객체가 성공 | 오류 | 완료 메서드를 삭제했습니다.
이것은 Promise/A 사양의 홍보로 인해 사람들이 Promise를 점점 더 많이 사용하고 있으며 이전에는 Deferred에 여러 메소드가 존재할 필요가 없습니다
•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete
// 以下方法在 3.0 后没有了 $.ajax().success $.ajax().error $.ajax().complete
5. 너비/높이, css(너비) / css(높이)의 반환 값은 항상 소수입니다
이전에 일부 브라우저는 특수한 상황에서 부동 소수점 숫자를 반환했습니다.
6. 등록 이벤트 로드 | 언로드 오류
•load 이름이 ajax load와 이름이 같아 불명확합니다.
•unload 로드가 제거되면 언로드는 의미가 없습니다.
•error는 window.onerror를 사용하여 등록되며 표준 이벤트 핸들러가 아니므로 제거하는 것이 좋습니다
위 내용은 jquery3.0의 변경 사항을 요약한 것입니다. 다음은 jquery3.0의 업데이트된 내용과 사용법을 주로 소개합니다.
표시 및 숨기기
가장 큰 변화는 기능 작동 방식입니다. 그리고 그렇게 하는 데에는 그럴 만한 이유가 있습니다. 이전 구현에서 hide() 함수는 css 속성을 "display:none"으로 설정하고 show() 함수는 이 속성을 지웁니다. 하지만 그렇게 하면 조금 혼란스럽습니다. 몇 가지 예를 살펴보겠습니다.
1. show() 함수가 노드를 "display:block"으로 설정하려고 하고 "display:inline" 속성이 다른 스타일시트에 구현되면 코드가 손상되기 시작합니다.
2. 미디어용 반응형 웹 디자인(RWD)을 다룰 때 "디스플레이" 또는 "가시성"을 사용하여 노드의 가시성을 변경할 수 있습니다. 이는 "show()" 및 "hide()" 기능에 영향을 미칠 수 있습니다.
이 외에도 JQuery 팀이 해결해야 할 문제가 많이 있었습니다. 이로 인해 복잡한 구현 및 성능 문제가 발생하여 더 간단한 모델로 마이그레이션했습니다.
앞으로 "display:none"을 설정하고 "show()", "slideDown()", "fadeIn()" 또는 유사한 메서드를 사용하여 노드를 표시하면 작동하지 않습니다. 더 나은 접근 방식은 "addClass()" 및 "removeClass()"를 사용하여 디스플레이를 제어하는 것입니다. 또는 "ready()"가 호출될 때 요소에서 "hide()"를 호출할 수 있습니다.
빠른 예:
<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.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>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>
.data() Key 的命名规则
jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字，该数字将不再参与转换。思考下面的例子：
使用 jQuery 2.1.4：
控制台窗口不显示对象。
使用 jQuery 3.0.0：
由于现在数字不会参与转换为骆驼拼写法，key 被转换成了 foo-42-name。因此，我们得到了控制台中的输出。这个 fiddle 的网址是 http://jsfiddle.net/nWCKt/25/ 。你可以更改 jQuery 的版本来观察变化。
同样，如果我们想要不带任何参数地使用 data() 显示所有的数据，如果 data-* 属性的 key 名在连字符（-）后面接了一个数字，则参数的数量也将会在两个 jQuery 版本中改变，就像上面的例子一样。
width() 与 height() 函数返回小数值
一些浏览 器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持， jQuery 的 .width()、.height()、.css("width") 都可以返回小数值了。对于为了使用 亚像素精度来 设计网页的用户来说，这可能 会是一个好消息。
.load()、.unload()、及 .error() 函数被移除
这些方法早先已经不赞成使用了，现在则已经从 jQuery 3.0.0 alpha 版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例：
HTML：
<img src="space-needle.png" alt="Space Needle" id="spacen">
JavaScript：
早先的实现方式（现已不可用）
$( "#spacen" ).load(function() {
// Handler implementation
});
推荐的实现方式：
$( "#spacen" ).on( "load", function() {
// Handler implementation
});
jQuery 对象现在可遍历了
现在已经可以遍历 jQuery 对象了，使用 ES2015 的 for-of。所以，你可以像这样使用：
for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen'
}
jQuery 动画现在在后端使用了 requestAnimationFrame API
所有现代的浏览器都已经支持了 requestAnimationFrame（参见： http://caniuse.com/#search=requestAnimationFrame ）了。由于其被普遍支持，jQuery 将会使用此 API 来执行动画。其优势包括更流畅的动画及更少的 CPU 占用（因此，可以在手机上节约电量）。
增强 .unwrap() 函数
.unwrap() 函数可以让你在 DOM 中删除指定元素的父元素，早先不能接收参数。如果有人想给 unwrap 设定一个条件，这可能是个问题。
在 jQuery 3.0.0 alpha 中，.unwrap() 可以接收 jQuery 选择器做为参数来处理这个问题。
jQuery.Deferred 升级为 Promises/A+ 兼容
Promiseis是一个异步操作的最终结果——它是一个对象，承诺在未来交付结果。 和promise接口的最主要方式是then方法， 它注册了回调函数。现在，在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript promises的开放标准。 (想要更多的信息，可以查看链接: https://promisesaplus.com/ )
从jQuery的参考文档中，Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery 3.0.0中，jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。 这就是.then()方法的主要变更。
更好地处理错误情况
这个版本的 jQuery 能更好地处理错误 —— 错误请求过去一直是被忽略的，直到现在的版本才会抛出错误。
举例来说：考虑到 offset，要获取当前第一个元素的坐标，相对于文档来说，就要匹配集合中的元素。如果你正试图在 jQuery 的早期版本找到抵消的窗口（window），你会得到{top: 0, left: 0}这样的结果，而不是抛出一个错误，这是因为抵消窗口（window）是无意义的。而在 3.0 alpha 版本中，它就会抛出一个错误。
另外一个例子：$("#") 现在会抛出一个错误，而不是返回一个长度为 0 的集合。
对自定义选择器（如 :visible ) 进行了加速
当 :visible 之类的选择器在一个文档内多次使用时，性能得到了很大的提升。其内部是通过缓存来实现的 —— 第一次用过这个选择器后，以后返回结果都是一样的。但是其后的每一次调用返回结果都很快，因为缓存起作用了。来自 jQuery 的 Timmy Willison 在 报告 中指出使用缓存后 :visible 选择器的性能提升了 17 倍。
这些都是一些主要的更新。整个列表在他们的官方博客： http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ .
在哪里下载最新版本
有两个版本：
jQuery 3.0，其支持了现代浏览器： https://code.jquery.com/jquery-3.0.0-alpha1.js
jQuery Compat 3.0，其包含了对 IE8 的支持： https://code.jquery.com/jquery-compat-3.0.0-alpha1.js
也可以从 npm 中获取：
npm install jquery@3.0.0-alpha1 npm install jquery-compat@3.0.0-alpha1