JunXian Sun

Vue 组件命名

组件命名

组件的命名需遵从以下原则：

  • 有意义，可读性：不过于抽象晦涩命名
  • 组件名多个单词：2-3个，尽量不要过长
  • 符合自定义元素规范：使用连字符分隔单词，切勿使用保留字。
  • 命名遵循PascalCase约定。

约定规范（含官方）：

1，组件文件夹/文件名一律采用PascalCase(大驼峰)写法。

  • 原因：

    • 引入组件时，组件的变量通常用PascalCase格式，以便区别于一般变量
    • 组件文件名与变量名一致，方便对应，结构清晰。
        components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SetingCheck.vue
    |- SetingCheckStartUp.vue

    ※避免新建多个文件夹，多级目录，把对应组件放到对应目录里：

    1，在多级目录间找来找去，要比在单个components目录下滚动查找要花费更多精力。

    2，存在组件重名（比如存在多个add组件）的时候在编辑器里更难快速定位。

    3，让重构变得更困难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不搞笑

2，组件名应该始终是多个单词的，根组件 App 除外。（官）

    • html元素都是单个单词的（如h5标签<article>,<header>)，为了区分组件和一般html元素
    • 组件由多个单词组成，如InfoItem.vue，单独的Info.vue不推荐。

3，遵循 kebab-case 约定（官）

在页面中使用组件需要前后闭合，并以短线分隔，如：

  <muti-menu></muti-menu>
  <muti-menu-left></muti-menu-left>

4，jS/JSX 中的组件名使用PascalCase （官）

  • 原因：

    • 在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串.

    例子：

    import { OrganInfo } from './OrganInfo.vue'
export default {
  name: "OrganInfo"
  }

5， prop 命名用 camelCase，在模板和 JSX 中用 kebab-case。 （官）

  • 原因：
    • html中的特性名是大小写不敏感的（标签和属性忽略大小写的），浏览器会把所有大写字符解释为小写字符。所以在Dom中使用驼峰命名的prop名不好使了。
    props:{
  greetingText:String
}

<WelcomeMessage greeting-text></WelcomeMessage>

6，和父组件紧密耦合的子组件以父组件名作为前缀命名（官）

  components/
  |- SearchSidebar.vue
  |- SearchSidebarNavigation.vue

7，在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀（或使用模块 作用域，保证不允许外部访问的函数的私有性）（官）

  • 原因：
    • 推荐使用$_，作为一个自定义的私有属性的约定，以确保不会和 Vue 自身相冲突。
    //第一种
  var optGreatMixin = {
    methods:{
      $_optGreatMixin_updata:function(){
        //body....
      }
    }
  }
   //第二种
    var optGreatMixin = {
      methods:{
        //启用
        publicMethod(){
          optGreatFunc()
        }
      }
    }
    function optGreatFunc(){
      //body....
    }
    export default optGreatMixin

其它命名

1，采用语义化单词组合

  • 不允许通过1,2,3等序号进行命名
  • id用标识模块或父容器区域，名称唯一，不要随意新建id。
  • 规则名称中不应该包含颜色、定位等与具体显示效果相关的信息

2，id/class命名

  • id：采用“小驼峰命名法”

例：myStudent：变量myStudent第一个单词是全部小写，后面的单词首字母大写。

  • class：采用“中划线法命名法”,不要太长

例：print-employ

  • id和class命名越精简越好，只要足够表达意思，这样有助于理解

.excep_box_inside_con{} /* 不推荐 */

.excep_inside{} /* 推荐 */

3, 重要的点击操作按钮加id。

具体待补充

4， methods 命名规范

  • → 驼峰式命名,例如：
    getListData、postFormData
  • 附： 函数方法常用的动词:
    get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

其它待补充

← 官方规范 →