近期 Code Reivew 小结（一）
Programming
在编写代码时，同一页面或相同功能的变量名的命名前后要保持一致
// bad
const getAHtml = () => {}
const getBJsx = () => {}
const aClassName = 'button'
const bStyle = 'button-red'
// good
const getAHtml = () => {}
const getBHtml = () => {}
const getAJsx = () => {}
const getBJsx = () => {}
// React 中，Style 有其 inline-style 的意义
const aClassName = 'button'
const bClassName = 'button-red'
magic number 应提出为变量，不要 hard code
const chanceCount = serverResponse.count
// bad
if (chanceCount > 3) {
doSomething()
}
// good
const MAX_CHANCE_COUNT = 3
if (chanceCount > MAX_CHANCE_COUNT) {
doSomething()
}
涉及到灰度的代码，应该考虑如下情况
- 灰度期间有迭代需求，减少在多个地方增添相同的代码，尽可能减少维护成本
- 在灰度切 0 或 全量 后，方便移除冗余代码
- 尽可能的不改动交互代码，减少出现 Bug 的几率
React
由于 JSX 的特殊性，可能导致 render 函数内嵌套过多逻辑与模板的拼接，建议切分出子组件或子函数
// bad
class Component extends React {
render() {
return (
list.map((item) => (
<div>
<img />
<div>
</div>
</div>
))
);
}
}
// good
class Component extends React {
render() {
return (
list.map((item) => (
this.renderItem(item)
))
);
}
renderItem(item) {
return (
<div>
<img />
<div>
</div>
</div>
);
}
}
对于 JSX 语法，建议使用 自闭合 标签
// bad
<div role="button" ></div>
// good
<div role="button" />
React Spread Attributes
// wrong
const props = {
show() {
this.isShow = true;
},
};
<Component {...props} />
// good
const props = {
show: () => {
this.isShow = true;
},
};
const hide = () => {
this.isShow = false;
};
<Component {...props} hide={hide} />
炫技
由于 JSX （本质上是 JS Expression）的存在，导致一些在 JSX 合法的语法（常规 JS 代码中合规但显得怪异）会直接出现在常规 JS 语法中，最常见的是 && 。
而在常规 JS 代码中除了减少怪异的语法外，也应避免过度炫技，简单的 if else 就可以简单的表达思想。
// bad
const trueFlag = true
trueFlag && doSomething()
if (!trueFlag) {
doOther()
} else {
doOthers()
}
// good
if (trueFlag) {
doSomething()
doOthers()
} else {
doOther()
}
CSS
- iOS9 不支持
min-width: auto，需要覆盖时，推荐min-width: unset或者min-width: 0 - 写布局 CSS 时，要想一想究竟用不用
flex，想一想布局元素
JavaScript
DOM
parseInt(window.getComputedStyle(groupContainerDom).marginTop, 10)
Array.map
Array.map 方法本质上是 映射（a => map => b），在 JS 中常应用于 函数式 编程，达到切断的目的，避免副作用 。
在实际的使用过程中，避免如下使用：
// bad
const array2 = array.map((item, index) => {
item.index = index
return item
})
// good
const array2 = array.map((item, index) => Object.assign({}, item, {
index,
}))
以上。