失眠网 > 没有规矩不成方圆前端代码规范指南

没有规矩不成方圆前端代码规范指南

时间：2019-09-03 04:31:19

相关推荐

没有规矩不成方圆前端代码规范指南

JS代码格式规范

js文件, vue文件, 及jsx文件都遵循eslint规范, 而且在.eslintrc.js 对eslint进行一些配置, 我们遵循业界通用代码规范, 去除一些鸡肋的限制, 详情可见[eslint-rules](/docs/rules/)注意: 我们本地开发时候, 会有eslint进行预检查, 如果有不符合规范的代码, 是不能进行开发的, 我们需统一代码风格, 有时候多一个空格少一个空格都会报错, 可以参考其他上线的案例, 也可以去[eslint-rules](/docs/rules/)详细看看复制代码

vue规范

[vue风格指南](/v2/style-guide/)复制代码

文件名命名

推荐: 文件(文件夹)名单词间隔用“-”隔开，不要采用大小写（因为windows路径不识别大小写）* 例如：item-scroll.jsx、inner-top.vue、class-list/* 有的项目喜欢组件大驼峰方式, 如果保证项目统一性, 可继续保留组首字母大写风格, 如: ItemScroll.js, InnerTop.vue, ClassList/* 有的项目是交接过来的, 里面什么命名都有, 那么新页面, 我们统一用 '-' 来命名, 不要一会儿驼峰, 一会全部大写, 一会中杆那么随意复制代码

方法变量名命名

命名不能随意想咋写咋写, 是为了更好的方便阅读, 保证代码整洁性, 统一性复制代码

类: 大驼峰

function Tab () {}class Scroll () {}复制代码

变量, 函数: 小驼峰,

// 变量简单直接, 不要带有逻辑和动作的意味let count = 10let flag = false// badlet getFlag = true// Boolean 类型推荐加个前缀 islet isCreated = true// 数据拉取推荐加个前缀 getfunction getInfo () {}// 赋值等操作推荐加个前缀 setconst setInfo = function () {}// 如果是事件推荐前面加个on 或 handleconst onTabChange = function () {}const handleScroll = function () {}复制代码

常量: 全部大写, 底杠隔开 '_'

const MAX_LIMIT = 10const LIMIT = 10复制代码

什么时候用私有?

* 私有属性和方法的判断是什么? 为什么有的函数里, 有的就是私有命名, 有的就不是私有命名?* 私有属性外部能否获取到?这是一个应该详细讨论的问题, 私有这个概念是静态语言的概念, js作为动态语言, 需要通过一些插件能在开发阶段实现私有,不过意义不太大, 所以更多私有只能是一个约定.原则: 只要在内部访问, 不对外暴露的都可以叫私有(即使外部可能访问到, 但是不是特意暴露的接口), 平时开发阶段, 不用特意纠结是否私有复制代码

let _a = 1const _getList = () => {}复制代码

错误示例:

const a = 1const a_b = 2const a_B = 3const getinfo = () => {}const MAX_list = 10const 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-文件名--样式名*/<aclass="c-button":class="[`c-button--${type}`,`c-button--${size}`,{'c-button-disabled': disabled,'c-button-plain': plain}]"><textclass="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...}复制代码