chemdraw 聚合物_用聚合物构建图库组件

最新推荐文章于 2022-07-06 18:01:58 发布

dingshi7798

最新推荐文章于 2022-07-06 18:01:58 发布

阅读量462

点赞数

文章标签： vue html python css js ViewUI

原文链接：https://www.sitepoint.com/building-a-image-gallery-component-with-polymer/

版权

chemdraw 聚合物

Web组件正在成为Web应用程序开发的未来趋势。它们使我们能够将HTML标记，脚本和样式分组为可重用的组件。这些组件是浏览器的一部分，因此不需要外部JavaScript库（如jQuery）即可提供其功能。据维基百科报道，

Web组件是Google工程师目前作为W3C规范制定的一组标准，允许在Web文档和Web应用程序中创建可重用的小部件或组件。它们的目的是将基于组件的软件工程引入到万维网。组件模型允许单个HTML元素的封装和互操作性。

简而言之，Web组件解决了Web页面中元素的复杂性，并提供了更简单易懂的元素结构。 HTML已经提供了内置的标记集，例如标题，段落，列表等。但是，在某些情况下，现有的标记不足以为大型Web应用程序提供正确的支持，而Web组件正是在此提供帮助。一些库，最著名的是Polymer ，正在使Web组件可在Polyfill Web Components的不支持浏览器中使用。

在本教程中，我们将学习如何使用Polymer版本1.0创建图像库组件。本文提供的所有代码都可以在GitHub上找到。

高分子概论

图像画廊通常用于网站的开发。通常，开发人员倾向于使用现有的图库库，并且他们通常不得不面对由这些库生成的元素结构的复杂性的无聊问题。以下代码预览了非常基本的图库的结构。

<div id="gallery-panel" class="gallery-panel">
    <div class="slides">
        <div id="links" name="links">
            <img src="images/thumbnails/img01.jpg" alt="Title 1">
            <img src="images/thumbnails/img02.jpg" alt="Title 2">
            <img src="images/thumbnails/img03.jpg" alt="Title 3">
            <img src="images/thumbnails/img04.jpg" alt="Title 4">
            <img src="images/thumbnails/img05.jpg" alt="Title 5">
        </div>
    </div>
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> <a class="close"><button type="button" class="close" aria-hidden="true"  >X</button></a>

                     <h4 class="modal-title"></h4>

                </div>
                <div class="modal-body next">
                    <img class='modal-img' />
                </div>
                <div class="modal-footer">
                    <button id="previous" type="button" class="btn btn-default pull-left prev">Previous</button>
                    <button id="next" type="button" class="btn btn-default next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

即使这是显示基本图像库结构的代码段，也很明显它并不像它可能的那么简单。我们可能必须为网页中的每个画廊重复相同的代码集，因此网页变得非常大且难以管理。

这是Polymer通过使用Web组件提供解决方案的位置和方式。 Polymer是一个用于构建自定义Web组件的库。有几个库可用于创建Web组件，但是浏览器兼容性是大多数库尚未解决的问题。 Polymer通过提供能够在不兼容的浏览器中管理Web组件的polyfill提供最佳的解决方案。您可以在此处找到有关Polymer及其用法的更多信息。

当使用Polymer将Web构建为图库时，我们的代码应如下所示。

<simple-gallery>
    <img src="images/thumbnails/img01.jpg" alt="Title 1">
    <img src="images/thumbnails/img02.jpg" alt="Title 2">
    <img src="images/thumbnails/img03.jpg" alt="Title 3">
    <img src="images/thumbnails/img04.jpg" alt="Title 4">
    <img src="images/thumbnails/img05.jpg" alt="Title 5">
</simple-gallery>

如您所见，我们的代码变得更加简单，并且只包含基本标记。所有其他复杂的编码都对用户隐藏，使其具有高度可重用性。在这一点上，让我们开始使用Polymer构建Gallery组件。

如何安装聚合物

可以使用Bower运行以下命令来安装Polymer及其所有依赖项：

bower install --save Polymer/polymer#^1.1.0

这将在名为bower_components的文件夹中安装Polymer库和Web组件bower_components 。

规划图库组件

在向前迈进之前，我们必须确定基本图像库所需的功能。我们计划为图库创建一个Web组件，并且需要为图库组件创建一个单独的文件。在下面，您可以找到正确构建画廊所必须考虑的要点列表：

HTML标记以显示画廊图像；
HTML标记，用于带有大图像的模式弹出窗口；
Gallery组件CSS样式；
下一个，上一个和关闭事件的按钮；
使用JavaScript处理图库的打开，关闭和遍历。

与普通网页不同，所有这些内容都在单个组件文件中定义。因此，所有库代码都独立于其他组件，并且可以在多个地方重复使用。也就是说，我们可以开始构建主要的网页和图库组件。

用聚合物定义图库元素

首先，我们必须创建网站的主页以包含Web组件。我们可以在项目根文件夹中创建一个名为index.html的页面。然后，我们需要包含Polymer的必要文件和图库HTML标记。以下代码段显示了如何进行：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Polymer</title>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="simple-gallery.html">
    </head>
    <body>
        <simple-gallery>
            <img data-original="images/img01.jpg" data-index='s1' src="images/thumbnails/img01.jpg" alt="Title 1">
            <img data-original="images/img02.jpg" data-index='s2' src="images/thumbnails/img02.jpg" alt="Title 2">
            <img data-original="images/img03.jpg" data-index='s3' src="images/thumbnails/img03.jpg" alt="Title 3">
        </simple-gallery>
    </body>
</html>

首先，我们需要导入polymer.html从文件bower_components/polymer文件夹中使用的link元素。然后，我们需要从bower_components/webcomponentsjs文件夹中添加一个名为webcomponents.js的文件。这是负责在不兼容的浏览器中处理自定义元素的文件。如果您熟悉Polymer 0.5，则可能将此文件称为platform.js 。它已在最新的1.0版本中被替换，现在名为webcomponents.js的文件处理相同的功能。最后，我们需要使用link元素导入自定义图库组件。在我们的示例中，我们将自定义组件命名为simple-gallery 。

现在，我们可以开始使用一些HTML标记和Web组件定义布局结构。我们添加了一个名为simple-gallery的自定义组件，其所有图库图像都位于开始和结束标记内。您可能会注意到，我们使用了很少的数据属性data-original和data-index 。这些属性用于简化处理原始图像的URL和库中图像的索引的过程。当然，即使没有这些数据，也可以通过操作DOM创建图库。

创建图库组件

我们已经将必要的文件导入到我们的主页中，现在可以创建图库组件了。第一步是在项目文件夹中为Gallery组件创建一个名为simple-gallery.html的新文件。我们可以添加以下代码来定义图库组件的结构：

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="simple-gallery" >
   <style>
      /* Styles for the Gallery Component */    
   </style>
   
   <script>
      HTMLImports.whenReady(function () {
          (function () {
              var current_index = 0;
              var image_length = 0;

              Polymer({
                  is: "simple-gallery",
                  ready: function () {},
                  load_popup: function (e, detail, sender) {},
                  next: function () {},
                  prev: function () {},
                  close: function () {},
              });
          })();

      });
   </script>
     
   <template></template>
 </dom-module>

首先，我们必须像往常一样包括polymer.html文件。然后，我们开始定义图库组件。聚合物1.0使用dom-module元素定义新组件。组件名称应用作dom-module元素的id属性。

我们使用style元素来定义组件所需的所有样式。甚至这一版本也已经从0.5版更改了，在0.5版中我们在template元素中使用了style 。在1.0版中，它现在作为独立标签放置在template元素之外。 Gallery组件HTML标记位于template元素内。最后，我们可以在HTMLImports.whenReady回调函数中初始化Polymer元素。此功能可确保在执行代码之前加载所有导入的文档。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

我们必须使用带组件名称的is属性（ simple-gallery ）来注册Polymer组件。此过程与使用版本0.5的过程不同，在该版本中，我们具有以下语法：

Polymer('simple-gallery', {});

我们必须为自定义组件定义必要的功能。我们有五个功能： ready ， load_popup_ ， prev ， next和close 。让我们一一识别它们的功能：

ready ：这是一个Polymer函数，一旦Polymer对象准备好就执行。我们使用此函数来初始化组件中的所有功能。
load_popup ：此功能用于在模式弹出窗口中加载原始图像。
prev ：此功能用于向后浏览图库图像
next ：此功能用于遍历图库图像
close ：此功能用于关闭模式弹出窗口

在下一节中，我们可以根据在本节中创建的结构，开始实现Gallery组件。

创建图库模板

模板是Web组件中最重要的部分。在本节中，我们将看到显示给最终用户的标记。最终用户看不到template的内容，因为用户将只在源代码中看到simple-gallery标签，而其他内部元素仅在特殊的浏览器工具中可见。

此时，我们必须实现HTML以显示图像，并实现此template标签内的模式弹出窗口HTML。让我们看一下我们的Gallery组件模板的代码：

<div id="gallery-panel" class="gallery-panel">
    <!-- The container for the modal slides -->
    <div class="slides">
        <div id="links" name="links"></div>
    </div>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> <a class="close"><button type="button" class="close" aria-hidden="true" on-click="close" >X</button></a>

                     <h4 class="modal-title"></h4>

                </div>
                <div class="modal-body next">
                    <img class='modal-img' />
                </div>
                <div class="modal-footer">
                    <button id="previous" type="button" class="btn btn-default pull-left prev" on-click="prev">Previous</button>
                    <button id="next" type="button" class="btn btn-default next" on-click="next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

组件模板包含两个部分。第一个是由具有class slides的div元素定义的。这个容器将填充我们从简单画廊组件提供的图像。默认情况下，该模板部分对用户可见。第二部分从div开始，其class="modal fade" 。这将用于模式弹出窗口，因此默认情况下对用户隐藏。我们还有上一个，下一个和关闭聚合物的必要按钮，可on-click聚合物调用。 Polymer使用on-event语法来定义元素on-event 。

既然我们已经为模板准备了所有必需的标记，我们的下一个任务将是在style标签中设置元素的style 。如果需要，您还可以将外部样式表导入组件。我们不会在这里包含所有样式。您可以在源代码文件夹中找到我们组件的所有样式。以下代码包含我们组件的一些示例样式。

我们使用了普通CSS类和选择器。因此，这些选择器将成为gallery元素的后代选择器。例如， .modal类将被编写为.modal.simple-gallery 。您可以使用Polymer :host定位特定的组成元素及其祖先。您可以在此处找到有关如何设置组件样式的更多信息。

实现图库功能

在上一节中，我们为图库组件定义了五个功能。让我们开始一个一个地实现这些功能。

准备功能

我们使用ready函数获取在simple-gallery元素内定义的图像，并将其添加到模板内的#links容器中。以下代码包含第一个功能的实现。

ready: function () {
    var images = Polymer.dom(this).querySelectorAll('img');
    var container = this.$.links;

    for (var img in images) {
        images[img].addEventListener('click', this.load_popup);
        container.appendChild(images[img]);
    }
}

我们通过使用Polymer.dom(this)对象上的querySelectorAll函数选择组件内的所有图像。然后，我们遍历每个元素并将其添加到#links容器中，同时定义一个自定义click事件以调用load_popup函数。

load_popup函数

当从图库中单击图像时，此功能用于打开模式弹出窗口并显示原始图像。以下代码显示了如何实现它：

load_popup: function (e, detail, sender) {
    e.preventDefault();
    var links = document.getElementById('links');
    image_length = links.getElementsByTagName('img').length;

    var image_url = e.target.getAttribute('data-original');
    var modalbody = document.getElementsByClassName("modal-body")[0];
    var modal_img = modalbody.getElementsByTagName('img')[0];
    modal_img.setAttribute("src", image_url);
    var modal = document.getElementsByClassName("modal")[0];
    modal.style.display = 'block';

    current_index = parseInt(e.target.getAttribute('data-index').replace("s", ""));
    return false;
}

我们可以使用e.target获得点击的图像。然后，我们使用data-original属性获取原始图像URL，并使用一些DOM操作将图像添加到模式窗口中，并为用户打开模式窗口。我们还可以使用data-index属性存储所选图像data-index 。通常，我们倾向于将jQuery之类的库用于此类DOM操作。但是，在此示例中，我们使用了普通JavaScript函数，在下一节中，我将解释避免使用jQuery的原因。

下一个功能

此功能用于在弹出窗口中浏览图库图像。打开弹出窗口后，我们可以使用“下一个”和“上一个”按钮遍历图库，而不用单击图库中的每个缩略图。让我们看看next函数的实现。

next: function () {
    current_index = current_index + 1;
    if (current_index == (image_length + 1)) {
        current_index = 1;
    }
    var current_image = document.querySelectorAll("[data-index='s" + current_index + "']");
    image_url = current_image[0].getAttribute('data-original');
    var modalbody = document.getElementsByClassName("modal-body")[0];
    var modal_img = modalbody.getElementsByTagName('img')[0];
    modal_img.setAttribute("src", image_url);
}

我们使用从load_poup函数生成的当前索引来获取图库中的下一张图像。该图像由data-original属性标识，并替换为现有的模式窗口图像。此过程继续进行，一旦到达末尾，索引将从初始开始设置为1。 prev函数的实现也与此类似，因此此处将不包括在内。您可以在源代码文件夹中找到它。

在最后一个代码片段中，我们已经完成了Polymer的基本图像库组件。您可以使用源代码文件查看其工作方式。它们在这里可用。

使用现有的图库插件

图像库是大多数网站中的常见组件。因此，您可以使用大量纯JavaScript和jQuery库来创建图像库。您可能想知道为什么我们应该创建一个图片库，而不是将jQuery图片库转换为Web组件。这将是更容易和更好的选择。但是，问题是许多jQuery插件无法与Polymer一起用作Web组件。这些插件通常会产生冲突，因此我们必须从头开始构建它们。

确定不建议在Polymer Web组件内使用jQuery插件或jQuery代码的原因很重要。 DOM元素有两种类型，分别称为“本地DOM”和“阴影DOM”：

本地DOM ：这些元素对用户可见。在这种情况下，图库组件内的所有图像都是本地DOM的一部分；
Shadow DOM ：这些元素对用户不可见，并且由Web组件生成。在这种情况下，图像容器和弹出窗口是阴影DOM。

大多数jQuery插件都在Local DOM上运行，并且期望元素在Local DOM中。但是从Web组件生成的元素放置在Shadow DOM中，因此jQuery插件无法识别这些元素。因此，不建议在Web组件内使用jQuery插件或jQuery代码。我建议您使用普通JavaScript函数来代替jQuery功能。考虑到可用的jQuery插件的数量，这似乎是一个限制，但是Web组件的构建速度很快，很快我们将看到它们将替换大多数jQuery插件。

结论

我们期望Web组件由于其强大的创建和管理不必要复杂性的网页的方法而成为应用程序开发的未来。但是，它们的实施仍处于早期阶段，尚未成为严格的标准。即使诸如Polymer之类的库可以在不兼容的浏览器中使用这些组件，您仍可能会发现问题，尤其是在移动浏览器中。

由您和您的具体情况决定是否在实际应用程序中使用它们。我个人希望Web组件能很快被广泛使用。

翻译自: https://www.sitepoint.com/building-a-image-gallery-component-with-polymer/

chemdraw 聚合物

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chemdraw 聚合物_用聚合物构建图库组件

chemdraw 聚合物 Web组件正在成为Web应用程序开发的未来趋势。它们使我们能够将HTML标记，脚本和样式分组为可重用的组件。这些组件是浏览器的一部分，因此不需要外部JavaScript库（如jQuery）即可提供其功能。据维基百科报道， Web组件是Google工程师目前作为W3C规范制定的一组标准，允许在Web文档和Web应用程序中创建可重用的小部件或组件。它们的目的是将基...
复制链接

扫一扫