Appearance
脚本 (Script / JavaScript)
1. 命名规范
- 变量和方法: 使用 小驼峰命名法 (camelCase)。
- API 数据字段: 遵循后端返回的 蛇形命名法 (snake_case)。
javascript
export default {
data() {
return {
// camelCase 变量
showRefusePopup: false,
approveList: [],
form: {
id: "",
// snake_case 字段,与后端保持一致
refuse_reason: "",
},
// camelCase 变量
isSelf: false,
};
},
// ...
};2. 函数风格
- 异步操作: 统一使用
async/await,并配合try...catch进行错误捕获。 - 函数命名:
- 获取数据:
get或handleGet开头 (e.g.,handleGetLeaveDetail)。 - 事件处理:
handle开头 (e.g.,handleData)。 - 用户交互:
confirm,submit等动词开头 (e.g.,confirmAgreeApply,submitRefuse)。
- 获取数据:
javascript
methods: {
// 异步操作与错误处理
async handleGetLeaveDetail(id) {
try {
const res = await this.$api.leaveDetail({ id });
if (res.code === 200) {
this.originData = res.data;
// ...
}
} catch (error) {
console.error(error);
this.$fn.showToast("获取请假详情失败");
}
},
// 用户交互函数
confirmRefuseApply() {
this.showRefusePopup = true;
},
// 表单提交函数
submitRefuse() {
if (!this.form.refuse_reason.trim()) {
return this.$fn.showToast("请输入驳回原因");
}
this.handleRefuseApply();
},
}3. 注释
- 在方法上方或一组逻辑相关的
data属性上方添加 中文注释,说明其功能。
javascript
data() {
return {
showRefusePopup: false,
info: {
status: {}, // 状态
data: [], // 数据
},
originData: {}, // 原始数据 // 保留做处理
userInfo: {}, // 用户信息
approveList: [], // 审批流程
};
},
// 生命周期以及计算属性等方法,放置在methods上方
onLoad(options){
this.handleGetLeaveDetail(options.id);
},
methods: {
// 获取请假详情
async handleGetLeaveDetail(id) {
// ...
},
}4. 模块化调用
- 框架/插件方法: 通过
this.$调用 (e.g.,this.$api,this.$fn)。 - uni-app API: 直接通过
uni.调用 (e.g.,uni.navigateTo)。
javascript
// 调用封装的 API
const res = await this.$api.agreeApply(this.form);
// 调用封装的工具函数
this.$fn.showToast("驳回成功");
// 调用 uni-app API
uni.navigateTo({
url: `/pages/office/sign`,
// ...
});