Skip to content

脚本 (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 进行错误捕获。
  • 函数命名:
    • 获取数据: gethandleGet 开头 (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`,
    // ...
});

本内容仅限内部使用,技术细节以实际代码为准