当前位置： 首页 > news >正文

论程序员的职业素养

news 2026/2/7 16:57:18

文章目录

  • 前言
  • 一、命名规范
    • 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');}});

相关文章：

论程序员的职业素养

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

编程日记 2024/6/6 12:52:16

前端canvas绘图，利用canvas在图片上面绘制标记以及给canvas添加点击事件。

前端canvas绘图&#xff0c;利用canvas在图片上面绘制标记以及给canvas添加点击事件。 需要实现的效果如下图: 首先需要一个承载的核心画布 <canvas id"canvas" width"800" height"600"></canvas>全部代码&#xff1a; <!DOCT…...

编程日记 2024/6/6 12:51:15

38、Flink 的 WindowAssigner 之 GlobalWindows 示例

1、注意 使用 GlobalWindows 需要自定义 Trigger&#xff0c;否则窗口中的数据不会被计算。 2、代码示例 import org.apache.flink.streaming.api.datastream.DataStreamSource; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org…...

编程日记 2024/6/6 12:49:13

同事仅靠着自己写的npm包跳槽去了大厂，羡慕了一整天

同事们之间总会悄悄聊一些话题&#xff0c;比如聊一些八卦啦&#xff0c;聊一些领导啦&#xff0c;也会偶尔说想跳槽&#xff0c;但这年头&#xff0c;跳槽多费劲啊&#xff0c;谁没事敢动。还别说&#xff0c;边上做了个同事&#xff0c;前两天还真要撤了&#xff0c;聊了半天…...

编程日记 2024/6/6 12:46:09

Yocto - bitbake任务中clean和cleanall的区别

在 BitBake 中&#xff0c;clean 和 cleanall 命令都用于删除构建工件&#xff0c;但它们的范围和执行的清理程度不同。 1. clean 命令&#xff1a; 目的&#xff1a;clean命令用于删除与特定任务或配方相关的临时构建文件和工件。 范围&#xff1a;它只清除指定任务或配方生…...

编程日记 2024/6/6 12:42:05

Spring 中如何控制 Bean 的加载顺序？

如果你脱口而出说添加 Order 注解或者是实现 Ordered 接口&#xff0c;那么恭喜&#xff0c;你掉坑了。 一 Order 注解和 Ordered 接口 在 Spring 框架中&#xff0c;Order 是一个非常实用的元注解&#xff0c;它位于 spring-core 包下&#xff0c;主要用于控制某些特定上下文…...

编程日记 2024/6/6 12:41:03

【学习笔记】Windows GDI绘图(十)Graphics详解(中)

文章目录 Graphics的方法AddMetafileComment添加注释BeginContainer和EndContainer新建、还原图形容器不指定指定源与目标矩形指定源与目标矩形 Clear清空并填充指定颜色CopyFromScreen截图CopyPixelOperation DrawImage绘制图像DrawImage的GraphicsDrawImageAbort回调ExcludeC…...

编程日记 2024/6/6 12:40:02

web学习笔记（六十二）

目录 1.键盘事件 2.KeepAlive 3.组件传值 3.1 兄弟组件传值 3.2 组件树传值 3.3 发布订阅者传值 1.键盘事件 keydown表示键盘事件&#xff0c;在不加修饰符的情况下&#xff0c;点击键盘上的任意位置都可以触发键盘事件&#xff0c; <template><div><!--…...

编程日记 2024/6/6 12:36:56

每天CTF小练一点--ctfshow年CTF

初一 题目&#xff1a; 2023是兔年&#xff0c;密码也是。聪明的小伙伴们&#xff0c;你能破解出下面的密码吗&#xff1f; 感谢大菜鸡师傅出题 flag格式是ctfshow{xxxxxx}.或许密码也有密码。 密文是&#xff1a; U2FsdGVkX1M7duRffUvQgJlESPfOTV2i4TJpc9YybgZ9ONmPk/RJje …...

编程日记 2024/6/6 12:35:55

Java Set接口 - TreeSet类

TreeSet 是 Java 集合框架中的一个类&#xff0c;它实现了 NavigableSet 接口&#xff0c;而 NavigableSet 是 SortedSet 接口的一个子接口。TreeSet 基于红黑树&#xff08;一种自平衡的二叉搜索树&#xff09;实现&#xff0c;因此它可以保证集合中的元素以升序排列。 以下是…...

编程日记 2024/6/6 12:34:54

css 理解了原理，绘制三角形就简单了

1.border-位置 注意&#xff1a;border-bottom/up/right/left 主要是以三角形的结构搭建而成&#xff0c;而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后&#xff0c;绘制三角形就简单多了。 1.transparent 注意&#xff1a;该属性主要是颜色透明…...

编程日记 2024/6/6 12:32:52

【JavaEE进阶】——MyBatis操作数据库 (#{}与${} 以及 动态SQL）

目录 &#x1f6a9;#{}和${} &#x1f388;#{} 和 ${}区别 &#x1f388;${}使用场景 &#x1f4dd;排序功能 &#x1f4dd;like 查询 &#x1f6a9;数据库连接池 &#x1f388;数据库连接池使⽤ &#x1f6a9;MySQL开发企业规范 &#x1f6a9;动态sql &#x1f388…...

编程日记 2024/6/6 12:31:51

电阻应变片的结构

电阻应变片的结构 常用的电阻应变片有金属应变片和半导体应变片两种。金属应变片分为体型和薄膜型。半导体应变片常见的有体型、薄膜型、扩散型、外延型、PN结及其他形式。图2—2所示为工程常见的应变片实物。 电阻应变片的典型结构如图2—3所示。它由敏感栅、基底、覆盖层和引…...

编程日记 2024/6/6 12:30:50

云原生时代：从 Jenkins 到 Argo Workflows，构建高效 CI Pipeline

作者&#xff1a;蔡靖 Argo Workflows Argo Workflows [ 1] 是用于在 Kubernetes 上编排 Job 的开源的云原生工作流引擎。可以轻松自动化和管理 Kubernetes 上的复杂工作流程。适用于各种场景&#xff0c;包括定时任务、机器学习、ETL 和数据分析、模型训练、数据流 pipline、…...

编程日记 2024/6/6 12:29:49

【数据库系统概论】事务

概述 在数据库系统中&#xff0c;事务&#xff08;Transaction&#xff09;是指一组作为单个逻辑工作单元执行的操作。这些操作要么全部成功&#xff08;提交&#xff09;&#xff0c;要么全部失败&#xff08;回滚&#xff09;。事务的主要目的是确保数据库的完整性和一致性&…...

编程日记 2024/6/6 12:26:46

C++-排序算法详解

目录 一. 冒泡排序&#xff1a; 二. 插入排序&#xff1a; 三. 快速排序&#xff1a; 四. 选择排序 五, 归并排序 六, 堆排序. 排序算法是一种将一组数据按照特定顺序&#xff08;如升序或降序&#xff09;进行排列的算法。 其主要目的是对一组无序的数据进行整理&#…...

编程日记 2024/6/6 12:25:45

Kotlin 引用（双冒号::）

文章目录 双冒号::引用函数普通函数成员函数类构造函数 引用变量&#xff08;很少用&#xff09;普通变量成员变量 双冒号:: Kotlin 中可以使用双冒号::对某一变量、函数进行引用。 Note&#xff1a;MyClass::class可用于获取KClass<MyClass>&#xff0c;此时的双冒号::…...

编程日记 2024/6/6 12:24:44

C++ day3练习

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std;class Per{private:…...

编程日记 2024/6/6 12:23:43

命令模式（行为型）

目录 一、前言 二、命令模式 三、总结 一、前言 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;命令模式将一个请求封装为一个对象&#xff0c;从而可以用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以…...

编程日记 2024/6/6 12:22:42

韩雪医生针药结合效果好 患者赠送锦旗表感谢

任先生长年献血身体出现不适&#xff0c;身上多处发黑发冷&#xff0c;伴随疼痛&#xff0c;而且还有慢性腹泻的症状。他曾前往苏州各大医馆做过检查&#xff0c;均查不出异常&#xff0c;但身体确实不舒服&#xff0c;面色晦暗。 后来他来到李良济&#xff0c;求诊于韩雪医生。…...

编程日记 2024/6/6 12:19:39

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/6 0:54:58

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/26 13:25:02

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/4 1:25:22