前端学习01

JavaScript

在使用变量之前，必须进行判空，必要的时候还要进行类型判断；若是对象可以采用可选链

// 正例
let a, b, c;

a = res?.data?.data?.a;

if (!!a) {
  b = JSON.parse(a);
}

if (Array.isArray(b)) {
  c = b.includes("1");
}

必须对接口报错进行处理，至少需要进行错误提示

// 正例
function fetchUser (userId) {
    return fetch(`/xxx/xxx/${userId}`);
}

// Promise的实现
function updateUserInfo (userId) {
    fetchUser(userId).then(res => {
        if (res.data.success) {
          doSuccessAction();
        } else {
          const errorInfo = res.data.error || "系统异常，请联系管理员";
          this.$Message.error(errorInfo);
        }
    }).catch (error => {
        this.$Message.error(error);
    });
}

// async/await的实现
async function updateUserInfo (userId) {
    try {
        const res = await fetchUser(userId);
        if (res.data.success) {
          doSuccessAction();
        } else {
          const errorInfo = res.data.error || "系统异常，请联系管理员";
          this.$Message.error(errorInfo);
        }
    } catch (error) {
        this.$Message.error(error);
    }
}

拒绝硬编码值；拒绝【魔法数字和字符串；】

// 反例
<template>
  <section class="demo-page">
    <span v-if="status === '0'">待付款</span>
    <span v-if="status === '1'">待发货</span>
    <span v-if="status === '2'">待收货</span>
    <span v-if="status === '3'">待评价</span>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        status: "0",
      };
    },
    ...
  }
</script>
// 正例
<template>
  <section class="demo-page">
    <span>{{ statusMap[status] }}</span>
  </section>
</template>
<script>
  import { getStatusMapApi } from "@/api/index";
  export default {
    data() {
      return {
        status: "0",
        statusMap:{}
      };
    },
    mounted() {
      getStatusMapApi().then(res => {
        /* {
        	"0": 待付款,
        	"1": 待发货,
        	"2": 待收货,
        	"3": 待评价,
        } */
        this.statusMap =  ...
      })
    }
  }
</script>

禁止单个vue文件超过1000行，尽量500行；禁止复制黏贴超20行的代码

只要有充分理由，可以灵活应变。不断地去抽象，去提炼，去封装，也是很考验开发者的功力，很有助于我们的成长。

路由组件一定要存在name，确保keep-alive生效

的include和 exclude prop 允许组件有条件地缓存。匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

在使用every和some方法的时候记得排除空数组

every返回始终为true；some返回始终为false

let a = [];
if (a.length > 0) {
	a.every(i => { ... })  // true
	a.some(i => { ... })  // false
} else {
	...
}

对象浅拷贝，分清扩展运算符和Object.assign的区别

let aa = { a : 1, b : 2, c : 3};
// 解法1
let bb = Object.assign({}, aa, {d : 4});
// 解法2
let cc = {...aa, d : 4};
// 修改aa
delete aa.a;
console.log(bb);  // {a: 1, b: 2, c: 3, d: 4}
console.log(cc);  // {a: 1, b: 2, c: 3, d: 4}

🤡在mounted或created阶段获取路由信息

凡是组件命名相关都采用大驼峰(PascalCase)形式

console.group() / console.groupEnd();

console.log("iteration");
for (var firstLevel = 0; firstLevel < 2; firstLevel++) {
  console.group("First level: ", firstLevel);
  for (var secondLevel = 0; secondLevel < 2; secondLevel++) {
    console.group("Second level: ", secondLevel);
    for (var thirdLevel = 0; thirdLevel < 2; thirdLevel++) {
      console.log("This is third level number: ", thirdLevel);
    }
    console.groupEnd();
  }
  console.groupEnd();
}

https://hughfenghen.github.io/fe-basic-course/js-data-process/#进阶

https://www.runoob.com/w3cnote/js-45-tips.html

https://blog.csdn.net/fifteen718/article/details/104200586

https://juejin.cn/post/7063345992951103495
https://www.cnblogs.com/xjnotxj/p/11727082.html