css

table-layout:fixed;

• 问题： table 标签，td 设置了宽度，但是未生效，宽度仍会被内容撑开
• 方案： 设置 table标签样式 table-layout: fixed;。
• 原因： table-layout默认值为auto。列宽度由单元格内容设定。

JS

UI展示默认值

• 问题： 判断某个值是否存在展示默认值时，使用 data.key || '-'， 0 被视为了空值。
• 方案： data.key || '-'改为data.key == null ? '-' : data.key
• 原因： 0、NaN、''、undefined、null在转化为Boolean时会转换为false

Array.every

• 问题： 判断数组内每一项是否都符合条件，空数组依然返回true
• 方案： every前加上!!targetArray.length -> !!targetArray.length && targetArray.every(callback)
• 原因： 此方法在空数组时，都会返回true。MDN

JS库

ahooks

useClickAway

• 问题： 如果点击元素外部，没有触发useClickAway传递的回调。
• 方案： 检查被点击元素 onClick 事件是否阻止冒泡。
• 原因： useClickAway 监听了 document 的click 事件。如果阻止了某个元素的冒泡，则监听的事件不会被触发。导致传入的回调也不会被触发。

常见逻辑

根据参数类型执行不同逻辑

• 问题： 为了函数调用的方便性考虑，函数调用往往传入不同类型数据
• 方案： 一般逻辑入口都会判断兼容下不同的数据类型。如果后续过于复杂，内部都会将参数处理成同一种数据类型（string => [string]），然后保持后面逻辑判断的一致性。
• 简单示例：

function toLocaleLowerCase(strings) {
    if (typeof strings === 'string') {
        return string.toLocaleLowerCase();
    } else if (Array.isArray(strings)) {
        return strings.map(string.toLocaleLowerCase);
    } else {
        return strings
    }
}

条件分支执行不同逻辑

• 问题： 条件分支执行不同逻辑，如果每一条逻辑分支都将逻辑写到if的语句后面，可能造成函数过长，并且不利于其它地方对此逻辑的调用
• 方案： 将逻辑的代码块，更改为一个函数
• 简单示例：

前：

const type = 'xxxx';

if (type === 'a') {
    document.body.innerText = 'xxx';
    console.log(a);
} else if (type === 'b') {
    xxxxx
}

后：

const type = 'xxxx';

if (type === 'a') {
    logicA();
} else if (type === 'b') {
    logicB();
}

// 也方便了在 if 语句外调用此逻辑
logicA();

function logicA (xxx = '123') {
    document.body.innerText = xxx;
    console.log(a);
}

function logicB () {
    xxxxx
}