前端代码书写规范

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
 * 按钮
 */
const props = {
  disable: Boolean,
  size: {
    type: String,
    default: 'normal'
  },
  type: {
    type: String,
    default: 'default'
  }
}

组件页面示例

 /**
     * 注意:
     * 基础组件css命名空间为 c-
     *
     * 外层容器样式命名 c-文件名
     * 子元素样式命名 c-文件名-样式名
     * 条件样式命名 c-文件名--样式名
     */
     
    
      
        
      
    

**业务逻辑页面**
/**
* 注意:
*
* 子组件引用和其他引用换行
* 基础组件用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模块化

 
 
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

good

方法名定义

所有绑定事件类的方法统一前缀 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