2017年最值得学习的前端框架和技术

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?

你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?

现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。

记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用 Babel REPL 进行转译。 继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

2017年最佳JavaScript框架,库和工具

JavaScript框架,库和工具似乎比他们的开发人员多出很多。截至2017年5月,在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。npmjs.org 有 50 万个可用的软件包,每月下载量近100亿次。

2017.05.29:该文章已更新,以反映 JavaScript 生态的当前状态。

本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西,坚持一段时间。你需要知道的是:你最喜欢的选项终将被“更好”的东西取代,无论你选择什么! 继续阅读

2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年,我们大多数人仍在设计静态杂志布局,在2017年,我们重新设计了数字机器,有成千上万的调整、协调、移动的部件。

简单的说,很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的,帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库,最适合于UI设计,它们的优点和缺点,以及何时选择它们。

请记住,我们是从一个熟悉代码的UI设计师(而不是从代精通代码的开发人员)的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的,但是,除了了解基本的 HTML/CSS 之外,使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。
继续阅读

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版本。我们强烈建议您使用这个插件作为升级工具,它将给出 可能影响您的代码的关于大多数主要更改的具体建议。 继续阅读

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之间,比如说这样: 继续阅读