在ES2015发布后，JavaScript最终也有了一个标准的模块化方案，而同时从webpack开始，也带来了一波“一切皆模块”的潮流。整个2015-2016的前端发展中，除去在UI层不断的努力和突破外，几乎每一件事都和模块化脱不开关系。

本文也试图从几个方面简单地说一下模块化，并分析一些在模块化实施中产生的误区。

原文：http://www.2ality.com/2016/01/private-data-classes.html

如何在ES6中管理类的私有数据？本文为你介绍四种方法：

• 在类的构造函数作用域中处理私有数据成员
• 遵照命名约定（例如前置下划线）标记私有属性
• 将私有数据保存在WeakMap中
• 使用Symbol作为私有属性的键

在不少框架中，都会对“扩展”这一概念有需求。所谓扩展，即一个可组合的组件，用于嵌入到目标的生命周期中，对目标的行为进行额外的处理使得目标拥有不同的表现。

一个非常简单的案例即日志的记录。通常框架自身并不会有业务相关的日志记录的功能，而业务代码也不希望混入并非业务逻辑的日志记录部分。那么使用一个扩展，在合适的点进行日志的收集和存储是很合适的设计。

在以往，比较流行的扩展通常有几种形式：

All code in any code-base should look like a single person typed it, no matter how many people contributed. — idiomatic.js

fecs 是以百度前端代码规范为目标的前端代码风格套件，套件包括 htmlcs、csshint、lesslint 和 jformatter，此外还有社区的相关开源模块 cssbeautify、csscomb、fixmyjs 和 esformatter：

显而易见，fecs 不仅能检查 HTML/CSS/LESS/JavaScript 代码的规范问题，而且还能修复代码的规范问题。

代码检查

fecs-check

代码的检查，目前主要是以百度前端代码规范（JS/CSS/HTML） 的检查为首要目标，同时根据 EFE 的技术规划，为 Less 代码规范 的检查带来了 lesslint。

我跟你说，我最讨厌“简介”这种文章了，要不是语文是体育老师教的，早就换标题了！

Decorators是ECMAScript现在处于Stage 1的一个提案。当然ECMAScript会有很多新的特性，特地介绍这一个是因为它能够在实际的编程中提供很大的帮助，甚至于改变不少功能的设计。

先说说怎么回事

如果光从概念上来介绍的话，官方是这么说的：

Decorators make it possible to annotate and modify classes and properties at design time.

我翻译一下：

装饰器让你可以在设计时对类和类的属性进行注解和修改。

什么鬼，说人话！

所以我们还是用一段代码来看一下好了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function memoize(target, key, descriptor) {
    let cache = new Map();
    let oldMethod = descriptor.value;
    descriptor.value = function (...args) {
        let hash = args[0];
        if (cache.has(hash)) {
            return cache.get(hash);
        }
        let value = oldMethod.apply(this, args);
        cache.set(hash, value);
        return value;
    };
}

class Foo {
    @memoize;
    getFooById(id) {
        // ...
    }
}

别去试上面的代码，瞎写的，估计跑不起来就是了。这个代码的作用其实看函数的命名就能明白，我们要给Foo#getFooById方法加一个缓存，缓存使用第一个参数作为对应的键。

可以看出来，上面代码的重点在于：

ECMAScript6已经于近日进入了RC阶段，而早在其处于社区讨论时，我就开始一直在尝试使用ES6进行开发的方案。在Babel推出后，基于ES6的开发也有了具体可执行的解决方案，无论是Build还是Debug都能得到很好的支持。

而在有了充足的环境、工具之后，我们面临的是对ES6众多新特性的选择和分析，以便选取一个最佳的子集，让我们可以享受ES6带来的便利（减少代码量、提高可读性等）的同时，也可以顺利运行于当前以ES3-ES5为主的浏览器环境中。

经过分析后，本文试图对ES6各个特性得出是否适合应用的初步结论，并一一解释其使用场景。ES6的特性列表选自es6features。

• ★★★ 推荐使用
• ★★ 有考虑地使用
• ★ 慎重地使用
• ☆ 不使用

接下来我们以上特性挨个进行介绍。需要关注一点：如果你不想使用shim库（如Babel的browser-polyfill.js和generatorsRuntime.js）或者想使用尽可能少的helper（Babel的externalHelpers配置），那么需要按你的需求进一步缩减可使用的ES6特性，如Map、Set这些就不应该使用。