【Uniapp】代码规范二：命名规范

合理的目录结构可以帮助开发者快速理解和维护项目。根据项目的复杂度和规模，适当调整目录结构和命名规范，使团队协作更加高效。始终保持结构的清晰和一致性是成功的关键。

二.命名规范

统一的命名规范有助于提升团队协作和代码维护效率。在团队中推行这些命名约定，确保每位开发者遵循相同的标准，从而减少混乱和错误。始终保持命名的一致性、可读性和描述性，是良好编码实践的重要部分。

1. 组件命名

• 使用大驼峰命名法（PascalCase），如 MyComponent.vue。

• 组件名应简洁且能反映其功能，如 UserProfile.vue。

• 组件的 props 名称使用小驼峰命名法，确保易于识别。

• 示例：

  <template>
    <UserProfile :user="userData" />
  </template>
  

2. 页面命名

• 使用大驼峰命名法，确保与路由一致，如 HomePage.vue、AboutPage.vue。

• 页面应以“Page”结尾，便于区分。

• 使用文件夹结构组织相关页面，确保路径清晰，如 /pages/user/ProfilePage.vue。

• 示例：

  const routes = [
    { path: '/home', component: HomePage },
    { path: '/about', component: AboutPage }
  ];
  

3. 变量命名

• 使用小驼峰命名法（camelCase），如 userName、itemList。

• 对于常量，使用全大写字母，单词间用下划线分隔，如 MAX_LENGTH。

• 在作用域较小的情况下，使用有意义的缩写以节省空间，但确保可读性，如 usr 表示 user。

• 示例：

  const maxLength = 255;
  const userName = 'JohnDoe';
  

4. 方法命名

• 使用小驼峰命名法，描述性强，如 fetchUserData、handleSubmit。

• 方法名应以动词开头，清晰表示其操作，如 loadData、resetForm。

• 示例：

  methods: {
    fetchUserData() {
      // ...
    }
  }
  

5. 事件命名

• 使用小驼峰命名法，并以“on”开头，表示事件处理函数，如 onClick、onInputChange。

• 事件命名应能清晰指代事件类型和处理内容，如 onUserLogin。

• 示例：

  methods: {
    onClick() {
      // Handle click event
    }
  }
  

6. 样式命名

• 使用 BEM（Block Element Modifier）命名法，如 btn--primary、header__title。

• 尽量使用类名前缀与组件名称相关联，以避免命名冲突，如 user-profile__avatar。

• 对于状态类，使用描述性命名，如 is-active、is-disabled。

• 示例：

  .user-profile__avatar {
    /* styles */
  }
  

注释：

BEM（Block Element Modifier）命名法是一种用于命名CSS类的命名规范，旨在提高代码的可读性和可维护性。
​
BEM由三个部分组成：
Block（块）：
代表一个独立的功能部分，通常是页面中的一个组件或模块。
命名规则：使用小写字母和连字符（-），如btn、header。
Element（元素）：
代表块中的组成部分，依赖于块的存在。
命名规则：在块名后加两个下划线（__），如btn__icon、header__title。
Modifier（修饰符）：
代表块或元素的不同状态或变体，描述外观或行为的变化。
命名规则：在块名或元素名后加两个短横线（--），如btn--primary、header__title--large。
​
<div class="btn btn--primary">
  <span class="btn__icon"></span>
  <span class="btn__text">Click Me</span>
</div>
​
在这个例子中：
btn 是一个块，表示按钮组件。
btn__icon 是块中的元素，表示按钮的图标。
btn--primary 是块的修饰符，表示主要按钮样式。
​
优势
可读性：清晰表达了结构和关系，便于理解。
可维护性：规范的命名方式使得样式易于查找和修改。
复用性：模块化的思维方式促进了组件的复用。

7. 文件命名

• 组件和页面文件名应与其内部组件名一致，便于查找和维护。

• 辅助文件和工具函数文件名应以“util”或“helper”结尾，如 dateUtil.js、apiHelper.js。

• 对于测试文件，使用 .spec.js 后缀，并与被测试文件名一致，如 UserProfile.spec.js。

• 示例：

  /components
  ├── UserProfile.vue
  ├── UserProfile.spec.js
  

8. 状态管理命名

• Vuex 模块命名使用小写字母，并以“store”结尾，如 userStore.js、productStore.js。

• 状态、getter、mutation 和 action 的命名应清晰且一致，状态使用名词，getter 和 action 使用动词。

  • 示例：状态：user、productList；getter：getUser、getProductList；action：setUser、fetchProducts。

• 示例：

  const state = {
    user: null
  };
  ​
  const getters = {
    getUser: (state) => state.user
  };
  ​
  const actions = {
    fetchUser({ commit }) {
      // Fetch user logic
    }
  };
  

9. API 命名

• API 接口命名应与功能相关，使用小驼峰命名法，如 getUserInfo、updateProduct。

• 将 API 文件按功能分类，如 userApi.js、productApi.js。

• 示例：

  // userApi.js
  export const getUserInfo = () => {
    // API call
  };
  

10. 总结

遵循上述命名规范，能够确保项目结构的清晰性与一致性，从而提升团队的开发效率与代码可维护性。在团队中推广这些标准，并在新成员加入时进行培训，使得每个人都能理解并遵循这些规范，进一步增强团队协作。