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

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

什么是自定义HTML标签?

使用HTML时,例如,使用标记显示粗体文本。 如果需要列表,则对每个列表项使用

    标记及其子标记
  • 。 标签由浏览器解释,并与CSS一起确定网页内容的显示方式以及部分内容的行为。

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

    更为优雅的解决方案是使用自定义标签-用<>括起来的标识符,浏览器将其解释为呈现我们预期的功能。 与常规HTML标签一样,我们应该能够在页面中多次使用自定义标签,并且还应该能够具有标签属性和子标签来辅助自定义标签的功能。 所以,让我们看一个例子!

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

    让我们创建一个自定义标签,该标签将显示某个电子邮件地址的Gravatar图片。 我们将此标签称为 ,然后将电子邮件地址作为名为email的属性传递。

    您可以随意命名自定义标签,但要注意的一件事是,在此示例中,自定义标签名称以codingdude- 。 最佳做法是为您的自定义标签使用这样的前缀,以避免名称与其他自定义标签冲突。 同样,不使用HTML已经定义的标签名称显然也是一个好主意。

    为了实现和测试我们的标记,我们将需要创建一些东西:

    • 一个文件夹,用于保存项目文件; 我们将此文件夹称为gravatar-custom-tag
    • gravatar-custom-tag文件夹中有一个HTML文件index.html 。 该文件将包含HTML代码。
    • gravatar-custom-tag文件夹中的一个JS文件codingdude-gravatar.js 。 该文件将包含实现自定义标记JavaScript代码。

    让我们编辑index.html文件,并使它的内容如下所示:

    
        
            
        
    
        This is my Gravatar picture: 
        
    
    

    如果我们现在在浏览器中加载index.html ,结果将不会令人印象深刻,因为我们尚未为自定义标记实现代码:

    自定义标签的示例

    需要注意的一件事是浏览器非常宽容,因此您可以在文档中包含未知标签,而浏览器将忽略它们。 要让我们的自定义标签实际显示我的电子邮件中的Gravatar图片,我们首先必须了解Gravatar的工作方式。

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

    
        
            
            
        
    
        This is my Gravatar picture: 
    
    

    现在,让我们继续执行自定义标记。 我们将需要实现首先在文档中标识我们的自定义标签的代码,然后我们需要实现我们的自定义标签的功能。 这些都将放在我们的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 = "";
    		}
    }	
    
    customTag("codingdude-gravatar",codingdudeGravatar);

    查看代码,我们看到函数customTag()通过名称( tagName参数)查找自定义标签的出现,并执行与该自定义标签关联的功能(通过fn参数)。

    某些浏览器(特别是IE document.createElement(tagName)需要document.createElement(tagName)调用来通知浏览器我们将使用名称为tagName的自定义标签,否则该标签可能无法正常工作。

    fn参数是实现自定义标记应执行的功能的函数。 在我们的例子中, fncodingdudeGravatar() 。 此函数将对自定义标签元素的引用作为参数。 如果自定义标签具有名为email的属性,那么它将把该值从我们的开源库传递给md5()函数。 然后将结果用于组成Gravatar图片的URL,该URL通过我们的自定义标签元素内的元素添加。

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

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

    用文字查看墓碑

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

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

    让我们看看如何实现更高级的自定义标记,该标记可用于绘制饼图。 让我们创建此定制标记所需的文件:

    • 创建一个文件夹并将其命名为piechart-custom-tag 。 这将是我们的项目文件夹。
    • piechart-custom-tag文件夹内,创建一个HTML文件并将其命名为index.html 。 该文件将包含HTML代码。
    • 还要创建一个JavaScript文件codingdude-piechart.js其中将包含我们自定义标记的实现。

    自定义标签经常用作各种功能的包装。 在我们的例子中,我们将使用标记作为绘制饼图的包装。 如果您错过了有关如何使用JavaScript和HTML5 Canvas绘制图表的教程,则可能需要快速浏览一下。 我们将使用该教程中的代码,并将其功能包装在我们的自定义标记中。

    因此,请编辑codingdude-piechart.js文件,并从教程中添加以下功能:

    • drawLine()
    • drawArc()
    • drawPieSlice()
    • Piechart()

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

    
        
            
        
    
        
          10
          14
          2
          12
        
    
    

    这里的目的是使用widthheight属性设置饼图的widthheightcolors属性设置用于饼图切片的颜色。

    如前所述,此自定义标签稍微复杂一点,因为我们要对该自定义标签使用子标签。 我们想在此处使用子标签来设置图表数据。 现在让我们看一下如何实现此自定义标签的代码。

    编辑文件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  sub-tags
        var chartData = {};
        var chartDataElements = element.querySelectorAll("codingdude-data");
        for (var i=0;i

    customTag()函数与示例1中使用的函数相同。 PiechartTag()函数中包含定制标记的PiechartTag() 。 此功能照顾以下方面:

    • 它创建将在其中绘制图表的元素,并将其添加到自定义标记中。 画布的宽度和高度来自自定义标签的属性。
    • 它查找元素的colors属性,并将其转换为用于饼图切片的颜色数组。
    • 它在传递到饼图的数据结构中一一加载元素。 由于元素具有文本内容,因此浏览器将渲染它们并显示文本内容。 由于我们不希望这样做,因此我们可以在获取数据后删除元素。
    • 最后,我们使用所需的选项调用Piechart()构造函数,然后调用draw()函数绘制饼图。

    如果加载index.html ,则可以看到自定义标记呈现为饼图,并且应如下所示:

    通过创建自定义标签来扩展HTML_第1张图片

    在那里,有一个漂亮的饼图。 更改属性将相应地更改饼图。 相同的自定义标签技术被用于CodeCanyon的信息图表和图形HTML标签库的开发。

    通过创建自定义标签来扩展HTML_第2张图片 CodeCanyon的图表库

    该库不仅包含用于饼图的自定义标签,还包含折线图,条形图和其他类型的图表的自定义标签。

    最后的想法

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

    如果您喜欢本教程,我们还会提供有关HTML5和相关技术的其他各种教程,因此也请随时将其检出 。

    翻译自: https://code.tutsplus.com/tutorials/extending-the-html-by-creating-custom-tags--cms-28622

你可能感兴趣的:(python,js,javascript,java,html)