前端开发代码命名规范

须知: 以下均为实际开发中用到的物料与规范,在此留存,会持续完善内容,同时欢迎各位补充!

一.开发与命名规范

• 约定

  • 文件必须添加头部解释说明,用以概括当前文件的主要作用
  • 相同内容的 UI 或者内容被使用 2 次以上,务必封装成组件
  • 临时数据如果过长,必须新建一个 js 用来放置临时数据,如当前页的 data.js
  • 提交代码前务必执行 eslint 校验并自行删除 console 输出,保持代码的整洁度
  • 项目采用懒加载形式,请自行补充 element,eachrt 等依赖的导出值
  • 项目布局尽可能以 flex 布局为主要写法,少用或尽量不用 absolute 等定位方式
  • 编码时尽可能使用 ES 高级操作,如 filter，reduce，some ，every
  • 页面首行需要写注释，来标注当前页面的名称（功能）

• 控件显示隐藏 以 show 开头 如:showOpenDialog

• 条件判断 以 is 开头 如:是否是管理员 isAdmin | 是否开启 isOpen

• 事件 以 handle 开头, 如 @change @input 等事件, @click 除外

• 表单 以 form 结尾, 如 tagForm

• 数组 以 list 开头, 如 listTag

• 对象集合 以 obj 开头,如 objTag

• v-for 循环, 禁止命名为 item 和 index, 应命名为当前循环内容的简称,如: tagItem,tagIndex

• 单独字段,尽可能以 curr 开头, 如:当前搜索 currSearch | 当前活动条目 currActive

• 方法函数内的临时变量,尽量以 temp 开头,如:tempName | tempListValue

• 组件引用时,用绝对路径,如:@/components/xxx.vue ,方便其它页面引入

• 路由 Router

  • 命名 禁止使用大写,统一使用小写,如遇多层含义,以下划线分隔,如: applist | app_list
  • 标题头 必须添加标题头 title
  • 页面引入 必须使用懒加载形式 component()=>import(‘xxx.vue’)

• Echart 图表使用时,必须先写成组件然后再引入到具体的页面中,便于多次利用及代码整洁

• Css 操作

  总体目标是向原子化靠拢，复用性高。 可以参考 Tailwindcss

  • 常用量写入到 base.css 如 margin-left:5px 写为 ml5
  • 样式可先写入到组件内，如多处用到，则需写入到公共文件

二.VsCode 插件扩展

• Auto Close Tag 自动添加结束标签
• Auto Rename Tag 自动重命名标签
• Path Intellisense 路径自动补充
• vscode-icons vscode 图标
• Chinese VsCode 中文
• Easy Sass Less 扩展
• Sass Lint 样式格式化
• Html css Support
• Eslint 代码规范
• KoroFileHeader 头部生成注释说明
• Prettier 代码美化
• Vetur vue | Volar 语法支持
• EditorConfig for VsCode 统一编辑器配置
• CSS Navigation 或者 CSS Peek css自动定位
• 别名路径跳转
• stylus style语言支持

三.前端所需储备知识

未标注的则为现有项目所用到的技术栈

开发框架
  Vue3.x  Vue2.x  
  React16 React17 

工程化
  Webpack4+ Webpack5+
  Vite2.x  Vite3.x  Vite4.x

Ui框架
  ElementUi 和 ElementPlus2.x  (饿了么团队)
  AntDesign (阿里)
  ArcoDesign （字节）

图表
  Echarts5 (百度)
  阿里G系列 F系列

Css语法糖
   sass
   less

开发规范
   Eslint
   Prettier

包管理工具
  npm
  yarn
  nvm（统一管理器）

前端微服务框架
  qiankun(阿里)
  MircoApp(京东)  (还在内测中，先简单了解一下)

跨端开发
   Uniapp
   Flutter3.x （可作为兴趣学习，但不推荐）

Node (学习了解)
   express
   koa2

文档中心
  vuePress
  vitePress

四.家族式设计语言概念(未落地)

概念:

• 品牌定位是基础与核心,可以帮助公司更好的了解市场与了解自己,加深用户对品牌的认知与认同感
• 具体品牌按类型区分,强调专业性的产品要相对保守,纯互联网产品(单品)则突出产品特色

举例:

• 腾讯的 Q 语言，设定了三个基本目标：统一体验，基因体现，社交向善

优点:

• UI 视觉一致性
• 设计原则唯一性
• 提高效率
• 多平台统一
• 软件连续性

实行:

• 基于 element 或 antd 组件进行二次封装,如 Button ,表单,字体等统一格调,减少重复性设计