Meteor.js 中文网

Appearance

ECMAScript ​

此软件包可让你使用属于 ECMAScript 2015 规范 的一部分但尚未得到所有引擎或浏览器支持的新 JavaScript 语言功能。不支持的语法会自动转换为行为相同的标准 JavaScript。

¥This package lets you use new JavaScript language features that are part of the ECMAScript 2015 specification but are not yet supported by all engines or browsers. Unsupported syntax is automatically translated into standard JavaScript that behaves the same way.

2015 年 7 月 Meteor Devshop 中的 此视频 概述了该软件包的工作原理及其提供的内容。

¥This video from the July 2015 Meteor Devshop gives an overview of how the package works, and what it provides.

用法 ​

¥Usage

ecmascript 包注册了一个编译器插件，该插件将所有 .js 文件中的 ECMAScript 2015+ 转换为 ECMAScript 5（标准 JS）。默认情况下，此包已预先安装在所有新应用和包中。

¥The ecmascript package registers a compiler plugin that transpiles ECMAScript 2015+ to ECMAScript 5 (standard JS) in all .js files. By default, this package is pre-installed for all new apps and packages.

要将此包添加到现有应用，请从你的应用目录运行以下命令：

¥To add this package to an existing app, run the following command from your app directory:

bash
meteor add ecmascript

要将 ecmascript 包添加到现有包，请在你的 package.js 文件中的 Package.onUse 回调中包含语句 api.use('ecmascript');：

¥To add the ecmascript package to an existing package, include the statement api.use('ecmascript'); in the Package.onUse callback in your package.js file:

js
Package.onUse((api) => {
  api.use('ecmascript');
});

支持的 ES2015 功能 ​

¥Supported ES2015 Features

语法 ​

¥Syntax

ecmascript 包使用 Babel 将 ES2015 语法编译为 ES5 语法。许多但不是全部 ES2015 功能都可以由 Babel 模拟，并且 ecmascript 启用了 Babel 支持的大多数功能。

¥The ecmascript package uses Babel to compile ES2015 syntax to ES5 syntax. Many but not all ES2015 features can be simulated by Babel, and ecmascript enables most of the features supported by Babel.

以下是当前启用的 Babel 转换器的列表：

¥Here is a list of the Babel transformers that are currently enabled:

  • es3.propertyLiterals
    可以安全地使用保留关键字（如 catch）作为对象字面量中的未加引号的键。例如，{ catch: 123 } 被转换为 { "catch": 123 }。

    ¥es3.propertyLiterals
    Makes it safe to use reserved keywords like catch as unquoted keys in object literals. For example, { catch: 123 } is translated to { "catch": 123 }.

  • es3.memberExpressionLiterals
    可以安全地使用保留关键字作为属性名称。例如，object.catch 被转换为 object["catch"]。

    ¥es3.memberExpressionLiterals
    Makes it safe to use reserved keywords as property names. For example, object.catch is translated to object["catch"].

  • es6.arrowFunctions
    提供函数表达式的简写。例如，[1, 2, 3].map(x => x + 1) 计算为 [2, 3, 4]。如果 this 在箭头函数的主体中使用，它将自动绑定到封闭范围内的 this 的值。

    ¥es6.arrowFunctions
    Provides a shorthand for function expressions. For example, [1, 2, 3].map(x => x + 1) evaluates to [2, 3, 4]. If this is used in the body of the arrow function, it will be automatically bound to the value of this in the enclosing scope.

  • es6.literals
    增加对二进制和八进制数字字面量的支持。例如，0b111110111 === 503 和 0o767 === 503。

    ¥es6.literals
    Adds support for binary and octal numeric literals. For example, 0b111110111 === 503 and 0o767 === 503.

  • es6.templateLiterals
    启用以反引号而不是引号分隔的多行字符串，并进行变量插值：

    ¥es6.templateLiterals
    Enables multi-line strings delimited by backticks instead of quotation marks, with variable interpolation:

    js
    var name = 'Ben';
var message = `My name is:
${name}`;

  • es6.classes
    启用 class 语法：

    ¥es6.classes
    Enables class syntax:

    js
    class Base {
  constructor(a, b) {
    this.value = a * b;
  }
}

class Derived extends Base {
  constructor(a, b) {
    super(a + 1, b + 1);
  }
}

var d = new Derived(2, 3);
d.value; // 12

  • es6.constants
    允许定义不允许重新定义的块范围变量：

    ¥es6.constants
    Allows defining block-scoped variables that are not allowed to be redefined:

    js
    const GOLDEN_RATIO = (1 + Math.sqrt(5)) / 2;

// This reassignment will be forbidden by the compiler:
GOLDEN_RATIO = 'new value';

  • es6.blockScoping
    启用 let 和 const 关键字作为 var 的替代方案。主要区别在于使用 let 或 const 定义的变量仅在声明它们的块内可见，而不是在封闭函数中的任何位置可见。例如：

    ¥es6.blockScoping
    Enables the let and const keywords as alternatives to var. The key difference is that variables defined using let or const are visible only within the block where they are declared, rather than being visible anywhere in the enclosing function. For example:

    js
    function example(condition) {
  let x = 0;
  if (condition) {
    let x = 1;
    console.log(x);
  } else {
    console.log(x);
    x = 2;
  }
  return x;
}

example(true); // logs 1, returns 0
example(false); // logs 0, returns 2

  • es6.properties.shorthand
    当所需值由与属性键同名的变量保存时，允许省略对象字面量属性的值。例如，你可以只写 { x, y, z: "asdf" } 而不是 { x: x, y: y, z: "asdf" }。方法也可以不使用 : function 属性语法来编写：

    ¥es6.properties.shorthand
    Allows omitting the value of an object literal property when the desired value is held by a variable that has the same name as the property key. For example, instead of writing { x: x, y: y, z: "asdf" } you can just write { x, y, z: "asdf" }. Methods can also be written without the : function property syntax:

    js
    var obj = {
  oldWay: function (a, b) { ... },
  newWay(a, b) { ... }
};

  • es6.properties.computed
    允许具有动态计算键的对象字面量属性：

    ¥es6.properties.computed
    Allows object literal properties with dynamically computed keys:

    js
    var counter = 0;
function getKeyName() {
  return 'key' + counter++;
}

var obj = {
  [getKeyName()]: 'zero',
  [getKeyName()]: 'one',
};

obj.key0; // 'zero'
obj.key1; // 'one'

  • es6.parameters
    函数参数的默认表达式，只要参数为 undefined、...rest 参数就会进行求值，用于在不使用 arguments 对象的情况下捕获剩余参数：

    ¥es6.parameters
    Default expressions for function parameters, evaluated whenever the parameter is undefined, ...rest parameters for capturing remaining arguments without using the arguments object:

    js
    function add(a = 0, ...rest) {
  rest.forEach(n => a += n);
  return a;
}

add(); // 0
add(1, 2, 3); // 6

  • es6.spread
    允许将参数数组插入到函数调用、new 表达式或数组字面量的参数列表中，而无需使用 Function.prototype.apply：

    ¥es6.spread
    Allows an array of arguments to be interpolated into a list of arguments to a function call, new expression, or array literal, without using Function.prototype.apply:

    js
    add(1, ...[2, 3, 4], 5); // 15
new Node('name', ...children);
[1, ...[2, 3, 4], 5]; // [1, 2, 3, 4, 5]

  • es6.forOf
    提供一种简单的方法来迭代集合的元素：

    ¥es6.forOf
    Provides an easy way to iterate over the elements of a collection:

    js
    let sum = 0;
for (var x of [1, 2, 3]) {
  sum += x;
}
sum; // 6

  • es6.destructuring
    解构是一种在赋值或声明的左侧使用数组或对象模式代替通常的变量或参数的技术，这样右侧值的某些子属性将绑定到模式中出现的标识符。也许最简单的例子是在不使用临时变量的情况下交换两个变量：

    ¥es6.destructuring
    Destructuring is the technique of using an array or object pattern on the left-hand side of an assignment or declaration, in place of the usual variable or parameter, so that certain sub-properties of the value on the right-hand side will be bound to identifiers that appear within the pattern. Perhaps the simplest example is swapping two variables without using a temporary variable:

    js
    [a, b] = [b, a];

    从对象中提取特定属性：

    ¥Extracting a specific property from an object:

    js
    let { username: name } = user;
// is equivalent to
let name = user.username;

    函数可以使用对象解构模式来命名预期选项，而不是采用单个不透明的 options 参数：

    ¥Instead of taking a single opaque options parameter, a function can use an object destructuring pattern to name the expected options:

    js
    function run({ command, args, callback }) { ... }

run({
  command: 'git',
  args: ['status', '.'],
  callback(error, status) { ... },
  unused: 'whatever'
});

  • es7.objectRestSpread
    支持对象字面量声明和赋值中的 catch-all ...rest 属性：

    ¥es7.objectRestSpread
    Supports catch-all ...rest properties in object literal declarations and assignments:

    js
    let { x, y, ...rest } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
rest; // { a: 3, b: 4 }

    此外，还可以在对象字面量表达式中启用 ...spread 属性：

    ¥Also enables ...spread properties in object literal expressions:

    js
    let n = { x, y, ...rest };
n; // { x: 1, y: 2, a: 3, b: 4 }

  • es7.trailingFunctionCommas
    允许函数的最后一个参数后跟逗号，前提是该参数不是 ...rest 参数。

    ¥es7.trailingFunctionCommas
    Allows the final parameter of a function to be followed by a comma, provided that parameter is not a ...rest parameter.

  • flow
    允许使用 Flow 类型注释。这些注释只是从代码中剥离出来的，因此它们对代码的行为没有影响，但你可以在代码上运行 flow 工具来检查类型（如果需要）。

    ¥flow
    Permits the use of Flow type annotations. These annotations are simply stripped from the code, so they have no effect on the code's behavior, but you can run the flow tool over your code to check the types if desired.

Polyfills ​

ECMAScript 2015 标准库已发展到包含新的 API 和数据结构，其中一些可以使用当今在所有引擎和浏览器中运行的 JavaScript 来实现（"polyfilled"）。以下是三个新的构造函数，保证在安装 ecmascript 包时可用：

¥The ECMAScript 2015 standard library has grown to include new APIs and data structures, some of which can be implemented ("polyfilled") using JavaScript that runs in all engines and browsers today. Here are three new constructors that are guaranteed to be available when the ecmascript package is installed:

  • Promise
    Promise 允许其所有者等待可能尚不可用的值。有关 API 和动机的更多详细信息，请参阅 本教程。Meteor Promise 实现特别有用，因为它在回收的 Fiber 中运行所有回调函数，因此你可以使用任何 Meteor API，包括那些产生结果的 API（例如 HTTP.get、Meteor.call 或 MongoCollection），并且你永远不必调用 Meteor.bindEnvironment。

    ¥Promise
    A Promise allows its owner to wait for a value that might not be available yet. See this tutorial for more details about the API and motivation. The Meteor Promise implementation is especially useful because it runs all callback functions in recycled Fibers, so you can use any Meteor API, including those that yield (e.g. HTTP.get, Meteor.call, or MongoCollection), and you never have to call Meteor.bindEnvironment.

  • Map
    关联键值数据结构，其中键可以是任何 JavaScript 值（而不仅仅是字符串）。查找和插入需要恒定的时间。

    ¥Map
    An associative key-value data structure where the keys can be any JavaScript value (not just strings). Lookup and insertion take constant time.

  • Set
    任意类型的唯一 JavaScript 值的集合。查找和插入需要恒定的时间。

    ¥Set
    A collection of unique JavaScript values of any type. Lookup and insertion take constant time.

  • Symbol
    全局 Symbol 命名空间的实现，可实现许多其他 ES2015 功能，例如 for-of 循环和 Symbol.iterator 方法：[1,2,3][Symbol.iterator]()。

    ¥Symbol
    An implementation of the global Symbols namespace that enables a number of other ES2015 features, such as for-of loops and Symbol.iterator methods: [1,2,3][Symbol.iterator]().

  • 以下 Object 相关方法的 Polyfill：

    ¥Polyfills for the following Object-related methods:

    • Object.assign

    • Object.is

    • Object.setPrototypeOf

    • Object.prototype.toString（修复 @@toStringTag 支持）

      ¥Object.prototype.toString (fixes @@toStringTag support)

    完整参考 此处。

    ¥Complete reference here.

  • 以下 String 相关方法的 Polyfill：

    ¥Polyfills for the following String-related methods:

    • String.fromCodePoint

    • String.raw

    • String.prototype.includes

    • String.prototype.startsWith

    • String.prototype.endsWith

    • String.prototype.repeat

    • String.prototype.codePointAt

    • String.prototype.trim

    完整参考 此处。

    ¥Complete reference here.

  • 以下 Array 相关方法的 Polyfill：

    ¥Polyfills for the following Array-related methods:

    • Array.from

    • Array.of

    • Array.prototype.copyWithin

    • Array.prototype.fill

    • Array.prototype.find

    • Array.prototype.findIndex

    完整参考 此处。

    ¥Complete reference here.

  • 以下 Function 相关属性的 Polyfill：

    ¥Polyfills for the following Function-related properties:

    • Function.prototype.name（修复 IE9+）

      ¥Function.prototype.name (fixes IE9+)

    • Function.prototype[Symbol.hasInstance]（修复 IE9+）

      ¥Function.prototype[Symbol.hasInstance] (fixes IE9+)

    完整参考 此处。

    ¥Complete reference here.

Meteor.js 中文网 - 粤ICP备13048890号