daily study

代码整洁

整洁的事物往往会让人感到舒适

同样地，整洁的代码也会让我们搬砖过程中更有劲儿，创造更大的价值💯

对于很多没有换行缩进习惯的人来说，现有常用的编辑器都自带一些代码格式化

全选 -> 格式化代码，也就 OK 了，没有任何理由能支撑我们写出歪七扭八的代码了吧🤣

关于函数

保持函数功能的唯一性，当需要修改某一部分逻辑时，只需要关注某一个/几个函数（松耦合）

将函数功能写的纯粹一点，无副作用，说白了就是使用这个函数不会担心对自己的数据造成什么未知的影响

业务和功能拆分，即在通过函数实现一个功能时，遵循上面第一点，功能应该单独拆分，和业务分离，便于复用

例如以下伪代码：

async function getTable (params) {
  // 请求
  const res = await axios.get('/getData', {
    data: params
  })
  // 格式化数据
  let val = res.filter(item => item > 99)
    .map(item => 'format' + item)
  console.log('继续处理数据...')
  // 渲染
  const htmlStr = '<table>...</table>'
  console.log('使用val拼接表格...')
  document.getElementById('container').innerHTML = htmlStr
}

可以进行如下拆分

function formatData () {
  let val = res.filter(item => item > 99)
    .map(item => 'format' + item)
  console.log('继续处理数据...')
  return val
}
function getData (params) {
  return axios.get('/getData', {
    data: params
  })
}
function joinTable (val) {
  const htmlStr = '<table>...</table>'
  console.log('使用val拼接表格....')
  return htmlStr
}
async function getTable (params) {
  // 请求
  const res = await getData(params) 
  // 格式化
  const val = formatData(res)
  // 组装
  const htmlStr = joinTable(val)
  // 插入表格
  document.getElementById('container').innerHTML = htmlStr
}

可以看到每个函数只负责自己的功能，需要调整哪一部分逻辑去对应函数修改即可，另外每一部分的逻辑均可以复用，与getTable这个函数完全解耦

关于Vue

关于 vue 写法上的一些想法：

类似于函数的用法，同样地，一个组件做一件事，各司其职

一个组件内的状态，方法等，应该由组件自己维护，而不是通过其它组件来控制或被其影响

因此尽量少的通过组件实例来调用方法，改变数据等，适当的通过 emit 或 store 来获取、监听、改变数据状态

例如下面伪代码：与其通过 ref 去调用 child 组件请求数据：

vue

<child ref='child' />

<script setup>
    const state = ref(1)
    const child = ref()
    state.value = 0
    watch(() => state.value, child.getData)
</script>

不如让 child 完全自控，两个组件完全解耦，不用将 getData 暴露出去，避免在未知情况下调用，让组件变得不可控

vue

<child :state="state" />

<script setup>
    const state = ref(1)
    state.value = 0
</script>

vue


<script setup>
    const props = defineProps(['state'])
    const getData = () => {...}
    watch(() => props.state, getData)
</script>

关于语法

像电子产品一样，买新不买旧，写代码同样也是写新不写旧

例如 ES6 相对于 ES5 增加了很多语法糖，新语法，那么这个时候就没有必要去还用那些旧的写法，例如：

//旧
const sum = function (a, b) { 
  return a + b
} 
const obj = {
  fn: function () {}
}
const object = {
  a: 123,
  b: 456
}
const a = object.a
const b = object.b

// +++++++++++++++++新
const sum = (a, b) => a + b
const obj = { 
  fn () {}
}
const object = {
  a: 123,
  b: 456
}
const {a, b} = object

其它还有亿点点语法糖，这里就不举例了...

所以说，要与时俱进，搬砖也要搬的优雅呀😅

关于写法

这一点类似于上面一条，但又有所区别，更多指的是技巧或规范

例如：

const fn = () => console.log('定时器')
setTimeout(() => {
  fn()
}, 1000)

setTimeout 会在 1s 后将第一个参数（函数）放入宏任务队列进而执行，而 fn 本身就是一个函数，既然如此，何不这么写：

setTimeout(fn, 1000)

总结下就是，所有参数为函数的函数，在不需要其它逻辑时，应直接将函数引用传递过去，而不是多套一层

还有一些常见的例子：

if (2 > 1) {
  return true
} else {
  return false
}
// 可以简写为
return 2 > 1

if (2 > 1) {
  return 'result1'
} else {
  console.log('do something')
  return 'result2'
}
// 可以简写为
if (2 > 1) return 'result1'
console.log('do something')
return 'result2'
// 如果else里只有return, 可以适当使用三目运算
return 2 > 1 ? 'result1' : 'result2'

if (val === '1' || val === '2' || val === '99' || val === '999') {
  console.log('do something')
}
// 可以简写为
if (['1', '2', '99', '999'].includes(val)) {
  // 很多的 || 不用一直写下去了...
}

if (fn) fn()
let a = 0, val, val2
if (val) a = val
else a = val2
// 可以适当使用短路语句
fn && fn()
a = val || val2

另外还有亿点点，主要平时写代码时多思考，多养成习惯，而不是能用就行...

代码整洁 ​

关于函数 ​

关于Vue ​

关于语法 ​

关于写法 ​

代码整洁

关于函数

关于Vue

关于语法

关于写法