团队开发推荐基本代码规范

思维导图通用前缀动词含义返回值可以执行一定的动作booleanhas包含一定的值booleanis对于一定的情况booleanget是否获取一定的值anyset设置一定的值为空或者修改值改变改变一定的值，一般用来修饰相反的布尔值空或修饰值命名约定中英文camelCase小驼峰命名法PascalCase大驼峰命名法kebab-case短横线连接类型Snake下划线连接类型kebab-case与Snake区别btn-submit/btn_submit前者选择一个词，而后者后者选择整个短语。前者不能作为变量名，后者可以。项目文件名命名方式：kebab-casemy-project-name图片文件名命名方式：Snakemy_pic.jpgCSS文件名命名方式：kebab-casemy-css.cssJS文件名命名方式：kebab-casemy-js.js组件名命名方式:PascalCaseMyComponent.vue单例组件名命名方式：+PascalCase与普通组件命名不同的是，前缀加上The突出了它的独特性。它是一个不接受任何参数的纯组件，即完全独立于父组件components/|-TheGuide.vue|-TheNoticeBar.vue也可以独立放置，前缀目录为components/|-/|-Guide.vue|-NoticeBar.vue前者在使用时可以清楚的知道它的独特性，后者需要从目录结构上了解基本的组件名称命名方式：Base+PascalCase是单例组件的对立组件，不包括纯业务foundation高度抽象的功能组件需要传递特定的参数来实现不同的效果vue|-Box.vue|-Popup.vue前者在使用的时候可以清楚的知道它的唯一性，后者需要从目录结构上理解强耦合的组件名命名方式：父组件Prefix+PascalCase一般情况下，与父元素有强绑定关系的组件，都会以父组件为前缀components/|-List.vue|-ListItem.vue业务组件这类组件一般分为几种情况：复用范围涉及多个pages，放组件根目录components/|-business.vue复用范围仅限于单个页面，放页面目录components/|-index/|-业务属于系列组件，放前缀目录components/|-popup/|-Award|-搜索可以使用命名，一般分为PascalCase和kebab-case，但建议使用与usage相同的名字，方便搜索。声明道具名称时使用Snake，使用时使用kebab-case。//componentprops:{greetingText:String}}路由名称命名方式：Snake//bad{path:/user_info,//user_info被当成一个词，搜索引擎无法区分语义name:UserInfo,component:UserInfo},//good{path:/user-info,//可以解析成用户信息name:UserInfo,component:UserInfo},自定义事件命名方式:kebab-case命名规则:on+动词，需要和原来的区分开来------------------------------------------------this.$emit('on-my-event')不使用驼峰命名法有两个原因：事件名称不会用作变量名或属性名的v-on事件监听器会自动将Dom模板中的全部转为小写，由于HTML不区分大小写，使用驼峰式命名的变量命名方式不易检测：驼峰式命名约定：（系列前缀）+类型+对象描述或属性方法constshowPopupSearch=trueconstshowPopupAward=true常量命名方式：全部大写Snake命名约定：（系列前缀）+类型+对象描述或属性constTIMEOUT=10方法命名方式：驼峰命名约定：动词+名词形式jumpUrlopenPopup一些特殊的方法最好附上类型命名//normalgetData//太通用了直接看数据类型//bettergetRecord//一般可以关联数组类型getList//ORgetXxxAry//关联不了直接带上数据类型缩写getXxxObjgetXxxBolVue2的代码结构遵循一定的功能块规则外部注入自己的数据计算/监控属性生命周期方法exportdefault{name:MyComponent,mixins:[],props:{},data(){return{}},computed:{},watch:{}created(){},mounted(){},destroyed(){},methods:{},}Vue3代码结构是自上而下的，general->focuslogic风格书写建议布局定位属性：display/position/float/clear/visibility/overflow自身属性：width/height/box-sizing/margin/padding/border/border-半径文本属性：颜色/字体/文本装饰/文本对齐/垂直对齐/空白/断字/文本阴影背景属性：背景/框阴影动画/2,3D属性：动画/变换其他属性(CSS3):content/cursor/…