Google Polymer入门

好！ 他们说：“经验是智慧之母”，因此，我最近加入《 聚合物狂迷》 （有两个月的时间），希望您逐步了解聚合物。

因此，在不加讨论的情况下，让我们从Polymer的基本定义开始！

什么是聚合物？

Polymer是一个JavaScript库，用于使用Web组件创建Web应用程序。

mkk

现在，您可以将Web组件视为可在网页或Web应用程序中使用的可重用元素。 这意味着您还可以将其与其他JavaScript库一起使用。 聚合物就像一个“乐高积木”，可以用来建造任何东西，几乎任何东西。

为什么选择聚合物？

假设您想自己做一张学习桌。 您将执行以下操作：根据您的需求，将原木切成小块，构造桌面和支腿，将它们弄平并连接在一起。

相当长的过程，不是吗？

拿起零件组装桌子怎么样？ 超级简单。

这就是聚合物的工作方式。 您想要使用某些组件，将其导入并使用它，而无需知道其工作原理。 您想将其与Angular，React或Vue或其他JS库一起使用，只需将其导入并使用即可。

Web组件的4个主要功能

• HTML导入：可以更轻松地导入HTML文档。 类似于导入CSS文档。
• 自定义元素： 帮助开发人员创建自己的元素。
• HTML模板：它包含在加载页面时不呈现的内容，但可以在运行时使用JavaScript实例化。 简而言之，它包含HTML标记，这些标记在加载页面时不会呈现，但是可以稍后使用JavaScript呈现。
• Shadow DOM： Shadow DOM？ 它是什么？ 我刚刚听说过DOM。
  Shadow DOM在DOM中插入一个称为shadow root的新节点，并在DOM和shadow root之间创建边界，从而使根内部的元素（Web组件）保持模块化并与主DOM分开。 还没听懂吗 别担心。 我会在下面解释。

如何使用聚合物？

确保安装Node.js，npm，Git，Bower和Polymer CLI。 您可以按照Polymer网站上的设置指南进行操作。

现在，让我们看一些代码。

这是我们要制作的现场演示 。

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input.html">

link rel="import”是HTML导入，它将导入聚合物库和一个名为paper-input的自定义元素。

<dom-module id="basic-example">

• <dom-module>包装了自定义元素，其中包括自定义元素的样式，脚本和标记。 id属性用于将元素包括到主文档树中。
• <template>定义元素的结构和样式。
• 的styling的内<template>定义为造型元件。
• [[name]]是单向绑定。 它会显示“ name”属性的值。
• <paper-input>是一个自定义元素，基本上是一个文本字段。 {{name}}是双向绑定，这意味着如果我们在输入中键入内容，它将立即反映在“ name”属性中，并将“ name”的值更改为键入的任何值。

<script>
  class BasicExample extends Polymer.Element{
    static get is(){return 'basic-example';}
    static get properties(){
      return{
        name: {
          type: String,
          value: ""
        }
      }
    } 
  }
  customElements.define(BasicExample.is,BasicExample);
</script>

• 这是<script>标记内的ES6类语法。
• static get is(){return 'basic-example';}为元素指定名称，以便浏览器可以在标记中使用它时识别它。 此名称必须与元素的模板定义<dom-module id="basic-example">给出的id相匹配。
• customElements.define(BasicExample.is,BasicExample); 在这里，自定义元素API调用define方法来注册名为basic-example的元素，其类名称为BasicExample 。

现在，我们的自定义元素随时可以在任何地方使用。 您需要做的就是将该自定义元素导入您要在其中使用该元素的文件中，仅此而已。

例如，如果要在名为index.html的文件中使用此元素，则将其导入并按如下所示使用它：

<link rel="import" href="path-to-element/basic-example.html">
<basic-example></basic-example>

返回影子DOM

如果您还不了解Shadow DOM是什么，那完全没问题。 我花了很多时间来了解什么是Shadow DOM。 让我借助一个示例对此进行解释。

假设您使用一些不错的CSS制作了一个没有Shadow DOM的自定义元素。 还有其他一些开发人员希望在您的Web应用程序中使用您的元素。 如果他/她的应用程序的样式类与Web组件中的样式类匹配，则它将覆盖您元素中的样式。 那真的很糟糕，没人想要。 为什么地球上的任何开发人员都会导入Web组件，然后花时间改善其样式？ 这就是使用Shadow DOM的主要原因。

换句话说，它封装了自定义元素的样式，脚本和结构。 为了使事情更加清楚，我添加了以下图片。

这是Polymer网站的屏幕截图。 pw-shell是一些组件，其样式，结构和脚本编制全部位于影子根内部。

聚合物的下一步是什么？

上周在聚合物峰会上宣布了以下内容：

• 宣布推出Polymer 3.0。
• 使用NPM和纱线，这意味着不再需要凉亭。
• 使用ES6模块，这意味着不再有<link rel="import"> 。
• 一个简单的迁移工具，用于将代码从Polymer 2.0迁移到3.0。

到目前为止，新的YouTube是使用Polymer开发的最大的项目。

到目前为止，您至少应该对Polymer及其工作原理有所了解。

因此，请在此处尝试并构建您自己的自定义元素。

感谢您阅读本文。 如果喜欢，请点击拍手按钮。
在LinkedIn上与我联系。
在Twitter和Quora上关注我。

From: https://hackernoon.com/getting-started-with-google-polymer-6e57f5a05906