在日本开发 SaaS 产品,爱猫、爱读书、爱大海

2020-05-19 What is boilerplate code?


终于理解了 Svelte 宣扬的第一条特性 “Build boilerplate-free components” 是什么意思。

boilerplate code,即编写大量和业务无关的代码。

如 React hook:

const [name, setName] = useState('')
const [age, setAge] = useState(0)
const [address, setAddress] = useState('')

return (
  <div>
    <input value={name} onChange={(e) => setName(e.target.value)}>
    <input value={age} onChange={(e) => setAge(e.target.value)}>
    <input value={address} onChange={(e) => setAddress(e.target.value)}>
  </div>
)

其实 setName 和 onChange 等函数完全和业务无关,单纯是为了 React 语法而已。

所以 Svelte 提供 binding 语法

<script>
let name = ''
let age = 0
let address = ''
</script>

<input value={name}>
<input type=number value={age}>
<input value={address}>

那种编写方法更容易?一目了然

类比:

  • 读取文件也是 boilerplate,你必须确认 file 存在,读取完毕后还必须关闭 file。
  • RESTful API 也是 boilerplate,CURD 写到吐。难怪 Ruby on Rails 会那么人气。开发者救星啊!!!

refs: