JavaScript: 2016年回顾

翻译自:https://www.sitepoint.com/javascript-2016-in-review/

2016年是意义重大的,奇怪的,欢欣鼓舞 / 可怕的一年,这取决于你的观点。与其他事件相比,只专注于JavaScript可能看起来无关紧要,但它是每个Web开发人员的工作生活的一个巨大的一部分。

JavaScript 人气持续爆涨。不是每个人都喜欢这门语言,但是现在你可能很少听到十年前嘲笑的评论。就个人而言,我一直喜欢JavaScript – 即使在早期,令人沮丧的年头。那些从C++,Java或PHP方向过来使用它的人可能首先会感到困惑:JavaScript看起来似曾相识,却又如此陌生。克服你的推断,你会欣赏它简单的优雅,实用性和灵活性。(That said, date handling is still a nightmare!,这就是说,日期处理仍然是一场噩梦!愚人码头看不懂这句是什么意思。)

JavaScript在五月迎来了它第21个生日,让我们回顾一下它刚成熟的第一年……

ECMAScript演变

ES6 / 2015是这门语言自诞生以来最重要的更新。这份规范花了7年才完成,但现在浏览器和其他运行运行环境终于开始支持箭头函数,let,const,代理和更多令人喜悦的特性。ES6的兼容性也慢慢变得很好

如果你需要支持更老版本的浏览器,完全切换到ES6可能还有点早。更老版本的意思是,一年多前发布的任何东西。您可以使用编译器将ES6转译为ES5,如Babel,但是如果你不引入额外的构建步骤,开发就会变得复杂。

ES7/2016比起革命更像是一种进化。一个令人激动的新特性是async,它允许以同步的方式编写异步代码,而不需要回调或Promise的复杂语法(它让我一直很头疼)。 继续阅读

jQuery 3.0 升级指南

jquery-3-0

概述

在3.0主版本中,jQuery Core团队对API进行更改及清理,并修复某些代码更改引起的bug。这包括删除以前弃用的公开API,更改或删除未记录的API,并更改现有API的记录或未记录的行为用于特定输入。

浏览器支持

jQuery 3.0 支持以下浏览器:

  • Internet Explorer: 9+
  • Chrome, Edge, Firefox, Safari: 当前版本 和 当前版本 – 1
  • Opera: 当前版本
  • Safari Mobile iOS: 7+
  • Android 4.0+

jQuery团队策略是主版本更新只针对这些浏览器,所以这个浏览器列表至少支持到jQuery 4。

jQuery Migrate 插件

与jQuery 1.9 / 2.0中的主要更改一样,我们已经创建了一个新版本的jQuery Migrate插件,以简化旧代码迁移到3.0版本。我们强烈建议您使用这个插件作为升级工具,它将给出 可能影响您的代码的关于大多数主要更改的具体建议。 继续阅读

jqXHR.fail()回调方法及其参数详细说明

为了让客户端提供错误日志,小弟使用了jqXHR.fail()去收集接口的错误信息,方便开发快速定位问题。

jqXHR.fail()是一个可供选择的 error 回调选项的构造函数,.fail()方法取代了的过时的.error()方法。从 jQuery 1.5 开始,$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。为了让回调函数的名字统一,便于在$.ajax()中使用。jqXHR也提供.error() .success().complete()方法。

首先来看看语法。

过时的方法:

$.ajax({
...
error:function(jqXHR, textStatus, errorThrown) {},
...
})

Promise实现:

jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});

这里对这三个参数做详细说明。

第一个参数 jqXHR(jqXHR对象):这里的jqXHR是一个jqXHR对象,在jQuery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。 继续阅读

jQuery 3 中的新增功能

翻译自:http://developer.telerik.com/featured/whats-new-in-jquery-3/

从jQuery 震撼整个 Web ,至今已有十年了,我们有很好的理由一直坚持使用维护它。jQuery为用户提供了 DOM 进行操作,执行 Ajax 请求,创建动画等等,极为友好的接口。此外,与 DOM API 不同的是,jQuery 采用了 复合模式(composite pattern)。 正因为如此,你可以在一个jQuery集合上调用jQuery方法,而不用担心集合包含的元素数量(零,一个或多个)。

在未来的几周内,随着 jQuery 3 的发布,jQuery 会到达一个重要的里程碑。jQuery 3 修复了很多 bug,增加了新的方法,弃用并移除了一些功能,并改变了一些功能的行为。在这篇文章中,我重点讲解jQuery 3所带来的一些最大的变化。

新特性(New Features)

在下面的章节中,我将讨论jQuery 3中新增的重要特性。

for…of 循环

jQuery 3 将提供for...of循环语句,可以用来遍历一个jQuery集合所有的 DOM 元素。这种新的迭代器ECMAScript 2015(又名的ECMAScript6)规范的一部分。它能实现对可遍历对象(包括 ArrayMapSet 等)的循环。

当使用这个新的迭代方法时,您每次接收的值不是一个jQuery集合,而是一个DOM元素。当你对一个jQuery集合执行操作时,这个新的迭代方法可以少许改善你的代码。

为了理解这个迭代方法是如何工作的,假设你想给页面中每个input元素分配一个 ID。在 jQuery 3 之前,你可以这样写:

var $inputs = $('input');

for(var i = 0; i < $inputs.length; i++) {
   $inputs[i].id = 'input-' + i;
}

而在 jQuery 3 中,你可以这样写:

var $inputs = $('input');
var i = 0; 
 
for(var input of $inputs) {
   input.id = 'input-' + i++;
}

$.get() 和 $.post()的新签名

jQuery 3 为 $.get()$.post() 工具函数增加了新签名,为的是使得它们和 $.ajax() 的接口风格保持一致。新签名是这样的: 继续阅读

Sprint.js – 一个高性能、轻量级类jQuery的 DOM 库

Sprint.js 是一个高性能、轻量级(5KB,gzip压缩),类似于jQuery的 DOM 库。尤其适用于带宽和资源受限的设备(如:手机和平板电脑)。适用于现代浏览器(IE10+)。

$("div").addClass("new").append("<p>Hi Sprint</p>");

Sprint是一个另类库,而不是代替jQuery。 jQuery提供了更多的功能,更多的处理边缘情况,支持更多的浏览器。 Sprint只是使得DOM操作变的友好而不牺牲性能。 继续阅读

通过 npm使用jQuery 插件

翻译自:Using jQuery plugins with npm

上周我们讨论了如何发布jQuery的插件到npm,快速而原始的方式。由于快速和原始,我们的意思是,你可以简单地发布你的模块到npm–没有任何修改–人们就可以使用它。但是一些插件需要做额外的工作,并添加一点点代码,使其可以更容易通过npm基础工具使用。

在这篇文章中,我们将向你展示如何使用快速而原始的方式发布jQuery插件…也就是说,插件无需使用package.json主导文件或者设置一个全局变量,不管他们是否直接在浏览器中使用或者被像Browserify这样的工具捆绑。

在接下来的文章中,我们将向你展示如何更新你的插件来使用npm特有的功能,这使得开发人员更容易使用你的模块(对于你,当你在项目中用你自己的插件上)。 我们还将向您展示如何使之与Node,CommonJS的模块系统结合工作,并充分利用模块化,使你的插件更易于维护,更容易。

什么样的插件

这种类型的插件,我们不导出Node兼容模块(使用CommonJS的模块格式)并且不希望使用这样的模块工作。相反,它只是期望一个jQuery对象(在全局范围内)使用该插件一起工作。

然而,即使一个插件确实知道如何使用Node兼容的CommonJS模块工作,你仍然可以使用我们在这里描述的方法,所以你不必担心搞清楚的区别。我们将在接下来的文章中阐述差异。

我们将开发一个简单的网页,其中使用tipso提示插件。你可以在GitHub上找到这个demo的最终代码。

多种措施

我们将讨论多种措施。所有使用npm处理前端的资源的不同方法各有优点和缺点。我们希望能帮助你挑选最适合你的团队的开发工作流程的策略。在接下来的文章中,我们将先从最简单的工作流程,并从这里开始建立一个更清洁,更易于维护的工作流程。我们将在本文和以后的文章中讨论你应该考虑的权衡。

我们将在这篇文章中探讨这两种方法:

1.直接包括脚本文件;
2.用Browserify打包文件; 继续阅读

jQuery DOM 操作方法对应的DOM API ——DOM 操作

愚人码头注:

  • 原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript,所以收集整理了jQuery语法对应的DOM API ;
  • 原作者参数的原因可以看这里:http://blog.garstasio.com/you-dont-need-jquery/why-not/ ,个人同意他的观点,简单的页面或应用,完全可以抛弃jQuery;但是出于开发效率和开发成本的考虑,我还是比较喜欢用jQuery。
  • 本人翻译或者说拷贝这篇文章的原因是:有一部分前端只会用jQuery,什么都网上找插件,甚至滥用jQuery,一点原生的JavaScript都不会写。QQ上,微博私信经常收到类似的基础问题。前端就是折腾的活,要从基础系统的学习。所以翻译了这篇文章,希望对新手和不写原生脚本的同学有一点点的帮助。

DOM Manipulation(DOM 操作)

我们已经看过 如何轻松地选择元素,而不依赖于jQuery。但对于改变元素?怎么样创建新的元素呢?如何在页面移动元素呢?当你知道不用jQuery来实现这一切,或者更多,你可能会很高兴。Web API为我们提供了所有我们所需要的工具。

你会看到jQuery或任何其他库对一些DOM操作的帮助是微不足道的。然而,其他人可能有点棘手。再次强调,我不是要抨击的jQuery, 我也不会断言jQuery是无用的或完全不必要的。这骗文章的目的是告诉你如何不用jQuery。如果你选择这样做。你可能会发现, 在许多情况下,大多数的脚本库,像jQuery中的大多数功能未使用,并且可以省略。

  1. Creating Elements
  2. Inserting Elements Before & After
  3. Inserting Elements As Children
  4. Moving Elements
  5. Removing Elements
  6. Adding & Removing CSS Classes
  7. Adding/Removing/Changing Attributes
  8. Adding & Changing Text Content
  9. Adding/Updating Element Styles
  10. Micro-libraries For More Help
  11. Next

Creating Elements(创建元素)

jQuery

$('<div></div>');

DOM API

// IE 5.5+
document.createElement('div');

哇,很容易是吧。 jQuery为我们节省了几个直接,但几乎是不值一提的字节数。

Inserting Elements Before & After(在元素前后插入)

让我们创建一个元素并且在特定元素后插入。

比如初始状态是这样的:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

… 我们希望创建一个新的元素,ID为’1.1’,并且插入到第一个和第二个DIV之间,比如说这样: 继续阅读

jQuery选择器对应的DOM API ——选择元素

愚人码头注:
  • 原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript,所以收集整理了jQuery语法对应的DOM API ;
  • 原作者参数的原因可以看这里:http://blog.garstasio.com/you-dont-need-jquery/why-not/ ,个人同意他的观点,简单的页面或应用,完全可以抛弃jQuery;但是出于开发效率和开发成本的考虑,我还是比较喜欢用jQuery。
  • 本人翻译或者说拷贝这篇文章的原因是:有一部分前端只会用jQuery,什么都网上找插件,甚至滥用jQuery,一点原生的JavaScript都不会写。QQ上,微博私信经常收到类似的基础问题。前端就是折腾的活,要从基础系统的学习。所以翻译了这篇文章,希望对新手和不写原生脚本的同学有一点点的帮助。

选择元素

有多少次你看到一个Web应用程序或库使用jQuery执行简单琐碎的元素选择?有多少次这样写:$(#myElement')? 或者这样$('.myElement')?嘘……你不需要用jQuery选择元素!这使用DOM API也很容易做到。 继续阅读

JavaScript实现的抛物线运动效果

最近做购物车功能,看到天猫上的购物车有元素抛物线运动效果,所以也想凑热闹实现一个。

网上搜索了一下,看了一下张鑫旭的《小折腾:JavaScript与元素间的抛物线轨迹运动》,原理张鑫旭已经讲的很清楚了,多说了也没什么意思,就是数学公式。不过看代码个人觉得有点变扭,那不是我的习惯,所以自己重新写了一个。

先看demo:http://www.css88.com/demo/parabola/index.html

如何使用:

运动位移的元素必须设置为position: absolute,通过绝对定位控制lefttop来实现的;
继续阅读

jQuery 3.0:新一代的 jQuery

不知不觉,jQuery离初次发布已经过去了将近八年。经年之间,Web开发的面貌已经焕然一新,jQuery的变迁也与时俱进。jQuery团队无时无刻不是沿着维护旧有代码的兼容性及支持Web开发当下的最佳实践之间的道路一往无前。

语义版本控制(semantic versioning,或简称semver)就是这些最佳实践之一。它让开发人员(以及构建工具)建立起一种观念,即在移至软件的新版本时存在风险。版本号形如主版本号.次版本号.补丁版本号,其中三个组成部分都是整数。在semver中,如果主版本号部分发生了变化,就意味着API部分有着破坏性的变化,所以开发人员需要提高警惕。

版本控制这个概念在jQuery中变得更细化了一些,因为浏览器兼容性和API兼容性几乎是同等重要的。为了让jQuery变得瘦身一些,团队在2013年交付了两个版本。第一个版本保持着1.x的编号,它目前发展到了1.11.1,目的在于维护与最大多数浏览器的兼容性。第二个版本,从2.0.0起步,目前发展到了2.1.1,则放弃了对于诸如IE8以下版本这样的浏览器的支持,目的在于精简代码。1.x和2.x版本的jQuery有着相同的公开API,尽管它们的内部实现有着些许不同之处。 继续阅读