Loading...
墨滴

暮北林

2021/11/01  阅读:37  主题:橙心

1+N前端开发注意事项

统一使用两个空格的缩进
统一使用Prettier插件进行格式化代码

    1. 对象变量一定要有对应的字段
// bad
data() {
  return {
    form: {

    }
  }
}
// good
data() {
  return {
    form: {
      name"",
      age0
    }
  }
}
    1. 自定义form校验一定要有callback调用 Form表单一律使用UI框架自带的校验
// bad
const validator = (rule, value, callback) => {
  if (someThing) {
    return callback(new Error("校验失败"));
  }
}

// Good
const validator = (rule, value, callback) => {
  if (someThing) {
    return callback(new Error("校验失败"));
  } else {
    callback();
  }
}
    1. 按钮触发接口请求的一定要加Loading
// Bad
<el-button @click="addUserHandler">添加用户</el-button>
methods: {
  addUserHandler() {
    /
/ TODO... add user request
  }
}
/
/ Good
<el-button @click="addUserHandler" :loading="addUserLoading">添加用户</
el-button>\
data() {
  return {
    addUserLoadingfalse
  }
},
methods: {
  addUserHandler() {
    this.addUserLoading = true;
    axios.post(url).then(res => {
      this.addUserLoading = false;
    }).catch(_ => {
      this.addUserLoading = false;
    })
  }
}
    1. 不到万不得已不能使用$ref调用子/父组件方法
// bad
this.$refs["children"][0].initForm();

// good
通过事件传递来调用
    1. 引入组件或模块使用alias
//bad 
// 文件路径 src/router/baseCom/a.vue src/router/baseCom/b.vue 在B中引用A
import A from ../../baseCom/a.vue


// good
如果只有当前组件/页面用到的组件  直接引用当前路径就好 import ./a.vue
如果是公共组件则应放到component下 使用alias引用
import A from @com/baseCom/a.vue
    1. props不要使用数组方式 要有对应的校验
// bad 
props: ["color""size"]

// good
props: {
  color: {
    typeString,
    requiredtrue,
    validatorvalue => {
      return value.startWith("#");
    },
    default_ => { // 当type为object或者Array是defalut必须是函数
      return "#2dabff";
    }
  },
  size: {
    typeString,
    requiredfalse,
    default_ => {
      return "small";
    }
  }
}
    1. v-for一定要设置key的值
// bad
<li v-for="todo in todos">
  {{ todo.text }}
</li>

/
/ good
<li
  v-for="todo in todos"
  :key="todo.id">
  {{ todo.text }}
</
li>
    1. 关于多媒体元素的样式没有明确大小的前提下要有限制
<img class="avatar" src="somepath" alt="头像"/>

// bad
.avatar {
  width60px
}

// good
.avatar {
  width60px;
  height: auto;
  max-height: 60px;
}
    1. HTML/template中不能写复杂逻辑
// bad 这样会让结构不清晰而且不能进行复用
<div v-if="(user.name && user.age) || user.wieght"></div>

/
/ good 是由计算属性或者函数
<div v-if="showInfo"></
div>

cumputed: {
  /**
   * @description 是否显示用户信息
   */
 
  showInfofunction({
    let { name, age, weight } = this.user;
    return (name && age) || wieght;
  }
}
    1. 接口数据要做兼容处理, 和对应接口负责人约定好数据结构
// bad
axios.post(requestUrl).then(res => {
  // res = { data: null }
  let data = res.data;
  data.forEach(...);
})

// good  
axios.post(requestUrl).then(res => {
  let data = res.data || [];
  data.forEach(...);
})

Number 类型默认为0 数组类型默认为 [] 对象默认为{}
    1. 和数字相关的一定要明确min max及小数位
    1. 文件上传相关要明确类型、大小
    • 12.1 除video能播放的类型外其余一律不能判断大小

暮北林

2021/11/01  阅读:37  主题:橙心

作者介绍

暮北林