polymer ajax_Google Polymer –如何改变网络应用的构建方式

最新推荐文章于 2024-07-29 18:00:00 发布

cune1359

最新推荐文章于 2024-07-29 18:00:00 发布

阅读量138

点赞数

文章标签： java python html css vue ViewUI

除了Google Photos之外，Google还从头开始重新构建Polymer ，以提高性能和效率。可以将Polymer视为Web的SDK（软件开发工具包），它使用称为Web Components的新标准使Web应用程序的开发变得如此之快。

Web组件允许我们为网站创建自定义元素和标签 。在这篇文章中，我们将研究Google Polymer中的自定义元素如何帮助开发Web应用程序。另外，我们还将看一些有关如何使用这些自定义元素的演示。

关于Web组件

了解Web组件如何工作的最好方法是查看诸如<audio>类的当前标准元素。当我们添加<audio>以及<audio>的URL来源时，Web浏览器将使用“播放”和“暂停”按钮，时间栏以及“音量”滑块将此元素呈现为音频播放器。有没有想过播放器控件的构建和样式？

UI控件播放器隐藏在下方，称为“影子根”，也称为“ 影子DOM” 。要查看Shadow DOM，请启动Chrome DevTools >单击齿轮图标>选择显示用户代理Shadow DOM选项。

在下面的屏幕快照中，您可以找到<div>和<input>元素的堆栈，它们可以秘密构建UI播放器控件。

今天，借助Web组件，我们也可以命名自己的元素。我们可以构建一个元素，例如<twitter>嵌入一个Twitter feed或（也许） <chart>嵌入一个图表。

此外，这些自定义元素还可以具有几个接受的自定义属性。关于<twitter>元素，您设置了一个名为username的属性，该属性将用于指定Twitter用户名。

<twitter username="hongkiat"></twitter>

聚合物中的自定义元素

Polymer附带了一堆元素，这些元素几乎（几乎）满足了每个Web应用程序的需求。 Google将这些元素分为几类：铁元素，纸元素，Google Web组件，金元素，氖元素，白金元素和分子。

1.铁元素

铁元素是基本元素的集合。这些基本元素是我们通常用来构建网页的内容，例如输入，表单和图像。不同之处在于，聚合物为这些元素增加了一些额外的功能。

该组中的所有元素都是iron-前缀的，例如<iron-image> ，用于显示图像。 <iron-image>元素具有一些额外的属性，我们不能在常规的<img>元素中应用这些属性。例如，我们可以添加preload ， fade和placeholder属性：

<iron-image preload fade placeholder="http://lorempixel.com/600/400" src="https://www.hongkiat.com/img/awesome-image.jpg"></iron-image>

上面的示例将首先显示图像占位符，然后在完全加载后逐渐淡入src的实际图像，从而执行平滑的图像加载效果 。

纸元素是一组材料设计元素。 Material Design是Google的设计语言，旨在使Web和Android应用程序在整个Google平台上的用户界面和体验在视觉上更加一致。特有的材质设计的一些元素是造纸和浮动的操作按钮（FAB）。

纸张是Google 对内容基础的隐喻。要使用Polymer添加纸张，我们使用<paper-material>元素。该元素具有2个属性：

elevation纸张以抬高纸张，因此添加阴影以加强抬高
animated将在“纸张高度”更改时应用动画。

浮动动作按钮（FAB）是带有图标的圆形按钮，漂浮在屏幕上，通常带有突出的颜色。 Google建议此按钮具有常用功能。这是一个例子：

以下代码段添加了带有图像和FAB的Paper Material。

<paper-material elevation="1" class="paper">
    <iron-image sizing="cover" src="img/berries.jpg" class="image"></iron-image>
    <paper-fab icon="favorite" title="heart" tabindex="0" class="button"></paper-fab>
</paper-material>

我们将得到以下结果：

我们的照片上方有一个“心”按钮。单击它就像照片一样，该按钮也发出涟漪效果以确认单击。

查看论文演示

3. Google Web组件

Google Web Components是处理Google API和服务（例如Google Maps，Youtube以及Google Feed）的特殊元素。该组中的元素使与Google服务的交互仅几行之遥 。

以下是使用<google-map>元素显示Google Map的示例。

<google-map latitude="37.422" longitude="-122.084058" zoom="19">
	<google-map-marker latitude="37.422" longitude="-122.084058" draggable="true">This is Googleplex</google-map-marker>
</google-map>

如上所示， <google-map>元素采用latitude和longitude来指定地图上的位置。我们还可以嵌套<google-map-marker>以显示该位置的地图标记以及单击该标记时将显示的文本。

观看地图演示

要显示YouTube视频吗？您可以使用<google-youtube>元素。

<google-youtube video-id="VgmyVHYV1mE" height="360px" width="640px"></google-youtube>

同样，我们通过属性来自定义输出。

观看YouTube演示

4.金元素

黄金元素是专门为电子商务应用程序设计的元素。在这里，您将找到显示信用卡，电子邮件，电话和ZIP输入的元素，这些元素均已进行了格式验证，以确保正确的数据输入和安全性。这是添加Visa信用卡输入的一个示例。

<gold-cc-cvc-input card-type="visa"></gold-cc-cvc-input>

5.其他要素

其余元素包括用于动画和特殊效果的Neon元素，用于脱机和推送通知的Platinum元素，最后是分子，用于第三方库的包装器。

集成聚合物

是否想在您的Web开发中使用Polymer？这是将其安装并集成到您的网页中的方法。由于大多数Polymer元素相互依赖，因此安装Polymer的最佳方法是通过Bower。

Bower是一个项目依赖项管理器，它使安装运行项目所需的脚本或样式更加容易。查阅我们先前的文章，了解如何使用Bower轻松安装，更新和删除Web库。

要集成Polymer，请启动Terminal，然后假设已创建一个，然后导航到您的项目目录。然后运行bower init命令将bower.json文件启动到您的项目中，该文件将用于记录项目依赖项。打开bower.json并添加以下行。

"dependencies": {
	"polymer": "Polymer/polymer#^1.0.0",
	"google-web-components": "GoogleWebComponents/google-web-components#^1.0.0",
	"iron-elements": "PolymerElements/iron-elements#^1.0.0",
	"paper-elements": "PolymerElements/paper-elements#^1.0.0",
	"gold-elements": "PolymerElements/gold-elements#^1.0.0"
}

此设置假定我们将使用每个组中的所有元素。您可以从依赖项列表中删除不需要的内容。设置依赖项后，运行bower install命令将依赖项安装在列表上。

此过程可能需要一段时间，因为它涉及从存储库中获取大量文件。完成后，您应该将它们保存在bower_components文件夹中。

打开要在使用聚合物组分HTML文件，在文件头，链接，对于那些不支持WebComponents但浏览器的填充工具 的WebComponents.js，并使用导入组件文件 HTML导入。

这是一个例子：

<head>
	<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
	<link rel="import" href="bower_components/iron-image/iron-image.html">
	<link rel="import" href="bower_components/paper-fab/paper-fab.html">
	<link rel="import" href="bower_components/google-map/google-map.html">
</head>

通过此设置，我们可以使用<iron-image> ， <paper-fab>和<google-youtube>元素。

展示柜

以下是一些已经在使用Google Polymer的网络应用。

Google在Google IO 2015网页上使用了Google Polymer； Google Fi ，这是面向运营商和供应商的Google无线服务；和Google音乐。

CustomElements是一个中心，您可以在其中找到使用Web Components构建的自定义元素。它利用Paper元素来包含和构建列表。它还提供了通过Bower和NPM安装这些元素的便捷途径。

一个用于代码编辑的Chrome应用程序，效果惊人。此应用程序在用户界面中使用FAB按钮，“纸张”菜单和“纸张”对话框元素。

使用拖放界面使用Polymer元素构建Web应用程序的工具。

完全使用Polymer元素构建的证券交易所报告和预测。

Gmail的电子邮件客户端应用程序。它看起来不错且流畅，尽管令人遗憾的是，它并没有完全发挥作用。

最后的想法

Polymer的范围很广，您可能需要一段时间才能习惯所有自定义元素及其API。尽管如此，Web Components和Polymer肯定会影响我们构建Web应用程序的方式。通过阅读有关Web组件的更多信息来保持领先地位-可以在下面找到参考。

有用的参考

翻译自: https://www.hongkiat.com/blog/google-polymer/

cune1359

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
polymer ajax_Google Polymer –如何改变网络应用的构建方式

除了Google Photos之外，Google还从头开始重建Polymer ，以提高性能和效率。将Polymer视为Web的SDK（软件开发套件），可以使用称为Web Components的新标准使Web应用程序开发更快。 Web组件使我们可以为网站创建自定义元素和标签。在这篇文章中，我们将研究Google Polymer中的自定义元素如何帮助开发Web应用程序。另外，我们还将...
复制链接

扫一扫