编码规范

CSS

命名原则：用_隔开，例如block_element
层级问题：不要多于三层
1. 少用通配符和属性选择器
2. 不要使用类选择器或者ID选择器来修饰元素标签
3. 不使用css表达式
高性能样式少用，如box-shadows和border-radius和transform之类的
减少重绘和重排
1. 使用visibility代替display:none
2. 少使用**table**布局，对于table的任何一点小的改变，都会让整个table重新布局
3. css选择器不要嵌套太深，因为他是从右往左去匹配的

JavaScript

命名原则

普通变量，使用小驼峰法let useName = "Jack"
语义是复数的，命名加s，let names = []
每一个常量都需要表示，且大写
函数命名规范
1. can：是否可以执行某个动作
2. has：是否含有某个值
3. is：判断是否为某个值
4. get：获取某个值
5. set：设置某个值

字符串

使用单引号，不使用双引号
字符串拼接，不使用加号，使用模板字符串

javascript

function sayHello(name){
  return `how are you,${name}`
}

数组

初始化的时候，不需要使用new Array(),直接赋值即可

用扩展运算符做数组浅拷贝

javascript

// bad
let arr = [1, 2, 3]
const len = arr.length
const copyArr = []
for (let i = 0; i < len; i += 1) {
  copyArr[i] = arr[i]
}
// good
const copyArr = [...arr]

用Array.form将类数组转化为数组

使用数组解构

javascript

const [a,b,...c] = [1,2,3,4]
// a:1
// b:2
// c:[3,4]

对象

对象初始化，直接赋值

属性简写,并且将属性的缩写放在对象的开头

javascript

const luke = 'luke'
// bad
const obj = {luke:luke}
// good
const obj = {luke,anakin:kin}

对象拷贝使用扩展运算符。扩展运算符获取对象指定的几个属性时，也是...(兜底)

javascript

const origin = {a:1,b:2}
// 对象增加属性，不改变原对象
const copy = {...origin,c:3}
// 获取不包含b的对象
const {b,...noB} = copy // b:2 noB = {a:1,c:3}

函数

场景：函数参数可能会空，需要为参数设置默认值，不建议使用判断赋值

javascript

// bad name可能不存在，如果不存在，那么赋值为username
function fn1(name){
  let username = name || 'Jack'
}
// good
function fn1(name = 'Jack'){
  let username = name
}

函数参数不要超过两个！如果超过了，就用对象将需要传递的参数包裹起来，到时候解构赋值取用

javascript

// good
function createMenu({ title, body, buttonText, cancellable }) {
  ...
}
createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true,
})
// bad
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

默认参数放在参数列表最后
多使用箭头函数

模块

使用import
一个入口import一次
使用默认导出export default

Vue

defineProps

INFO

props最好规定到类型，以及默认值

javascript

const props = defineProps({
  outStockVisible: {
    type: Boolean,
    default: false,
  },
  projectCode: {
    type: String,
    default: ''
  }
})

v-for遍历必须添加key
使用计算属性来计算一些state，而不是直接使用插值表达式写

新建组件时，组件名为多个单词，不应该是一个单词

vue

  // vue3会自动解析文件，所以当创建文件的时候，组件名字就要写好
  // good
  Vue.component('todo-item', {
  // ...
  })
  export default {
  name: 'TodoItem',
  // ...
  }
  // bad
  Vue.component('todo', {
  // ...
  })
  export default {
  name: 'Todo',
  // ...
  }

多个属性分行写，不要将所有属性都写在一行
元素props的顺序
1. 原生属性**class,id,ref**和**title,src,href,max,min**
2. 指令**v-model,v-bind,v-for,v-if**
3. 传参**props传参，foo = 'a' bar = 'b'**
4. 方法
组件内的样式，统一设置style scope

修改组件库样式，那么需要加上顶级作用域(当前的上面的父组件的class)

css

/* bad */
.ivu-input {
  width: 254px !important;
}
/* good */
.customerForm .ivu-input {
  width: 254px !important;
}
/* .customerForm为当前组件的顶级dom  */

script内的放置顺序
1. name(设置组件名)
2. componets
3. data
4. methods
5. computed
6. watch(监听事件)
7. created
8. mounted
9. update
定时器即时消除

一个函数只做一件事情，如果函数里有多个逻辑，那么分开

vue

// bad
methods: {
  getList1() {
    // to do ...
  },
  getList2() {
    // to do ...
  }
},
created() {
  this.getList1()
  this.getList2()
},
// good
methods: {
  // 将全部的请求行为聚合在init函数中
  init() {
    this.getList1()
    this.getList2()
  },
  getList1() {
    // to do ...
  },
  getList2() {
    // to do ...
  }
},
created() {
  this.init();
}

第三方组件按需引入

图片

多使用精灵图
INFO
使用background-position来确定展示图片的位置，避免每次图片都需要http请求，减少请求。
多使用字体iconfont
图片懒加载
1. vue项目中可以使用vue-lazyload
2. 使用vueuse，利用useIntersectionObserver判断是否进入视口区域，然后在发送请求

参考链接：

vue3.0项目- 利用@vueuse/core实现组件数据懒加载 - 掘金

vue-lazyload

国际化

工具
1. react+react-intl
2. vue+vue-i18n
参考链接：React Intl: 将你的React应用程序国际化 - 掘金
使用构建工具+一个通用的翻译函数去完成前端国际化
翻译函数：di18n-translate

编码规范 ​

CSS ​

JavaScript ​

命名原则 ​

字符串 ​

数组 ​

对象 ​

函数 ​

模块 ​

Vue ​

图片 ​

国际化 ​

编码规范

CSS

JavaScript

命名原则

字符串

数组

对象

函数

模块

Vue

图片

国际化