【Uniapp】代码规范三：代码格式规范

露露在前端

于 2024-09-28 11:30:25 发布

阅读量220

点赞数 2

文章标签： uni-app 代码规范前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_86337335/article/details/142613137

版权

1. 缩进

使用两个空格进行缩进（或四个空格，具体根据团队约定）。
确保所有代码块（如函数、条件、循环）使用一致的缩进。
示例：

function exampleFunction() {
  if (condition) {
    doSomething();
  }
}

2. 空格

在运算符（如 +, -, =）前后使用空格，以提高可读性。
函数调用时，参数列表前不加空格。
在控制结构（如 if、for）的括号前后保持一致的空格。
示例：

const result = a + b;
exampleFunction(param1, param2);

3. 换行

每行的长度不超过 80 或 100 个字符，避免横向滚动。
在适当的地方使用换行来提高可读性，特别是在长表达式或复杂逻辑中。
示例：

const longString = 'This is a very long string that needs to be wrapped for better readability.';

if (a === b &&
    c === d) {
  doSomething();
}

4. 条件与循环

使用简洁的语法结构，如三元表达式，避免过于复杂的嵌套。
在循环中使用v-for时，提供key属性，增强性能和可维护性。
避免在循环内部进行深度嵌套，保持逻辑清晰。
示例：

items.forEach(item => {
  if (item.isActive) {
    activateItem(item);
  }
});

5. 错误处理

使用 try...catch 语句进行错误处理，确保代码的健壮性。
针对可能出现的错误类型进行具体的处理，以便于调试。
示例：

try {
  const data = fetchData();
} catch (error) {
  console.error('Error fetching data:', error);
  // 进行必要的恢复操作
}

6. 变量声明

使用const声明常量，使用let声明可变变量，避免使用var。
声明变量时，尽量将相关变量放在一起，并使用合适的命名。
示例：

const userName = 'John';
let userAge = 30;
let userRole = 'admin';

7. 模块导入

使用 ES6 模块导入语法，将模块导入放在文件顶部，保持顺序（外部模块在前，内部模块在后）。
导入时确保路径相对清晰，避免过长。
示例：

import { fetchUserData } from './api';
import UserProfile from './components/UserProfile.vue';

8. 模板和样式

在Vue文件中，<template>、<script>、<style>标签之间留一行空行，以提高可读性。
CSS样式遵循BEM命名规范，确保类名一致性。
在 Vue 组件中，模板部分应与逻辑部分分开，逻辑应尽量简洁。
示例：

<template>
  <div class="user-profile">
    <h1>{{ user.name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    fetchUser() {
      // fetch logic
    }
  }
};
</script>

<style scoped>
.user-profile {
  /* 样式定义 */
}
</style>