内容简介:类: 大驼峰变量, 函数: 小驼峰,常量: 全部大写, 底杠隔开 '_'
js文件, vue文件, 及jsx文件都遵循eslint规范, 而且在.eslintrc.js 对eslint进行一些配置, 我们遵循业界通用代码规范, 去除一些鸡肋的限制, 详情可见[eslint-rules](https://eslint.org/docs/rules/) 注意: 我们本地开发时候, 会有eslint进行预检查, 如果有不符合规范的代码, 是不能进行开发的, 我们需统一代码风格, 有时候多一个空格少一个空格都会报错, 可以参考其他上线的案例, 也可以去[eslint-rules](https://eslint.org/docs/rules/)详细看看 复制代码
vue规范
[vue风格指南](https://cn.vuejs.org/v2/style-guide/) 复制代码
文件名命名
推荐: 文件(文件夹)名单词间隔用“-”隔开,不要采用大小写(因为windows路径不识别大小写) * 例如:item-scroll.jsx、inner-top.vue、class-list/ * 有的项目喜欢组件大驼峰方式, 如果保证项目统一性, 可继续保留组首字母大写风格, 如: ItemScroll.js, InnerTop.vue, ClassList/ * 有的项目是交接过来的, 里面什么命名都有, 那么新页面, 我们统一用 '-' 来命名, 不要一会儿驼峰, 一会全部大写, 一会中杆那么随意 复制代码
方法变量名命名
命名不能随意想咋写咋写, 是为了更好的方便阅读, 保证代码整洁性, 统一性 复制代码
类: 大驼峰
function Tab () { } class Scroll () { } 复制代码
变量, 函数: 小驼峰,
// 变量简单直接, 不要带有逻辑和动作的意味 let count = 10 let flag = false // bad let getFlag = true // Boolean 类型推荐加个前缀 is let isCreated = true // 数据拉取推荐加个前缀 get function getInfo () { } // 赋值等操作推荐加个前缀 set const setInfo = function () { } // 如果是事件推荐前面加个on 或 handle const onTabChange = function () {} const handleScroll = function () {} 复制代码
常量: 全部大写, 底杠隔开 '_'
const MAX_LIMIT = 10 const LIMIT = 10 复制代码
什么时候用私有?
* 私有属性和方法的判断是什么? 为什么有的函数里, 有的就是私有命名, 有的就不是私有命名? * 私有属性外部能否获取到? 这是一个应该详细讨论的问题, 私有这个概念是静态语言的概念, js作为动态语言, 需要通过一些插件能在开发阶段实现私有,不过意义不太大, 所以更多私有只能是一个约定. 原则: 只要在内部访问, 不对外暴露的都可以叫私有(即使外部可能访问到, 但是不是特意暴露的接口), 平时开发阶段, 不用特意纠结是否私有 复制代码
let _a = 1 const _getList = () => {} 复制代码
错误示例:
const a = 1 const a_b = 2 const a_B = 3 const getinfo = () => {} const MAX_list = 10 const obj123456 = {} const item1 = {} const item2 = {} const item3 = {} const Tab = 'a' 复制代码
基础组件示例
/** * 注意: * 自定义事件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等 */ const events = { CLICK: 'click' } /** * 注意: * 自定义组件 一定要在顶部申明, 加上详细注释, 包括事件类型, 传递参数, 参数类型, 参数状态等 * * button组件 * @module components/button * @desc 按钮 * @param {String} [type=default] - 显示类型, 接收 default, primary, danger * @param {Boolean} [disbale=false] - 禁用 * @param {String} [size=large] - 尺寸, 接收 normal, small, large * * @example * <button @click="clickHandle" size="large" type="primary">按钮</button> */ const props = { disable: Boolean, size: { type: String, default: 'normal' }, type: { type: String, default: 'default' } } 复制代码
组件页面示例
/** * 注意: * 基础组件css命名空间为 c- * * 外层容器样式命名 c-文件名 * 子元素样式命名 c-文件名-样式名 * 条件样式命名 c-文件名--样式名 */ <a class="c-button" :class="[ `c-button--${type}`, `c-button--${size}`, { 'c-button-disabled': disabled, 'c-button-plain': plain } ]" > <text class="c-button-text" :class="[`c-button-${type}-text`]" > <slot></slot> </text> </a> 复制代码
业务逻辑页面
/** * 注意: * * 子组件引用和其他引用换行 * 基础组件用c+文件名命名 * 基础模块用m+文件名命名 * 页面子模块用p+文件名命名 * 如果没有用vuex或者redux 页面状态统一入口在父组件, 并加上注释 */ import CWrap from 'components/wrap' import MContainer from 'modules/container' import PNotice from './notice' export default { components: { CWrap, MContainer, PNotice }, data () { return { // 用户信息 user: {}, // 获取本周以上数据 weekScore: {}, // 广播显示文案 broadcastText: {} } } } 复制代码
css命名规范
class 命名 用中杆, 这块得注意, 不能出现, a_b, aB, a_b-c, a_bC 这种奇怪的命名, 应该是 a-b, a-b-c, a-b-c-d 复制代码
// bad .a_b {} .aB {} .a_b_c {} .a_bC {} // good .a {} .a-b {} .a-b-c {} 复制代码
css命名空间规范及其他技巧
less模块化写法 复制代码
@joy-prefix-cls: ~'p-joy-new'; .@{joy-prefix-cls}{ &-wrapper{ position: relative; width: 100%; height: 1772px; background: #ff949c; overflow: hidden; } } 复制代码
将生成如下代码 复制代码
.p-joy-new-wrapper { position: relative; width: 100%; height: 1772px; background: #ff949c; overflow: hidden; } 复制代码
vue中使用css模块化 复制代码
<template> <div :class="`${classPrefix}-wapper`"> 模板内容 </div> </template> const classPrefix = 'p-joy-new' export default { data () { return { classPrefix } } } 复制代码
less 引入文件别名 复制代码
@import '~common/less/var'; .bg { background-image: url('~asstes/images/banner/bg.png') } 复制代码
vue中对assets中的图片文件路径引用 bad 复制代码
<template> <div :class="`${classPrefix}-wapper`"> <img :src="../../assets/images/banner/bg.png"/> </div> </template> 复制代码
good 复制代码
<template> <div :class="`${classPrefix}-wapper`"> <img :src="require('assets/images/banner/bg.png)"/> </div> </template> 复制代码
方法名定义
* 所有绑定事件类的方法统一前缀 on 例如:onOpen、onMessage * 所有后端拉取数据的方法统一前缀 get 例如:getList、getStudentDetail、保存统一前缀save、更新统一前缀update、删除统一前缀delete * 所有内部私有方法统一前缀 _ 例如:_compareTime、_isStudent 复制代码
避免使用"魔数"
代码中所有关于状态, 类型相关的文字的值, 全部使用const声明, 如果是相对中等偏上项目, 声明一个文件, 如: constants/state.js 复制代码
bad // 这个0, 鬼知道是什么意思, 什么时候为0 // 即使项目中加了注释, 那么这个0, 如果在项目多个地方被用到, 就变得难以维护 // 比如: 第一: 状态更改了呢? 修改N个地方的代码, 第二: N个地方写同样的注释 if (this.state === 0) { ... } 复制代码
good // 注意: 每个常量变量需要填写相关注释 // 停止直播 const STOP_LIVE = 0 // 开始直播 const START_LIVE = 1 // 这样后面不管别人看, 还是自己回过头看, 都能明白其中意义, 如果后面项目中状态有修改, 修改一处即可. // 这就是可维护, 可扩展的小案例, 平时不管写业务代码还是通用框架, 多注意些小细节和反思, 就能有很多收获和提高 switch (LIVE_STATE) { case STOP_LIVE: ... break case START_LIVE: ... break ... } 复制代码
以上所述就是小编给大家介绍的《没有规矩不成方圆,前端代码规范指南》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端技术演进(三):前端安全
- 【前端优化】前端常见性能优化
- 【前端学习笔记】前端安全详解
- 前端监控和前端埋点
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。