常用规则
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
# Java 命名规范
|
||||
|
||||
## 规则
|
||||
|
||||
1. **包名（Package）**：
|
||||
- 全部小写，使用反斜杠分隔层级。
|
||||
- 格式：`com.公司名.项目名.模块名`
|
||||
- 示例：`com.example.order.service`
|
||||
|
||||
2. **类名（Class）**：
|
||||
- 使用大驼峰命名法（UpperCamelCase）。
|
||||
- 名词或名词短语。
|
||||
- 示例：`UserService`、`OrderController`、`DatabaseConfig`
|
||||
|
||||
3. **接口名（Interface）**：
|
||||
- 使用大驼峰命名法（UpperCamelCase）。
|
||||
- 通常以 `Interface` 结尾（可选，根据团队规范）。
|
||||
- 示例：`PaymentServiceInterface` 或 `PaymentService`
|
||||
|
||||
4. **抽象类名（Abstract Class）**：
|
||||
- 使用大驼峰命名法（UpperCamelCase）。
|
||||
- 以 `Abstract` 开头。
|
||||
- 示例：`AbstractBaseController`、`AbstractEventHandler`
|
||||
|
||||
5. **枚举名（Enum）**：
|
||||
- 使用大驼峰命名法（UpperCamelCase）。
|
||||
- 示例：`OrderStatus`、`UserRole`
|
||||
|
||||
6. **变量名（Variable）**：
|
||||
- 使用小驼峰命名法（camelCase）。
|
||||
- 见名知意，避免缩写（如 `userList` 而非 `ul`）。
|
||||
- 示例：`userName`、`orderList`、`isActive`
|
||||
|
||||
7. **常量名（Constant）**：
|
||||
- 全部大写，单词间用下划线分隔。
|
||||
- 使用 `static final` 修饰。
|
||||
- 示例：`MAX_RETRY_COUNT`、`DEFAULT_PAGE_SIZE`
|
||||
|
||||
8. **方法名（Method）**：
|
||||
- 使用小驼峰命名法（camelCase）。
|
||||
- 动词或动词短语开头。
|
||||
- 示例：`getUserById`、`createOrder`、`isValid`
|
||||
|
||||
9. **布尔变量与方法**：
|
||||
- 布尔变量以 `is`、`has`、`can`、`should` 开头。
|
||||
- 示例：`isEnabled`、`hasPermission`、`canDelete`
|
||||
- Getter 方法：布尔类型使用 `is` 前缀（如 `isEnabled()`），其他类型使用 `get` 前缀。
|
||||
|
||||
10. **异常类名（Exception）**：
|
||||
- 以 `Exception` 结尾。
|
||||
- 示例：`UserNotFoundException`、`OrderProcessingException`
|
||||
|
||||
11. **测试类名（Test Class）**：
|
||||
- 以 `Test` 结尾或开头。
|
||||
- 示例：`UserServiceTest`、`TestOrderService`
|
||||
|
||||
12. **集合变量名**：
|
||||
- 使用复数形式或添加 `List`、`Map`、`Set` 后缀。
|
||||
- 示例：`users`、`userList`、`orderMap`
|
||||
|
||||
## 示例
|
||||
|
||||
### 正确示例
|
||||
|
||||
```java
|
||||
package com.example.order.service;
|
||||
|
||||
public class OrderService implements OrderServiceInterface {
|
||||
|
||||
private static final int MAX_RETRY_COUNT = 3;
|
||||
private static final int DEFAULT_PAGE_SIZE = 10;
|
||||
|
||||
private final OrderRepository orderRepository;
|
||||
|
||||
public List<Order> getAllOrders() {
|
||||
return orderRepository.findAll();
|
||||
}
|
||||
|
||||
public Optional<Order> getOrderById(Long id) {
|
||||
return orderRepository.findById(id);
|
||||
}
|
||||
|
||||
public boolean isValidOrder(Order order) {
|
||||
return order != null && order.getAmount() > 0;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 错误示例
|
||||
|
||||
```java
|
||||
package com.example.order; // 包名缺少层级
|
||||
|
||||
public class orderservice { // 类名未使用大驼峰
|
||||
|
||||
private int maxretrycount = 3; // 常量未大写
|
||||
|
||||
public List<Order> getorder() { // 方法名未使用小驼峰
|
||||
return orderRepository.findAll();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 适用范围
|
||||
|
||||
- 所有 Java 项目代码
|
||||
- Spring Boot 后端服务
|
||||
- Java 单元测试
|
||||
@@ -0,0 +1,193 @@
|
||||
# Vue 命名规范
|
||||
|
||||
> 本规范适用于 Vue2 和 Vue3。两者在命名规范上基本一致，主要区别在于 API 风格（Options API vs Composition API）。
|
||||
|
||||
## 规则
|
||||
|
||||
1. **文件名**：
|
||||
- 组件文件使用大驼峰命名法（PascalCase）。
|
||||
- 示例：`UserProfile.vue`、`OrderList.vue`
|
||||
- 视图页面文件使用 `View` 后缀：`UserListView.vue`、`OrderDetailView.vue`
|
||||
|
||||
2. **组件名（Component Name）**：
|
||||
- 在 `components` 目录中的组件使用多单词命名，避免与 HTML 标签冲突。
|
||||
- 示例：`BaseButton.vue`、`ThemePicker.vue`、`UserAvatar.vue`
|
||||
- 视图组件使用 `View` 后缀。
|
||||
|
||||
3. **模板中组件引用**：
|
||||
- 在模板中使用大驼峰（PascalCase）或短横线（kebab-case）均可，建议统一使用大驼峰。
|
||||
- 示例：`<BaseButton>` 或 `<base-button>`
|
||||
|
||||
4. **Props 命名**：
|
||||
- 声明时使用小驼峰（camelCase）。
|
||||
- 在模板中传递时使用短横线（kebab-case）。
|
||||
- 示例：
|
||||
```javascript
|
||||
// 声明
|
||||
props: {
|
||||
userName: String,
|
||||
orderList: Array
|
||||
}
|
||||
```
|
||||
```html
|
||||
<!-- 使用 -->
|
||||
<user-profile user-name="John" order-list="orders"></user-profile>
|
||||
```
|
||||
|
||||
5. **Emits 命名**：
|
||||
- 使用短横线（kebab-case）。
|
||||
- 示例：`update:user-name`、`delete-order`
|
||||
|
||||
6. **数据属性（Data Properties）**：
|
||||
- 使用小驼峰（camelCase）。
|
||||
- 避免与 props 同名。
|
||||
- 示例：`searchQuery`、`isLoading`
|
||||
|
||||
7. **方法名（Methods）**：
|
||||
- 使用小驼峰（camelCase）。
|
||||
- 动词开头，清晰表达动作。
|
||||
- 示例：`handleSubmit`、`fetchOrders`、`toggleMenu`
|
||||
|
||||
8. **计算属性（Computed）**：
|
||||
- 使用小驼峰（camelCase）。
|
||||
- 名词或名词短语表示派生数据。
|
||||
- 示例：`formattedName`、`filteredOrders`、`isLoading`
|
||||
|
||||
9. ** watchers**：
|
||||
- 方法名与被监听的属性同名。
|
||||
- 示例：`watch: { searchQuery(newValue) { ... } }`
|
||||
|
||||
10. **CSS 类名**：
|
||||
- 使用短横线连接（kebab-case）。
|
||||
- 若使用 scoped CSS，建议添加组件名前缀。
|
||||
- 示例：`.user-profile-header`、`.order-list-item`
|
||||
|
||||
11. **组合式函数（Composition API - Vue3 特有）**：
|
||||
- 文件名以 `use` 开头，使用小驼峰。
|
||||
- 示例：`useFetch.js`、`useMouse.js`
|
||||
- 函数名以 `use` 开头，使用小驼峰。
|
||||
- 示例：`function useFetch(url) { ... }`
|
||||
|
||||
12. **响应式变量（Composition API）**：
|
||||
- 使用小驼峰（camelCase）。
|
||||
- ref 变量：`count`、`userName`
|
||||
- reactive 对象：`state`、`form`
|
||||
|
||||
13. **Provide / Inject**：
|
||||
- 使用 Symbol 或字符串常量。
|
||||
- 命名清晰表达提供的功能。
|
||||
- 示例：`provide('currentUser', user)`、`inject('currentUser')`
|
||||
|
||||
## Vue2 与 Vue3 的差异说明
|
||||
|
||||
| 项目 | Vue2 (Options API) | Vue3 (Composition API) |
|
||||
|------|-------------------|----------------------|
|
||||
| **数据定义** | `data()` 返回对象 | `ref()` 或 `reactive()` |
|
||||
| **方法定义** | `methods` 选项 | 直接在 `setup()` 中定义 |
|
||||
| **计算属性** | `computed` 选项 | `computed()` 函数 |
|
||||
| **侦听器** | `watch` 选项 | `watch()` 或 `watchEffect()` 函数 |
|
||||
| **命名规范** | ✅ 相同 | ✅ 相同 |
|
||||
|
||||
> **结论**：Vue2 和 Vue3 在命名规范上没有本质差异，仅 API 使用方式不同。
|
||||
|
||||
## 示例
|
||||
|
||||
### 正确示例
|
||||
|
||||
```vue
|
||||
<!-- UserProfile.vue -->
|
||||
<template>
|
||||
<div class="user-profile">
|
||||
<base-button @click="handleClick">Click Me</base-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserProfile',
|
||||
props: {
|
||||
userName: String,
|
||||
userAge: Number
|
||||
},
|
||||
emits: ['update:userName'],
|
||||
data() {
|
||||
return {
|
||||
isActive: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('update:userName', 'New Name')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-profile {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Composition API 示例（Vue3）
|
||||
|
||||
```vue
|
||||
<!-- UserProfile.vue -->
|
||||
<template>
|
||||
<div class="user-profile">
|
||||
<base-button @click="handleClick">Click Me</base-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import BaseButton from './BaseButton.vue'
|
||||
|
||||
const props = defineProps({
|
||||
userName: String,
|
||||
userAge: Number
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:userName'])
|
||||
|
||||
const isActive = ref(false)
|
||||
|
||||
const handleClick = () => {
|
||||
emit('update:userName', 'New Name')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-profile {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 错误示例
|
||||
|
||||
```vue
|
||||
<!-- user-profile.vue --> <!-- ❌ 文件名应为大驼峰 -->
|
||||
<template>
|
||||
<div class="userprofile"> <!-- ❌ 类名应使用短横线 -->
|
||||
<button @click="clickme">Click</button> <!-- ❌ 方法名应使用小驼峰 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isactive: false // ❌ 变量名应使用小驼峰
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 适用范围
|
||||
|
||||
- Vue2 项目（Options API）
|
||||
- Vue3 项目（Options API 和 Composition API）
|
||||
- Vue 组合式函数（Composables）
|
||||
Reference in New Issue
Block a user