Liferay7开发文档_1.3.2METAL.JS

METAL.JS

Metal.js是一个轻量级，易于使用的JavaScript框架，通过它与模板语言的集成，您可以轻松创建UI组件。

图1：感谢Metal.js，您可以轻松创建UI。

Metal.js由您构建，为渲染提供了灵活性。如果您愿意，可以使用模板语言编写渲染逻辑或将渲染逻辑和业务逻辑保存在同一个文件中。

默认情况下，Metal.js提供了Google封闭模板和Facebook JSX模板的集成点。虽然渲染层可以完全自定义，所以如果需要，您可以添加更多渲染选项。

下面是一个为Metal.js编写的闭包（Soy）模板的例子：

{template .render}
// ...
<button onClick="{$close}" type="button" class="close">
// ...
{/template}

Metal.js有两个主要类：State，并且Component从中延伸State。该Component级增加了额外的渲染功能，为您的组件。如果你的组件不需要渲染，你可以使用State。

下图说明了Metal.js的体系结构：

图2：

Metal.js充分利用了ECMAScript 6（AKA ECMAScript 2015）语言，因此您可以使用该语言提供的最新功能。以下列出了您使用ES6获得的一些重要功能：

• 类的语法像其他面向对象的语言。类支持基于原型的继承，超级调用，实例和静态方法以及构造函数。
• 箭头方法语法。 var odds = numbers.map(v => v + 1);
• 组件定义模块的语言级支持。对来自流行的JavaScript模块加载器（如AMD）的模式进行编码（如下所示）：

  export function sum(x, y) {
    return x + y;
  }
  export var pi = 3.141593;
  

这些只是您可以在Metal.js组件中使用的少数ES6功能。

相关话题

Creating a Soy Portlet

JavaScript Module Loaders