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