游戏陪玩系统,前端项目编码规范有哪些?
游戏陪玩系统,前端项目编码规范有哪些?
开发工具配置规范统一。
首先,请下载使用vscode编辑器,其次,其相关插件及编码配置请手动安装推荐的相关插件实现统一配置,比如 VsCode Snippets 代码片段自动补全文档,优化代码提高编程速度。
项目模版内配置基本的规范统一。
首先遵循eslint基本语法规范 ,执行npm run lint, --fix能自动检测并修复 。
代码提交规范。
1、每次代码提交之前,请确保无任何语法错误、功能性错误等再提交;
2、每次代码提交之时,请写清楚注释, 修改的主要功能一一列出,如git commit -am"1.修改用户管理-新增功能 2. 优化冗余代码";
Js 代码块引号类型为单引号 ‘’
生产环境下禁止代码含断点 debugger 提交
总是使用 =精 确的比较操作符,而少使用“”,避免强类型转换带来的困扰
js 代码尽量使用小驼峰命名, js 事件方法名,多以动词命名,且选取有意义的词,并写清必要的注释。 允许的变量命名和事件方法名如下:
const max = 20; let myFavoriteColor = []; const _myFavoriteColor = '#112C85'; /** * 监听input值变化 * @param val String input输入值 * @param oldVal String input原来旧值 * */ function onInputChangeVal(val, oldVal) {}
不能含有未使用的变量, 未使用请及时删除
不能含有未使用的组件, 未使用请及时删除
不能含有无用的代码块, 未使用请及时删除
同一个项目内的文件结构尽量一致,如
1、样式预编译严格使用 less,避免同时使用多种,造成开发维护困扰。
2、文件命名、静态资源名, 请使用纯小写字母或小写字母和下划线组合。
文件夹或文件(组件)命名:home, layout, file_upload, zixun, zx_service etc. 静态资源名:imgbg.jpg, home_top_img.png, base.css etc.
3、id/class 类名,css 命名组织结构这里采用 BEM 规则。 请使用纯小写字母或小写字母和下划线组合。
BEM 规则: block_element–modifier 语法
Block 块级元素,容器类,如.form .header .top .main;
Element 主要是以 1 个下划线接在 block 之后,来表示从属关系;没有对同一页上其他 blocks/elements 的依赖, 如.form_input;
Modifier 修饰符,主要是以两个中短线连接,block 或 element 上的标记,使用他来改变外观或行为。如:disabled,highlighted,checked,fixed。
布局容器类:
#header, #main, #footer,
.l_left, .l_right, .l_main, .l_list, .l_list_item
模块类:
.module, .mod_list, .mod_title, .mod_bottom, .dialog, .dialog_title,
状态类:
.is_collapsed
.is_clicked
.is_error
.is_success
.is_hidden
/* BEM规则: */ .block { } .block_element { } .block_element--modifier { } .form { } .form_input { } .form_input--checked { } /* Modifier修饰符: */ /* block--modifier_value 语法 */ .button--state_success { } .form--theme_xmas { } .form--simple { } .input--disabled { }
4、尽量使用公用的变量或已封装的混入样式来开发,方便后期维护,公用的文件尽量不要改动。
增加 proxy 本地代理规范,参见 vue.config.js
proxy: { '/api': { target: 'http://192.168.1.1:8080', // 域名+端口号,不能加路径 changeOrigin: true, // 发送请求头中的host会设置成target pathRewrite: {} } }
以上就是游戏陪玩系统,前端项目编码规范有哪些?, 更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2022-01-25 短视频源码,每日任务通过刮卡的方式选择
2022-01-25 短视频软件开发,当用户选择免打扰时,平台自行拦截平台内部消息
2022-01-25 app直播源码,登录时输入验证码、短信验证身份