使用ES6箭头功能优化JavaScript模块模式

时间:2018-10-31 15:37:33

标签: javascript ecmascript-6 babeljs module-pattern revealing-module-pattern

Babel正在使用带有箭头功能的模块模式的代码。

如果我尝试处理以下文件:

const lib = (() => {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel给出一个SyntaxError

{ SyntaxError: /home/david/Sync/ebs/office/fake.js: Unexpected token, expected "," (9:1)

   7 |     mult
   8 |   };
>  9 | }());
     |  ^
  10 | 
    at Parser.raise (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:3939:15)
    at Parser.unexpected (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5248:16)
    at Parser.expect (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5236:28)
    at Parser.parseParenAndDistinguishExpression (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6454:14)
    at Parser.parseExprAtom (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6284:21)
    at Parser.parseExprSubscripts (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5924:21)
    at Parser.parseMaybeUnary (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5903:21)
    at Parser.parseExprOps (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5812:21)
    at Parser.parseMaybeConditional (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5784:21)
    at Parser.parseMaybeAssign (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5731:21)
  pos: 137,
  loc: Position { line: 9, column: 1 },
  code: 'BABEL_PARSE_ERROR' }

但是,如果我更改代码以使用较旧的样式函数,例如

const lib = (function () {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel似乎可以毫无问题地处理文件。

我在做什么错?我不知道的箭头功能代码有真正的语法问题吗?

2 个答案:

答案 0 :(得分:2)

由于箭头函数的性质以及如何解释它们,(例如:

const x = () => ({ objectPropValues });
const x = () => { functionBody };
const x = () => conciseFunctionBody;

我想第二个箭头功能在

const x = (() => {functionBody})();
const x = (() => {functionBody}());

不能,也不能。

可以通过仔细查看ECMA 6箭头功能规范来确认。

答案 1 :(得分:1)

尝试将您的父母移动到内部,

})();

const lib = (() => {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
})();
console.log(lib)

在ES6中,箭头功能基本上由以下三个组件组成:

() => {}

因此,为了立即调用它,应将其包装在括号中,然后再调用,如下所示:

const lib = (() => {
    //do something
})();