CRMEB 开源商城前端命名规范实践：多端适配的代码命名策略

以 CRMEB 开源版本为例，其基于 ThinkPHP6+elementUI+Uni-app 框架开发，全开源无加密，支持微信小程序、公众号、H5、APP、PC 端适配与数据同步，是为开发者量身打造的极易二次开发的 PHP 开源商城系统。在 CRMEB 的前端开发中，规范的命名体系是保障多端代码一致性、可维护性和可复用性的重要基础。以下从项目文件、Vue 组件到代码参数的完整命名规范，将帮助开发者在 CRMEB 框架下高效构建多端应用。

一、项目文件命名规范：清晰组织多端资源

CRMEB 商城前端项目采用统一的文件命名规则，确保在微信小程序、H5、APP 等多端环境中，项目结构清晰可辨，资源管理便捷高效。

1.1 项目与目录命名

  • 项目名：全部采用小写方式，以短横线分隔，如 CRMEB 商城的前端项目命名为crmeb-mall-frontend。

  • 目录名：参照项目命名规则，复数结构采用复数命名法。在 CRMEB 的 PC 端前端项目中，典型目录结构如下：

     
    crmeb-mall-frontend/
|- public         // 静态页面目录
|  |- index.html  // 项目入口
|- src            // 源码目录
|  |- api         // 各端统一的HTTP请求目录（适配微信小程序、APP等多端接口）
|  |- assets      // 静态资源目录
|  |  |- img      // 多端共用图片资源
|  |- components  // 跨端可复用组件
|  |- views       // 页面目录，按业务模块划分（如商品、订单、用户等）
|  |- utils       // 多端工具函数，如日期处理、数据格式化

    CRMEB 实践：在 CRMEB 的 PC 端项目中，src/views/product目录存放商品相关页面，src/components/base目录存放如BaseButton.vue、BaseTable.vue等基础组件，确保多端开发时组件的一致性和复用性。

1.2 静态资源命名

  • 图像文件名：小写字母，多个单词以下划线分隔，如 CRMEB 商城的头部 logo 命名为logo_crmeb.png，商品分类图标为icon_category.png。

  • HTML/CSS/JS 文件名：

    • HTML 文件：order_detail.html（订单详情页）、user_profile.html（用户资料页）。
    • CSS 文件：采用短横线分隔，如base-style.scss（基础样式）、product-list.css（商品列表样式）。
    • JS 文件：api-request.js（接口请求工具）、date-utils.js（日期工具函数）。

CRMEB 实践：在 CRMEB 的 PC 端前端中，公共样式文件src/assets/scss/global.scss用于定义多端统一的颜色、字体等样式，工具函数src/utils/request.js封装了适配多端的 HTTP 请求逻辑，命名清晰且功能明确。

二、Vue 组件命名规范：多端组件的清晰分类与组织

在 CRMEB 商城的多端开发中，Vue 组件按功能和业务场景分为基础组件、业务组件等类型，通过规范的命名前缀和结构，提升组件在微信小程序、APP 等不同端的复用性。

2.1 单文件组件命名

  • 单文件组件：采用 PascalCase 命名，首字母大写，如 CRMEB 的商品卡片组件ProductCard.vue、购物车组件ShoppingCart.vue。
  • 单例组件：以The前缀命名，标识唯一性，如 CRMEB PC 端的头部导航TheHeader.vue、侧边栏TheSidebar.vue，这类组件在多端应用中通常每个页面仅使用一次，不接受 prop，专为 CRMEB 商城定制。
  • 基础组件：以Base前缀命名，如BaseButton.vue（基础按钮）、BaseInput.vue（基础输入框），这些组件不掺杂业务逻辑，可在微信小程序、H5 等多端场景中复用。
  • 业务组件：以Custom前缀命名，包含业务逻辑，如CustomProductList.vue（定制化商品列表）、CustomOrderForm.vue（订单表单组件），这类组件针对 CRMEB 商城的特定业务场景开发，可在多端页面中复用但不具备通用性。

2.2 组件关系与命名策略

  • 紧密耦合组件：子组件以父组件名作为前缀，如 CRMEB 的订单列表组件OrderList.vue及其子组件OrderListItem.vue、OrderListItemAction.vue，通过命名体现层级关系，便于编辑器按字母顺序组织文件。
  • 组件名单词顺序：以高级别单词开头，修饰词结尾，如 CRMEB 的搜索相关组件SearchInputKey.vue、SearchButtonSubmit.vue，设置相关组件SettingsAccount.vue、SettingsSecurity.vue，清晰体现组件功能层级。
  • 完整单词命名：避免不常用缩写，如 CRMEB 中使用UserProfileSettings.vue（用户资料设置）而非UserProSettings.vue，确保多端开发团队对组件功能的一致理解。

三、代码参数命名规范：多端逻辑的清晰表达

在 CRMEB 商城的前端开发中，变量、方法、路由等参数的命名需兼顾 JavaScript 语法习惯和多端框架特性，确保代码在微信小程序、APP 等不同环境中的可读性和可维护性。

3.1 变量与常量命名

  • 变量：采用 camelCase，以 “类型 + 对象描述” 方式命名，如：

     
    // CRMEB中商品列表页面的变量命名
let productList = []; // 商品列表数据
let currentPage = 1;  // 当前页码
let isLoading = false; // 加载状态

  • 常量：全大写加下划线，如 CRMEB 中的接口地址、分页参数：

     
    const API_URL = 'http://your-domain/api'; // 多端统一的API地址
const PAGE_SIZE = 10; // 每页数据量
const MAX_RETRY_TIMES = 3; // 接口重试最大次数

3.2 方法与事件命名

  • 方法命名：采用 camelCase，以动词或 “动词 + 名词” 形式，请求数据方法以Data结尾，如：

     
    // CRMEB中商品模块的方法
jumpToProductDetail(id) { // 跳转商品详情页
  // ...
}
getProductListData(params) { // 获取商品列表数据
  return this.$http.get('/products', params);
}
initCart() { // 初始化购物车
  // ...
}

  • 自定义事件：采用 kebab-case，以on+动词形式区分原生事件，如 CRMEB 中购物车组件的事件：

     
    <!-- 父组件 -->
<cart-component 
  @on-add="handleAddToCart"
  @on-remove="handleRemoveFromCart"
  @on-clear="handleClearCart"
/>

<!-- 子组件 -->
this.$emit('on-add', productId);

  • 事件方法：以handle+事件名命名，如：

     
    handleAddToCart(productId) {
  // 处理添加到购物车事件
  this.getCartListData();
}
handleSubmitOrder() {
  // 处理提交订单事件
  // ...
}

3.3 路由与组件命名

  • Vue Router 路径：采用 kebab-case，如 CRMEB 的路由配置：

     
    {
  path: '/product-list', // 商品列表页，清晰解析为product list
  name: 'ProductList',
  component: () => import('@/views/product/ProductList.vue'),
  meta: {
    title: '商品列表',
    requiresAuth: true // 多端统一的权限控制标识
  }
}

  • 模板中组件引用：单文件组件中使用 PascalCase，DOM 模板中使用 kebab-case，如：

     
    <!-- 单文件组件中 -->
<ProductCard :product="currentProduct" />

<!-- DOM模板中 -->
<product-card :product="currentProduct"></product-card>

四、CRMEB 多端开发中的命名实践价值

在 CRMEB 开源商城的前端开发中，统一的命名规范带来以下优势：

  1. 多端代码一致性：无论是微信小程序、APP 还是 PC 端，相同功能的组件、变量和方法采用一致的命名，降低多端开发的学习成本和维护成本。
  2. 高效团队协作：清晰的命名规则让团队成员无需深入代码即可理解功能，尤其在 CRMEB 的开源社区中，统一的命名便于开发者贡献代码和二次开发。
  3. 可复用性提升：基础组件和工具函数的规范命名，使 CRMEB 的组件能在多端场景中快速复用，如BaseButton.vue可同时用于 H5 和 APP 端，减少重复开发。
  4. 代码可维护性：符合逻辑的命名体系让 CRMEB 的代码结构清晰，即使在复杂的多端业务场景下，开发者也能快速定位和修改功能，提升迭代效率。

总结

CRMEB 开源商城的前端命名规范基于 ThinkPHP6+Uni-app 框架特性，结合多端开发场景，从项目文件、Vue 组件到代码参数形成了完整的命名体系。通过这套规范，开发者能在 CRMEB 框架下高效构建微信小程序、公众号、H5、APP、PC 端等多端应用，确保代码的一致性、可复用性和可维护性，充分发挥 CRMEB 全开源、易二次开发的优势，加速电商项目的开发与迭代。

 

附件：https://gitee.com/ZhongBangKeJi/CRMEB

posted @ 2025-06-20 09:42  CRMEB商城定制开发  阅读(43)  评论(0)    收藏  举报