代码规范及问题总结

bsp代码问题

1. 代码整齐规范，template缩进，容器嵌套不要写的太复杂，不要写多余标签，容器组件尽量不要写死宽高度，使用flex布局和栅格布局el-row、el-col进行自适应

   
   image.png

2. 组件分割，一个页面多个dialog对话框时一定要分出来，代码逻辑关联不大，数据交互不强的组件进行分离

父组件中传入对话框显示隐藏控制flag，传入关闭对话框回调函数

父组件

子组件定义props时添加注释
监听对话框flag，重新打开对话框时更新数据

dialog子组件

3.dialog对话框高度较高时，设置top=20让对话框固定到顶部，

image.png

3. for in、for of 与foreach、map
   for in遍历对象
   for of遍历数组
   foreach遍历数组，不可return和break
   map遍历数组，必须return，.map()方法直接对数组的每个元素进行操作，返回相同数组长度的数组；其他方法可扩展数组的长度

4. if非空判断

   
   

// if判断语句中会做类型转换
      if (!this.listQuery.hospId) {
        this.$message.error('请先选择一家医院!')
        return
      }

5. 不使用switch语句

   
   switch语句

        // 定义一个映射的map对象或数组，然后返回对应值
        const statusMap = ['禁用', '正常', '执行中']
        let status = ''
        status = statusMap[val] || '初始化'
        return status

        this.temp2[element.extendName] = element.extendValue

6. 使用过滤器来改变template中显示信息

   
   过滤器使用

     filters: {
      getAttrListNames(attrList) {
        return _.map(attrList, element => {
          return `${element.attrTypeName}(${dayjs(element.attrAt).format('MM-DD')})`
        }).join('、')
      }
    },

7. data中初始值设置，对象设置为{},数组设置为[]，不要使用null，经常会报错。

   
   data初始值

8. 表单新增时清空字段

this.$refs['dataForm'].resetFields()

代码规范及样式推荐

1. 边距margin、padding统一，大边距使用16px，小边距使用8px

2. 宽高度尽量自适应，不要写死，否则不同屏幕分辨率下会出现滚动条
   高度使用 height:calc(100vh - 200px) 计算

3. 尽量不使用浮动和绝对布局，因为会脱离文档流，导致父元素高度撑不开，同时会影响其他元素的布局
   使用浮动时，父节点添加清楚浮动样式： class="clearfix"

image image

4. 控件大小规格统一，如size=medium、size=small、size=mini

5. 组件template长度应该控制在150行内，如果长度超长，需要考虑抽离子组件

6. 样式风格统一，表格列一般不要居中显示，表格列宽度设置，如果是固定宽度的就写死

7. 组件中日期处理使用全局过滤器

{{ scope.row.checkDate | dateFormat('YYYY-MM-DD') }}

​

8. 弹窗新增修改表单

image.png

js常用对象方法

js对象标准库

Object对象

1. Object.keys() 获取对象所有key值

var obj = {
  p1: 123,
  p2: 456
};
Object.keys(obj) // ["p1", "p2"]

2. Object.defineProperties() 在一个对象上定义新的属性或修改现有属性，并返回该对象。

var obj = Object.defineProperty({}, 'p', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});

obj.p // 123

obj.p = 246;
obj.p // 123

3. Object.assign() 拷贝对象

var obj = Object.assign({},obj1,obj2); // 浅拷贝

Array对象

1. join()

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

2. slice()

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]

3. splice()

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]

4. sort()

var a = [
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
]
a.sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

5. map()

var numbers = [1, 2, 3];
var newNums = numbers.map(function (n) {
  return n + 1;
});
newNums // [2, 3, 4]

6. forEach()
   不能return不能break
7. filter()

var a= [1, 2, 3, 4, 5]
a=a.filter(function (elem, index, arr) {
  return index % 2 === 0;
});
a // [1, 3, 5]

String对象

1. slice() substr()

'JavaScript'.slice(0, 4) // "Java"

2. split()

'a,b,c'.split(',') // ["a", "b", "c"]