优秀的前端注释规范模板

以下是一些优秀的前端注释规范模板供你参考：

一、HTML 注释模板

1. 模块注释

   • <!-- Start of [Module Name] -->
   • <!-- End of [Module Name] -->
     例如：
   • <!-- Start of Header Module -->
   • <!-- End of Header Module -->

2. 功能注释

   • <!-- This is [Function Description] -->
     例如：
   • <!-- This is the main navigation bar -->

3. 注释掉的代码注释

   • <!-- Commented out because [Reason] --> [Code]
     例如：
   • <!-- Commented out because this feature is not ready yet --> <div class="temp-feature">...</div>

二、CSS 注释模板

1. 模块注释

   • /* [Module Name] styles */
     例如：
   • /* Header styles */

2. 属性注释

   • /* [Description] */ [Property]: [Value];
     例如：
   • /* Makes the text bold for better visibility */ font-weight: bold;

三、JavaScript 注释模板

1. 文件开头注释

   /**
    * [File Description]
    * 
    * [Author Name] - [Creation Date]
    * [Version Number]
    */

例如：

   /**
    * This file contains utility functions for handling user data.
    * 
    * John Doe - 2024-08-20
    * Version 1.0
    */

1. 函数注释

   /**
    * [Function Description]
    *
    * @param {[Parameter Type 1]} [Parameter Name 1] - [Parameter Description 1]
    * @param {[Parameter Type 2]} [Parameter Name 2] - [Parameter Description 2]
    *...
    * @returns {[Return Type]} [Return Description]
    */

例如：

   /**
    * Calculates the sum of two numbers.
    *
    * @param {number} num1 - The first number.
    * @param {number} num2 - The second number.
    * @returns {number} The sum of num1 and num2.
    */
   function addNumbers(num1, num2) {
     return num1 + num2;
   }

1. 复杂逻辑注释

   // [Comment explaining the complex logic]
   [Code]

例如：

   // This loop iterates over the array and filters out non-numeric values.
   for (let i = 0; i < array.length; i++) {
     if (isNaN(array[i])) continue;
     // Do something with the numeric value
   }

这些模板可以帮助你在前端项目中保持一致的注释风格，提高代码的可读性和可维护性。你可以根据项目的具体需求进行适当的调整和扩展。