深入解析 ES6：使用 Babel 和 Broccoli

2015-08-15 W.Y.
ES6
ES6 才刚被标准化，人们就在开始谈论 ES7 将提供哪些闪亮的新特性了。作为 Web 开发人员，我们更想知道如何使用这些新特性。在之前的文章中，作者鼓励我们在一些工具的帮助下开始使用 ES6： 如果你想使用这些新语法，你可以使用 Babel 或 Google 的 Traceur 将 ES6 代码转换为友好的 ES5 代码。 本文的主题就是这些工具的使用，上面这些工具被统称为 transpiler，transpiler 也被称为源码到源码的编译器，用于在抽象级别进行编程语言之间的相互转换。使用 transpiler 可以让我们用 ES6 语法来编写代码，同时保证这些代码能在所有浏览器上运行。 more Transpiler 继续阅读 »

深入解析 ES6：简介

2015-06-14 W.Y.
ES6
欢迎来到深入解析 ES6 系列，本系列将探讨 JavaScript 即将面世的新版本 -- ECMAScript 6。ES6 包含许多新特性，这使得 JavaScript 语言更强大和更具表现力，接下来的每周我们将逐一揭开 ES6 的神秘面纱。在开始之前，我们值得花几分钟时间来谈谈什么是 ES6 或者你期待它是什么样的。 more 什么是 ECMAScript JavaScript 语言的标准是由 ECMA（类似 W3C 的标准化组织）制定，并命名为 ECMAScript，除其他事项外，ECMAScript 还定义了： 语法规则 -- 解析规则、关键字、声明、操作符等 变量类型 -- 布尔、数字、字符串、对象等 原型和继承机 继续阅读 »

深入解析 ES6：Generator

2015-06-20 W.Y.
ES6
今天讨论的新特性让我非常兴奋，因为这个特性是 ES6 中最神奇的特性。 这里的“神奇”意味着什么呢？对于初学者来说，该特性与以往的 JS 完全不同，甚至有些晦涩难懂。从某种意义上说，它完全改变了这门语言的通常行为，这不是“神奇”是什么呢。 不仅如此，该特性还可以简化程序代码，将复杂的“回调堆栈”改成直线执行的形式。 我是不是铺垫的太多了？下面开始深入介绍，你自己去判断吧。 more 简介 什么是 Generator？ 看下面代码： javascript function* quips(name) { yield "hello " + name + "!"; yield "i hope you are enjoy 继续阅读 »

webpack之es6和react.js

2017-02-17 Lim Geng
前端 webpack es6 react
昨天有朋友说让vsc支持react和es6太难配置了，我说直接用webpack吧，vsc仅仅用来敲代码就行了。之所以我这么说，因为我的vsc只是用来敲代码的，常用的git操作，依赖安装都是寄几在终端搞的。于是今天试了一下webpack，也踩了几脚坑，先让我擦干眼泪。 这里是这篇文章涉及到的源代码，如果需要运行可以直接跳到下面的最后一步生成。 如何配置 当你看到最终的是如何实现的时候，我其实是拒绝的，我宁可花长时间写的复杂点，但是很简单，绞尽脑汁也多写不了几行字。 创建目录 cd ~/Desktop mkdir hello-react cd hello-react 初始化npm npm init -y // 你也可以不 继续阅读 »

深入解析 ES6：Rest 参数和参数默认值

2015-06-27 W.Y.
ES6
本文将讨论使 JavaScript 函数更有表现力的两个特性：Rest 参数和参数默认值。 Rest 参数 通常，我们需要创建一个可变参数的函数，可变参数是指函数可以接受任意数量的参数。例如，String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数，ES6 为我们提供一种新的方式来创建可变参数的函数。 我们来实现一个示例函数 containsAll，用于检查一个字符串中是否包含某些子字符串。例如，containsAll("banana", "b", "nan") 将返回true，containsAll("banana", "c", "nan") 将返回 false。 下面是传统的 继续阅读 »

深入解析 ES6：未来展望

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: The Future](https://hacks.mozilla.org/2015/08/es6-in-depth-the-future/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-08-21 继续阅读 »

深入解析 ES6：Generators

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: Generators, continued](https://hacks.mozilla.org/2015/07/es6-in-depth-generators-continued/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-07-09 继续阅读 »

深入解析 ES6：Symbol

2015-07-24 W.Y.
ES6
Symbol 是什么？ Symbols 不是图标，也不是指在代码中可以使用小图片： javascript let 😻 = 😺 × 😍; // SyntaxError 也不是指代其他一些东西的语法。那么，Symbol 到究竟是什么呢？ more 七种数据类型 JavaScript 在 1997 年被标准化时，就有 6 种数据类型，直到 ES6 出现之前，程序中的变量一定是以下 6 种数据类型之一： Undefined Null Boolean Number String Object 每种数据类型都是一系列值的组合，前面 5 种数据类型值的数量都是有限的。Boolean 类型只有两个值：true 和 false，为 B 继续阅读 »

深入解析 ES6：Modules

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-08-14 继续阅读 »

深入解析 ES6：Proxies

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: Proxies](https://hacks.mozilla.org/2015/07/es6-in-depth-proxies-and-reflect/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-07-17 继续阅读 »