前端代码规范

原创

一起重学前端

发布于 2024-12-07 21:04:10

6140

“好事”文章推荐：《远程连接利器：玩转MobaXterm》

文章地址：https://cloud.tencent.com/developer/article/2474500

好文介绍：这篇文章作者文章轻松不烧脑，主要是想和大家分享一下我在工作中常用的远程管理MobaXterm，作者通过图文并茂的形式把该工具讲解的很透彻，非常不错，值得推荐！

前端代码规范

文件目录规范

页面主视图写在 pages/[name]/index.js
页面内模块组件，可写在 pages/[name]/[item].js 文件夹，每个文件大于 1000 行请开始拆分
公用组件写在 components/[name]/src 文件夹，在 components/[name]/index.js 引入并外放
全局样式放在 themes，全局 js 放在 utils，请求放在 services，图片放在 asserts
静态文件（不参与 webpack 处理的）放在 src 之外的 public
项目中尽量不使用外网 CDN，会存在挂链风险，需下载放入本地 public 文件夹
主组件为 app.js 或 app.vue，内容主入口为 index.js，启动入口为 main.js（如 electron 或 ssr）

HTML 规范

尽量不要在 html 中写内联样式
input iframe video table 等附件元素推荐包一层 div
不推荐使用过多短而不明 .text2 .w10 的原子类，可有但最好不超过 2 个
vue 事件用连字符，事件回调用驼峰，如： @click-image="handleClickImage"
react 事件与回调都用驼峰，且回调带 handle，如： onClickImage="handleClickImage"
html 中的布局类用连接符 .btn-red，操作类用小驼峰式 .btnSubmit
自定义组件命名大驼峰式 PromotionPanel
尽量多用 h1~h6 dl/dt/dd cite code 等标签，能提升 SEO 效果
通用 <mate> 标签，见附HEAD 标签规范
使用 [target="_blank"] 时推荐带上 [rel="noopener"] 提高安全性

CSS 规范

CSS 中尽量不用 ID 选择器和属性选择器
尽量不要在 js 中操作 style，可通过变化 className 去实现
尽量不要在 CSS 中使用 !important，活用权重覆盖
尽量不要变动修改全局样式，可增加权重另写一段，如 .el-table.el-table-specail
除小程序外，不推荐使用 position: fixed 布局
可以使用 flex 等 CSS3 新属性，但尚不推荐使用 cale currentColor 等属性
滚动容器都需加上 -webkit-overflow-scrolling: touch
省略小于 1 时小数点前的 0，如 0.5px 改为 .5px 等
若数值为 0 推荐不带单位，如 0px 改为 0，除了 0s 0ms
不推荐 svg 作为 background，用 data:image/svg+xml, 也不行，因为不可伸缩
img video 等附件决定高度的元素需写好宽高，或使用自适等比例容器包裹

JS 规范

常量命名全大写 MAX_QUEUE_SIZE
其他变量以小驼峰式命名 itemData
私有变量名，小驼峰式，且首字母前加下划线 _current
函数命名尽量使用 "动词+业务名词+概念名词" 组合，如 getOrderList refreshGoodsPayment
类或组件使用大驼峰，如 TextNode GoodsItem
枚举类型使用大驼峰，如 TypeConfig TargetState
接口入参皆为 params，出参最好为 res
DOM 元素都带有 $ 字样，如 $section $gradeId 等，推荐与其 ID 一致
函数拓展配置的入参都名为 options，如 options.needAtuh，不推荐简写 opts
React 中的 ref 用 <comp ref={ref => (this.$refs = { ...this.$refs, $someCompName: ref })} />
不要使用 type: 0 这种数字等意义不明的状态量，而用 type: "CHOOSE_STUDENT" 等
联动事件，不应与 change 等原生事件混淆，而用函数或 trigger('updateSubjectList') 事件流
每个函数推荐不超过 80 行，如超过请开始拆分
函数参数不得超过 4 个，如超过请使用 options 入参进行拓展；已有代码可用包装器函数处理入参
在链接中传参时，需对可能存在特殊字符的字符串进行 encodeURIComponent，比如 token redirect 等

其他规范

保存操作的接口统一用 post 请求，get 请求会限制 url 的长度
根域名等配置需以 / 结尾，存入的数据不以 / 开头，减少不必要的判断添加
npm 命令不用 start serve 等作为启动命令的命名，推荐以 dev 为名
id 推荐皆用字符串，数据字典皆用正整数
时间戳可能会数字溢出，推荐使用字符串
金钱相关乘以 100 后存储，获取时也是正整数，虽然有溢出风险但多半不会

附`HEAD 标签规范`

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="wap-font-scale" content="no" />
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>Title</title>
    <meta name="keywords" content="your keywords" />
    <meta name="description" content="your description" />
    <meta name="author" content="author,email address" />
    <!--[if lt IE 9]>
      <script>
        alert('您的浏览器版本过低，请更新本版本浏览器，或更换为诸如谷歌浏览器的现代浏览器');
      </script>
    <![endif]-->
  </head>

  <body>
    <div id="app"></div>
    <script src="./xx.js"></script>
  </body>
</html>

未完待续，持续更新中...

感谢关注点赞评论~

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

代码规范

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

代码规范

前端

登录后参与评论

0 条评论

热度

前端代码规范

前端代码规范

前端代码规范

文件目录规范

HTML 规范

CSS 规范

JS 规范

其他规范

附`HEAD 标签规范`

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

前端代码规范

前端代码规范

前端代码规范

文件目录规范

HTML 规范

CSS 规范

JS 规范

其他规范

附HEAD 标签规范

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

附`HEAD 标签规范`