JS代码格式规范
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
什么时候用私有?
1 私有属性和方法的判断是什么? 为什么有的函数里, 有的就是私有命名, 有的就不是私有命名?
2 私有属性外部能否获取到?
这是一个应该详细讨论的问题, 私有这个概念是静态语言的概念, 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
...
}
日志规范
console.log 项目调试可以使用, 但是不能在项目上线之后, 保留上次无用的console.log, 如 console.log(‘aaaaaaaaaaa’), console.log(’--------bbbb’) 这种, 会影响二次开发人员的开发及相关调试
原则:
1: 项目上线之后, 业务代码中console.log相关全部加注释
2: 在通用库, 函数中, 可以保留部分console.log, 但是需要加入命名空间, 如:
console.log('[axios-service] someKey: ', url, params)
console.log('[inkeSdk] load: ', ...)
console.log('[loadingComponent] show: ', ...)
细节决定成败 一个优秀高级程序员应该遵循如下规范
vue官网风格指南： https://cn.vuejs.org/v2/style-guide/#规则归类
块级作用域：let 取代 var。var命令存在变量提升效用，let命令没有这个问题。
全局常量和线程安全： 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。
字符串：静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
解构赋值：使用数组成员对变量赋值时，优先使用解构赋值。函数的参数如果是对象的成员，优先使用解构赋值。
对象：单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
对象尽量静态化： 一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
数组：使用扩展运算符（…）拷贝数组。使用 Array.from 方法，将类似数组的对象转为数组。
函数：立即执行函数可以写成箭头函数的形式。那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。
模块：import取代require，使用export取代module.exports。如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。如果模块默认输出一个函数，函数名的首字母应该小写。如果模块默认输出一个对象，对象名的首字母应该大写。
三元条件判断：用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。
使用严格等：总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。
联系
新前端技术交流群召集前端技术人，这里有Node.js/Vue.js/React.js/React-Native.js/微信小程序 技术问题交流。欢迎加入！群号：426334209
点击链接加入群聊【前端技术交流群】：https://jq.qq.com/?_wv=1027&k=56akiog