JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?

我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

编写现代 JavaScript 代码

是不是还记得以前 Javascript 是光标悬浮时改变页面元素的一门语言?这样的日子早就已经过去了,每一种语言都在随着时间推移而发展,我们使用他们的方式也是如此,在不断的发展。看一下你一两年前写的代码:你觉得惭愧吗?如果是,那么这篇文章应该很适合你 🙂。

我将在这篇文章列出一些最佳实践,使你的 JavaScript 代码更容易编写、阅读和维护。

使用可以格式化代码的检查工具(linter)

我给您的第一个建议是使用代码检查工具,他可以帮助你检查在不同文件是否遵循统一的规则,尤其是当不同开发人员在协同开发同一个项目时:缩进,括号中的空格,将==替换为=== …

但更重要的是,尽可能让你检查工具自动修复代码。 ESLint 就做得很好(使用 –fix 选项),而且它可以与所有主流 IDE 完美集成,以便在保存时自动修复文件。

你也可以使用 Prettier,不过这款工具更专注于格式化,而不是静态检查,但处理后的结果基本相同 😉 。 继续阅读

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

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

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

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

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

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

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

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

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

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

webpack 2 入门

webpack 2将在文档完成后将正式发布(webpack 2.2 中文文档)。 但这并不意味着你现在不能开始使用版本2,如果你知道如何配置它的话。

webpack 2.2 已经正式发布! 现在通过 npm 安装 webpack 会自动安装 v2 版本。

什么是 webpack ?

简单来说,webpack 是一个针对 JavaScript 代码的模块打包工具。然而,自从它的发布,它逐渐发展成为所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。 继续阅读

ECMAScript 6 Modules(模块)系统及语法详解

在2014年7月底,TC39 [1]又召开了一次会议,在此期间ECMAScript 6(ES6)模块语法的最后细节被最终确定。这篇博客文章概述了完整的 ES6 模块系统。 继续阅读

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的复杂语法(它让我一直很头疼)。 继续阅读

学习 ES2015 新特性

es6features

这份文档最初取自Luke Hoban 优秀的es6features。 在GitHub,去给它一个star吧!

REPL

请务必在在线的REPL中尝试这些功能。
愚人码头注:你可以将示例代码复制到在线的REPL中,查看Babel转译结果。“读取-求值-输出”循环(英语:Read-Eval-Print Loop,简称REPL)是一个简单的,交互式编程环境。

介绍

ECMAScript 2015是一个ECMAScript标准,于2015年6月批准。

ES2015对于该语言来说是一次重要的更新,自2009年ES5标准化以来的第一个重大更新。自从ES5于2009年标准化以来,该语言的第一次重大更新。现在,主要的JavaScript引擎正在逐渐实现这些功能

有关ECMAScript 2015语言的完整规范,请参阅ES2015标准

ECMAScript 2015 新特性

箭头函数和词法this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。 继续阅读

ES2015 中的箭头函数和词法 this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。

// 使用表达式(Expression bodies)
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
// 使用函数体(Statement bodies)
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// 词法`this`
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
// 词法 arguments
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
}
return numbers;
};
return example();
}
square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

继续阅读