论程序员的职业素养

文章目录

  • 前言
  • 一、命名规范
    • 1. HTML命名规范
    • 2. CSS命名规范
    • 3. JavaScript命名规范
    • 4. 文件和文件夹命名规范
    • 5. 代码案例
  • 二、代码注释规范
    • 1. 注释规范
    • 2. 案例代码
      • HTML
      • CSS (styles/main.css)
      • JavaScript (scripts/main.js)
  • 三、代码逻辑规范
    • 1.逻辑规范
    • 2. 代码案例
      • 清晰的函数和模块化
      • 错误处理和条件逻辑

前言

在谈程序员的职业素养前，先说说程序员的最烦的两件事：第一是，烦别人规范他代码要这样那样，写出有注释、逻辑清晰、可维护性高的代码；第二是，在维护其他人的代码时，吐槽他人代码没注释、代码逻辑性差、可维护性低。
本人主要从事前端工作，从前端的角度聊下以下几点。

一、命名规范

在前端开发中，保持一致的命名规范对于代码的可读性、可维护性以及团队协作至关重要。以下是一些详细的前端命名规范，涵盖了HTML、CSS、JavaScript以及文件和文件夹的命名。

1. HTML命名规范

  • 类名和ID名：
    • 使用小写字母。
    • 多个单词之间使用连字符-分隔，如header-wrapper、main-content。
    • 避免使用过于通用的名称，如container、box等，除非它们确实代表了一个通用的容器或盒子。
    • 使用BEM（Block Element Modifier）命名法来组织复杂的HTML结构，如.block__element--modifier。

2. CSS命名规范

  • 类名：
    • 遵循HTML的类名命名规则。
    • 使用有意义的名称来描述样式所应用的对象或状态。
    • 避免使用过于具体的名称，如.red-text，因为这可能导致难以维护。相反，可以使用如.alert-text这样更通用的名称，并通过修改变量或另一个类来改变颜色。
  • ID名：
    • 尽量避免在CSS中使用ID来定义样式，因为ID应该是唯一的，并且通常用于JavaScript中的DOM操作。

3. JavaScript命名规范

  • 变量名：
    • 使用驼峰式命名法（camelCase）。
    • 变量名应简短且描述性强。
    • 使用有意义的变量名，避免使用如a、b、c这样的单字母变量名，除非它们只是在一个很小的范围内使用。
  • 函数名：
    • 也使用驼峰式命名法。
    • 函数名应清晰地描述其功能。
  • 常量名：
    • 使用全大写字母和下划线命名法，如MAX_AGE、PI。
  • 类名：
    • 使用帕斯卡命名法（PascalCase）。
    • 类名应描述类的用途或功能。

4. 文件和文件夹命名规范

  • 文件名：
    • 使用小写字母。
    • 使用连字符-分隔多个单词。
    • 对于JavaScript文件，建议使用.js作为扩展名；对于CSS文件，使用.css；对于HTML文件，使用.html。
  • 文件夹名：
    • 同样使用小写字母和连字符-。
    • 根据项目结构和功能来组织文件夹。

5. 代码案例

HTML:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端命名规范示例</title><link rel="stylesheet" href="styles/main.css">
</head>
<body><div class="header-wrapper"><h1 class="header-title">欢迎来到我的网站</h1></div><main class="main-content"><!-- 页面主要内容 --></main><script src="scripts/main.js"></script>
</body>
</html>

CSS (styles/main.css):

.header-wrapper {background-color: #f2f2f2;padding: 20px;
}.header-title {color: #333;font-size: 2em;
}/* 更多样式... */

JavaScript (scripts/main.js):

const headerTitle = document.querySelector('.header-title');function greetUser() {console.log(`欢迎来到我的网站, ${headerTitle.textContent}`);
}greetUser(); // 输出：欢迎来到我的网站, 欢迎来到我的网站// 更多函数和代码...

二、代码注释规范

前端代码中的注释对于代码的可读性和可维护性至关重要。良好的注释可以帮助其他开发者（或未来的你）更好地理解代码的用途、工作方式以及可能的限制。以下是一些前端代码详细注释的规范及案例代码。

1. 注释规范

  1. 简洁明了：注释应该简洁、明了，避免冗余和废话。
  2. 描述性：注释应该提供关于代码目的、工作方式或潜在问题的详细信息。
  3. 一致性：在整个项目中保持注释风格的一致性。
  4. 避免过度注释：不要为每一行代码都添加注释，只需要为复杂或关键的部分添加注释。
  5. 更新注释：当代码发生变化时，确保相关的注释也得到更新。
  6. 使用标准注释符号：在HTML、CSS和JavaScript中，使用各自的注释符号（如//、/* ... */）。

2. 案例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端注释规范示例</title><!-- 引入主要样式文件 --><link rel="stylesheet" href="styles/main.css">
</head>
<body><!-- 头部区域 --><div class="header-wrapper"><h1 class="header-title">欢迎来到我的网站</h1></div><!-- 主要内容区域 --><main class="main-content"><!-- 这里将显示主要内容 --></main><!-- 引入主要脚本文件 --><script src="scripts/main.js"></script>
</body>
</html>

CSS (styles/main.css)

/* 头部区域样式 */
.header-wrapper {background-color: #f2f2f2; /* 背景色为浅灰色 */padding: 20px; /* 内边距为20像素 */
}/* 标题样式 */
.header-title {color: #333; /* 字体颜色为深灰色 */font-size: 2em; /* 字体大小为2em *//* 注意：这里可能需要适配不同屏幕尺寸 */
}/* 更多样式... */

JavaScript (scripts/main.js)

// 获取头部标题元素
const headerTitle = document.querySelector('.header-title');/*** 向控制台打印欢迎信息* @returns {void} 无返回值*/
function greetUser() {console.log(`欢迎来到我的网站, ${headerTitle.textContent}`);
}// 调用greetUser函数
greetUser(); // 输出：欢迎来到我的网站, 欢迎来到我的网站// 如果有需要，可以添加更多函数和代码.../*** 示例函数：计算两个数的和* @param {number} num1 - 第一个数字* @param {number} num2 - 第二个数字* @returns {number} 两个数字的和*/
function addNumbers(num1, num2) {return num1 + num2;
}// 调用addNumbers函数并输出结果
console.log(addNumbers(5, 3)); // 输出：8

在上面的案例代码中，可以看到不同类型的注释风格：

  • 单行注释：使用//，用于简单的描述或解释。
  • 多行注释：在CSS中使用/* ... */，在JavaScript中也可以用于多行注释，但通常用于函数或代码块的描述。
  • JSDoc注释：一种特殊的JavaScript注释风格，用于描述函数、变量、类等，并可以被某些工具解析生成文档。在上述案例中，我们为greetUser和addNumbers函数添加了JSDoc注释。

三、代码逻辑规范

在前端开发中，逻辑规范是确保代码质量、可维护性和可读性的重要部分。以下是一些详细的前端逻辑规范及相应的代码案例。

1.逻辑规范

  1. 结构清晰：代码应该有清晰的结构，每个函数、模块或组件都应该只做一件事，并且应该做好。

  2. 模块化：将代码拆分成小的、可重用的模块或组件，这有助于降低代码的复杂性并增加可维护性。

  3. 条件逻辑：

    • 尽量避免深度嵌套的if-else语句，可以通过策略模式、查找表或状态机来替代。
    • 使用switch语句时，确保所有可能的情况都被处理，并提供一个默认情况以处理未知或意外的情况。

  4. 错误处理：

    • 使用try-catch语句来处理可能抛出异常的代码块。
    • 对于异步操作，使用.catch()或async/await与try-catch结合来处理错误。
    • 为错误提供有意义的消息，以帮助开发者快速定位问题。

  5. 数据验证：在将数据用于关键操作（如计算、API请求等）之前，始终验证数据的完整性和有效性。

  6. 代码复用：避免重复编写相同的代码，而是创建可重用的函数、组件或模块。

  7. 代码可读性：使用有意义的变量名、函数名和注释来提高代码的可读性。

  8. 性能优化：注意代码的性能影响，避免不必要的计算和DOM操作。

2. 代码案例

清晰的函数和模块化

// 定义一个函数来计算价格
function calculatePrice(quantity, unitPrice) {return quantity * unitPrice;
}// 定义一个模块来处理订单
const OrderModule = {createOrder: function(productId, quantity) {// 假设有一个获取产品信息的函数const product = getProductInfo(productId);if (!product) {throw new Error('Product not found');}const totalPrice = calculatePrice(quantity, product.price);return {productId,quantity,totalPrice};}// ... 其他订单相关的函数
};// 使用模块
try {const order = OrderModule.createOrder('123', 2);console.log(order);
} catch (error) {console.error('Error creating order:', error.message);
}

错误处理和条件逻辑

async function fetchData(url) {try {const response = await fetch(url);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}return await response.json();} catch (error) {console.error('Error fetching data:', error.message);// 处理错误或返回默认值return null;}
}// 使用fetchData函数
fetchData('https://api.example.com/data').then(data => {if (data) {// 处理数据console.log(data);} else {// 数据为空或发生错误时的处理console.log('No data or error occurred');}});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/23297.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QT系列教程(8) QT 布局学习

QT系列教程(8) QT 布局学习

简介 Qt 中的布局有三种方式&#xff0c;水平布局&#xff0c;垂直布局&#xff0c;栅格布局。 通过ui设置布局 我们先创建一个窗口应用程序&#xff0c;程序名叫layout&#xff0c;基类选择QMainWindow。但我们不使用这个mainwindow&#xff0c;我们创建一个Qt应用程序类Log…
阅读更多...
使用API有效率地管理Dynadot域名，删除已设置的文件夹

使用API有效率地管理Dynadot域名，删除已设置的文件夹

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…
阅读更多...
河南省第十四届ICPC大学生程序设计竞赛-C结对编程

河南省第十四届ICPC大学生程序设计竞赛-C结对编程

题面 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 524288K&#xff0c;其他语言1048576K 64bit IO Format: %lld 题目描述 A公司是一家主营软件开发的公司。公司内有n名员工&#xff0c;编号为1到n的整数&#xff0c;除了1号老板外每名员工…
阅读更多...
用友NC downCourseWare 任意文件读取漏洞复现

用友NC downCourseWare 任意文件读取漏洞复现

0x01 产品简介 用友NC是一款企业级ERP软件。作为一种信息化管理工具，用友NC提供了一系列业务管理模块，包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等，帮助企业实现数字化转型和高效管理。 0x02 漏洞概述 用友NC 系统 /portal/pt/downCourseWare…
阅读更多...
PDF格式分析（八十四）——小部件注释（Widget）

PDF格式分析（八十四）——小部件注释（Widget）

小部件注释(PDF1.2及其以上版本)，用于表示交互式表单的外观，并管理其与用户的交互。为了方便，当field仅与单个小部件注释相关联时，field词典会与annotation字典合并成一个字典，该字典既有field字典的条目，也有annotation字典的条目。 下表显示Widget注释字典的条目： 条…
阅读更多...
【Go】编码结构体转换为json字符串

【Go】编码结构体转换为json字符串

结构体内字段命名大小写问题导致无法解析到 package mainimport ("encoding/json""fmt" ) // 定义一个结构体 type Music struct {name string json:"名称" // 字段大小写命名问题&#xff01;&#xff01;&#xff01;singer string json:&q…
阅读更多...
【踩坑】minidlna一直提示文件权限问题No Accesible

【踩坑】minidlna一直提示文件权限问题No Accesible

1. media_dir xxx no accessible [Permission denied] 通过sudo apt install minidlna安装的&#xff0c;会自动开启minidlna服务&#xff0c;并且服务启动用户为minidlna&#xff0c;此时如果使用正常路径作为media_dir&#xff0c;会报错&#xff1a;No accessible[Permissi…
阅读更多...
Javascript系统学习（三）

Javascript系统学习（三）

前端模块化前端模块化CommonJS、AMD、CMD、ES6_commonjs amd cmd es6模块化-CSDN博客 ES6: <script type"module" src"main.js"></script> //默认导出 export default function(ctx) {... } ----------------------------------- //模块命名…
阅读更多...
创新科技，船舶岸电电源助力环保事业

创新科技，船舶岸电电源助力环保事业

岸电电源&#xff0c;也称为岸用变频电源或电子静止式岸电电源&#xff0c;是一种特别设计制造的大功率变频电源设备。这种设备主要针对船上、岸边码头等高温、高湿、高腐蚀性、大负荷冲击等恶劣使用环境&#xff0c;能够提供稳定的电源供应。它通常用于将岸边的工业用电&#…
阅读更多...
【Mysql】mysql 拼接字符

【Mysql】mysql 拼接字符

在 MySQL 中&#xff0c;你可以使用 CONCAT() 函数来拼接&#xff08;连接&#xff09;字符串。CONCAT() 函数接受两个或多个字符串参数&#xff0c;并返回连接后的字符串。 示例&#xff1a; SELECT CONCAT(Hello, , World) AS Greeting; 输出&#xff1a; Greeting --…
阅读更多...
SpringBoot 请求响应

SpringBoot 请求响应

SpringBoot 请求响应 来源于黑马程序员JavaWeb课程&#xff0c;总结笔记 1.ApiFox Apifox快速入门教程 2.基本参数 简单参数&#xff1a;在向服务器发起请求时&#xff0c;向服务器传递的是一些普通的请求数据。 //RequestController.java import jakarta.servlet.http.Htt…
阅读更多...
概率分析和随机算法

概率分析和随机算法

目录 雇佣问题 概率分析 随机算法 生日悖论 随机算法 概率分析 球与箱子 总结 雇佣问题 有n个候选人面试&#xff0c;如果面试者比目前雇佣者的分数高&#xff0c;评价更好&#xff0c;那么就辞掉当前雇佣者&#xff0c;而去聘用面试者&#xff0c;否则继续面试新的候…
阅读更多...
C# Web控件与数据感应之 填充 HtmlTable

C# Web控件与数据感应之 填充 HtmlTable

目录 关于 HtmlTable HtmlTable与BaseDataList的区别 准备数据源 ​范例运行环境 FillTable 方法 设计与实现 模板样例输出 Automatic 模式填充 ​ DynamicRows 模式填充 StaticRows 模式填充 ​ 小结 关于 HtmlTable 数据感应也即数据捆绑&#xff0c;是…
阅读更多...
电商行业为什么要分析竞争商品？详解竞争商品分析八个维度

电商行业为什么要分析竞争商品？详解竞争商品分析八个维度

在当今的电子商务领域&#xff0c;竞争日益激烈&#xff0c;消费者拥有几乎无限的选择。品牌和商家为了在这场竞争中获得优势&#xff0c;必须深入理解市场动态、消费者需求以及竞争对手的策略。分析竞争商品是实现这一目标的关键步骤。它不仅帮助商家揭示行业内表现优异商品的…
阅读更多...
【机器学习基础】Python编程03：五个实用练习题的解析与总结

【机器学习基础】Python编程03：五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言，它在机器学习领域中的重要性主要体现在以下几个方面： 简洁易学：Python语法简洁清晰，易于学习，使得初学者能够快速上手机器学习项目。 丰富的库支持：Python拥有大量的机器学习库，如scikit-learn、TensorFlow、Keras和PyTorch等，这些…
阅读更多...
LW-DETR：实时目标检测的Transformer， Apache-2.0 开源可商用，实验超 YOLOv8

LW-DETR：实时目标检测的Transformer， Apache-2.0 开源可商用，实验超 YOLOv8

LW-DETR&#xff1a;实时目标检测的Transformer&#xff0c; Apache-2.0 开源可商用&#xff0c;实验超 YOLOv8 LW-DETR 架构实例化高效训练高效推理 目的与解法拆解ViT编码器和DETR解码器多级特征图聚合变形交叉注意力窗口注意力和全局注意力 论文&#xff1a;https://arxiv.o…
阅读更多...
使用docker部署前后端

使用docker部署前后端

1.首先&#xff0c;已经默认拥有了一个拥有docker和docker compose的linux服务器。 本篇文章部署的是SpringBootVue前后端分离项目&#xff0c;用了docker compose&#xff0c;但不多。 2.数据库 使用命令&#xff08;表示拉取最新的MySQL) docker pull mysql:latest如果想指定…
阅读更多...
64. UE5 RPG 创建新的双手攻击怪物

64. UE5 RPG 创建新的双手攻击怪物

在上一篇文章中&#xff0c;我们实现了新的功能&#xff0c;现在可以创建多个普通攻击动画&#xff0c;并且可以根据你所使用的普通攻击动画&#xff0c;设置不同的攻击位置。比如&#xff0c;你使用武器&#xff0c;那么攻击位置需要从武器上获取&#xff0c;如果你没有持有武…
阅读更多...
Python怎么安装gym：一份详尽的指南

Python怎么安装gym：一份详尽的指南

Python怎么安装gym&#xff1a;一份详尽的指南 在Python的机器学习生态系统中&#xff0c;gym库是一个至关重要的组件&#xff0c;它为我们提供了用于开发和比较强化学习算法的标准环境。然而&#xff0c;安装gym可能并不总是那么直接&#xff0c;尤其是对于那些刚开始接触这个…
阅读更多...
LangChain学习之四种Memory模式使用

LangChain学习之四种Memory模式使用

1. 学习背景 在LangChain for LLM应用程序开发中课程中&#xff0c;学习了LangChain框架扩展应用程序开发中语言模型的用例和功能的基本技能&#xff0c;遂做整理为后面的应用做准备。视频地址&#xff1a;基于LangChain的大语言模型应用开发构建和评估。 2. 四种memory模式 …
阅读更多...
最新文章

Copyright @ 2022~2023