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
复制代码什么时候用私有?
* 私有属性和方法的判断是什么? 为什么有的函数里, 有的就是私有命名, 有的就不是私有命名?
* 私有属性外部能否获取到?
这是一个应该详细讨论的问题, 私有这个概念是静态语言的概念, 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'
