• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

通过创建自定义标签扩展HTML

ngkoma • 2年前 (2022-06-06) • JavaScript

在本教程中，我将向您展示使用自定义标签扩展 html 语言是多么容易。自定义标签可用于实现各种行为，因此它们是一种非常方便的方式来编写更少的代码并使您的 HTML 文档更简单。

什么是自定义 HTML 标签？

例如，对于 HTML，您可以使用 <b>标签来显示粗体文本。如果您需要一个列表，那么您可以  为每个列表项使用该<ul>标签及其子标签 。<li>标签由浏览器解释，并与css一起确定网页内容的显示方式以及部分内容的行为方式。

有时，仅使用一个 HTML 标记不足以满足 Web 应用程序所需的功能。通常这是通过将多个 HTML 标记与javascript和 CSS 一起使用来解决的，但这种解决方案并不那么优雅。 

一个更优雅的解决方案是使用自定义标签——一个包含在<> 其中的标识符，由浏览器解释以呈现我们想要的功能。与常规 HTML 标签一样，我们应该能够在一个页面中多次使用自定义标签，并且我们应该能够拥有标签属性和子标签来帮助自定义标签的功能。那么，让我们看一个例子！

示例 #1：创建 Gravatar 自定义 HTML 标签

让我们创建一个自定义标签，用于显示某个电子邮件地址的 Gravatar 图片。我们将调用此标记 <codingdude-gravatar>，并将电子邮件地址作为名为 的属性传递 email。

您可以将自定义标签命名为任何您想要的名称，但需要注意的一点是，在此示例中，自定义标签名称以 codingdude-. 最佳做法是为您的自定义标签使用这样的前缀，以避免与其他自定义标签发生名称冲突。此外，不使用 HTML 已经定义的标签名称显然是个好主意。

为了实现和测试我们的标签，我们需要创建一些东西：

  • 一个文件夹来保存项目文件；让我们称这个文件夹 gravatar-custom-tag。

  • index.html 文件夹内的 一个 HTML 文件 gravatar-custom-tag 。该文件将包含 HTML 代码。

  • codingdude-gravatar.js 文件夹内 有一个 JS 文件 gravatar-custom-tag 。该文件将包含实现自定义标记的 JavaScript 代码。

让我们编辑 index.html文件并使其内容如下所示：

<html>
    <head>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: 
    <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
</body>
</html>

如果我们 index.html现在在浏览器中加载，结果不会那么令人印象深刻，因为我们还没有为我们的自定义标签实现代码：

通过创建自定义标签扩展HTML 第1张
需要注意的一件事是浏览器非常宽容，因此您可以在文档中包含未知标签，浏览器将忽略它们。要让我们的自定义标签实际显示我的电子邮件的 Gravatar 图片，我们必须首先了解 Gravatar 的工作原理。

Gravatar 通过将电子邮件地址转换为用户选择的 PNG 图像的 URL 来工作。通过计算电子邮件地址的 MD5 哈希值进行翻译。Gravatar 图片 URL 如下所示：  https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. 所以首先我们需要一个函数来计算字符串的 MD5 哈希值。为此，我们将使用一个开源库，我们将index.html像这样将其添加到文件中：

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

现在让我们继续实现自定义标签。我们将需要实现首先在文档中标识我们的自定义标签的代码，然后我们需要实现我们的自定义标签的功能。这将全部进入我们的 codingdude-gravatar.js文件，看起来像这样：

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function codingdudeGravatar(element){
		//code for rendering the element goes here
		if (element.attributes.email){
			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "<img src='"+gravatar+"'>";
		}
}	

customTag("codingdude-gravatar",codingdudeGravatar);

查看代码，我们看到 按名称（ 参数）customTag()查找自定义标记的出现并执行与该自定义标记关联的功能（通过参数）的函数。tagNamefn

某些浏览器document.createElement(tagName)（尤其是 IE）需要调用来通知浏览器我们将使用带有 name 的自定义标签 tagName，否则该标签可能不起作用。

fn参数是实现自定义标签应该做什么的函数。 在我们的例子中， fn是codingdudeGravatar()。此函数将自定义标记元素的引用作为参数。如果自定义标签有一个被调用的属性， email那么它将将该值 md5()从我们的开源库传递给函数。然后将结果用于构成 Gravatar 图像的 URL，该 URL 通过 <img>我们自定义标记元素中的元素添加。

脚本的最后一行customTag()使用自定义标签的名称及其关联的实现函数调用该函数。自定义标签功能可重复用于任何类型的自定义标签；你只需要实现你需要的功能。

现在，如果我们 index.html在浏览器中加载我们的文件，我们将看到我的电子邮件的 Gravatar：

通过创建自定义标签扩展HTML 第2张

示例 #2：用于绘制饼图的高级自定义 HTML标记

在我们之前的示例中，我们看到了一个非常简单的自定义 HTML 标签实现。您可以使用相同的方法来实现您想要的任何自定义标签。

让我们看看如何实现更高级的自定义标签，我们可以使用它来绘制饼图。让我们创建此自定义标签所需的文件：

  • 创建一个文件夹并命名它 piechart-custom-tag。这将是我们的项目文件夹。

  • 在 piechart-custom-tag文件夹中，创建一个 HTML 文件并将其命名为 index.html. 该文件将包含 HTML 代码。

  • 还要创建一个 JavaScript 文件 codingdude-piechart.js，其中将包含我们自定义标签的实现。

自定义标签经常被用作各种功能的包装器。在我们的例子中，我们将使用 <codingdude-piechart>标签作为绘制饼图的包装器。如果您错过了我关于如何使用 JavaScript 和 html5 canvas 绘制图表的教程，您可能想快速浏览一下。我们将使用该教程中的代码并将其功能包装在我们的自定义标签中。

所以编辑 codingdude-piechart.js文件并添加教程中的以下函数：

  • drawLine()

  • drawArc()

  • drawPieSlice()

  • Piechart()

现在让我们编辑文件 index.html并放置用于绘制饼图的自定义标签，如下所示：

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

width这里的目的是使用属性和 来设置饼图的宽度和高度 height。该 colors属性设置用于饼图切片的颜色。

如前所述，这个自定义标签有点复杂，因为我们希望为这个自定义标签使用子标签。我们想在 <codingdude-data>这里使用子标签来设置图表的数据。现在让我们看看如何实现这个自定义标签的代码。

编辑文件 codingdude-piechart.js ，在饼图教程中的函数之后，放置以下代码：

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and html5 canvas//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
    
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
    
    //load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.queryselectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentnode.removeChild(chartDataElements[i]);
    }
  
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

该 customTag()功能与示例 #1 中使用的功能相同。自定义标签的实现<codingdude-piechart>包含在 PiechartTag() 函数中。该函数处理以下几个方面：

  • 它创建将 <canvas> 在其中绘制图表的元素，并将其添加到自定义标签中。画布的宽度和高度取自自定义标签的属性。

  • 它查找 colors 元素的属性并将其转换为用于饼图切片的颜色数组。

  • <codingdude-data> 它在传递给饼图的数据结构中一一加载 元素。因为元素有文本内容，浏览器会渲染它们并显示文本内容。由于我们不希望这样，我们可以在抓取数据后删除元素。

  • 最后，我们调用 带有选项require d 的Piechart() 构造函数，然后调用该  函数来绘制饼图。draw()

如果您加载 index.html，您可以看到自定义标签呈现为饼图，应该如下所示：

通过创建自定义标签扩展HTML 第3张

就是这样，一个漂亮的饼图。更改 <codingdude-data>属性将相应地更改饼图。

通过创建自定义标签扩展HTML 第4张
该库包含的自定义标签不仅适用于饼图，还适用于折线图、条形图和其他类型的图表。

最后的想法

在本教程中，我们看到了如何为两种不同功能创建自定义 HTML 标记的两个示例。使用该 customTag()功能，您可以轻松开发自己的自定义标签。


文章目录
  • 什么是自定义 HTML 标签？
  • 示例 #1：创建 Gravatar 自定义 HTML 标签
  • 示例 #2：用于绘制饼图的高级自定义 HTML标记
  • 最后的想法

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：通过创建自定义标签扩展HTML
    文章地址：https://www.weixiaolive.com/en/index.php/post/294.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云