bsp代码问题
-
代码整齐规范，template缩进，容器嵌套不要写的太复杂，不要写多余标签，容器组件尽量不要写死宽高度，使用flex布局和栅格布局el-row、el-col进行自适应
image.png
-
组件分割，一个页面多个dialog对话框时一定要分出来，代码逻辑关联不大，数据交互不强的组件进行分离
父组件中传入对话框显示隐藏控制flag，传入关闭对话框回调函数
父组件
子组件定义props时添加注释
监听对话框flag，重新打开对话框时更新数据
dialog子组件
3.dialog对话框高度较高时，设置top=20让对话框固定到顶部，
image.png
-
for in、for of 与foreach、map
for in遍历对象
for of遍历数组
foreach遍历数组，不可return和break
map遍历数组，必须return，.map()方法直接对数组的每个元素进行操作，返回相同数组长度的数组；其他方法可扩展数组的长度 -
if非空判断
// if判断语句中会做类型转换
if (!this.listQuery.hospId) {
this.$message.error('请先选择一家医院!')
return
}
-
不使用switch语句
switch语句
// 定义一个映射的map对象或数组，然后返回对应值
const statusMap = ['禁用', '正常', '执行中']
let status = ''
status = statusMap[val] || '初始化'
return status
this.temp2[element.extendName] = element.extendValue
-
使用过滤器来改变template中显示信息
过滤器使用
filters: {
getAttrListNames(attrList) {
return _.map(attrList, element => {
return `${element.attrTypeName}(${dayjs(element.attrAt).format('MM-DD')})`
}).join('、')
}
},
-
data中初始值设置，对象设置为{},数组设置为[]，不要使用null，经常会报错。
data初始值
-
表单新增时清空字段
this.$refs['dataForm'].resetFields()
代码规范及样式推荐
-
边距margin、padding统一，大边距使用16px，小边距使用8px
-
宽高度尽量自适应，不要写死，否则不同屏幕分辨率下会出现滚动条
高度使用height:calc(100vh - 200px)计算 -
尽量不使用浮动和绝对布局，因为会脱离文档流，导致父元素高度撑不开，同时会影响其他元素的布局
使用浮动时，父节点添加清楚浮动样式：class="clearfix"
image
image
-
控件大小规格统一，如size=medium、size=small、size=mini
-
组件template长度应该控制在150行内，如果长度超长，需要考虑抽离子组件
-
样式风格统一，表格列一般不要居中显示，表格列宽度设置，如果是固定宽度的就写死
-
组件中日期处理使用全局过滤器
{{ scope.row.checkDate | dateFormat('YYYY-MM-DD') }}
- 弹窗新增修改表单
image.png
js常用对象方法
Object对象
- Object.keys() 获取对象所有key值
var obj = {
p1: 123,
p2: 456
};
Object.keys(obj) // ["p1", "p2"]
- Object.defineProperties() 在一个对象上定义新的属性或修改现有属性，并返回该对象。
var obj = Object.defineProperty({}, 'p', {
value: 123,
writable: false,
enumerable: true,
configurable: false
});
obj.p // 123
obj.p = 246;
obj.p // 123
- Object.assign() 拷贝对象
var obj = Object.assign({},obj1,obj2); // 浅拷贝
Array对象
- 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"
- 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"]
- 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]
- 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 }
// ]
- map()
var numbers = [1, 2, 3];
var newNums = numbers.map(function (n) {
return n + 1;
});
newNums // [2, 3, 4]
- forEach()
不能return不能break - filter()
var a= [1, 2, 3, 4, 5]
a=a.filter(function (elem, index, arr) {
return index % 2 === 0;
});
a // [1, 3, 5]
String对象
- slice() substr()
'JavaScript'.slice(0, 4) // "Java"
- split()
'a,b,c'.split(',') // ["a", "b", "c"]
网友评论