航天员|如何编写高质量 JavaScript 代码( 四 )

// 可扩展匹配值 if (animals.includes(animal)) { // todos function bar(options) { // 可扩展任意参数bar({ gender: \"male\" name: \"james\" age: 36)

第三点：避免副作用
当函数产生了除了“接收一个值并返回一个结果”之外的行为时，就产生了副作用。副作用不是说一定是有害的，但是如果在项目中没有节制的引起副作用，代码出错的可能性会非常大。
建议尽量不要去修改全局变量或可变对象，通过参数和return完成需求。让函数成为一种纯函数，这样也可使代码更容易被测试。
// badlet fruits = \"Apple Banana\"function splitFruits() { fruits = fruits.split(\" \")function addItemToCart(cart item) { cart.push({ item data: Date.now() )// goodlet fruits = \"Apple Banana\"function splitFruits(fruits) { return fruits.split(\" \")function addItemToCart(cart item) { return [...cart { item data: Date.now()

第四点：整合逻辑关注点
当项目过于复杂的时候，经常会把各种逻辑混在一起，对后续扩展非常不利，而且还影响对代码的理解。所以尽量把相关的逻辑抽离到一起，进行集中式的管理。像React中的hooks ， Vue3中的Composition API都是采用这样的思想。
// badexport default { name: 'App' data(){ return { searchHot: [
searchSuggest: [
searchHistory: [
mounted() { // todo hot // todo history methods: { handleSearchSuggest(){ // todo suggest handleSearchHistory(){ // todo history // goodexport default { name: \"App\" setup() { let { searchHot= useSearchHot() let { searchSuggest handleSearchSuggest= useSearchSuggest() let { searchHistory handleSearchHistory= useSearchHistory() return { searchHot searchSuggest searchHistory handleSearchSuggest handleSearchHistory function useSearchHot() { // todo hotfunction useSearchSuggest() { // todo suggestfunction useSearchHistory() { // todo history

除了以上介绍的四点建议外，还有很多可以改善代码健壮性的点，如：异常处理、单元测试、使用TS替换JS等等。
最后总结一下，如何编写高质量JavaScript代码：
易阅读的代码高性能的代码健壮性的代码
统一代码格式优化算法使用新语法
去除魔术数字使用内置方法随时可扩展
单一功能原则减少作用域链查找避免副作用
减少嵌套层级避免做重复的代码整合逻辑关注点
有效的注释减少DOM操作异常处理
避免不同类型的比较节流处理单元测试
避免生涩的语法事件委托使用TS替换JS