以下是一些优秀的前端注释规范模板供你参考:
一、HTML 注释模板
-
模块注释
<!-- Start of [Module Name] -->
<!-- End of [Module Name] -->
例如:<!-- Start of Header Module -->
<!-- End of Header Module -->
-
功能注释
<!-- This is [Function Description] -->
例如:<!-- This is the main navigation bar -->
-
注释掉的代码注释
<!-- Commented out because [Reason] --> [Code]
例如:<!-- Commented out because this feature is not ready yet --> <div class="temp-feature">...</div>
二、CSS 注释模板
-
模块注释
/* [Module Name] styles */
例如:/* Header styles */
-
属性注释
/* [Description] */ [Property]: [Value];
例如:/* Makes the text bold for better visibility */ font-weight: bold;
三、JavaScript 注释模板
- 文件开头注释
/**
* [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
*/
- 函数注释
/**
* [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;
}
- 复杂逻辑注释
// [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
}
这些模板可以帮助你在前端项目中保持一致的注释风格,提高代码的可读性和可维护性。你可以根据项目的具体需求进行适当的调整和扩展。