抽象(Abstraction)

你不可能仅用一个函数就能实现复杂的 UI。重要的是,你需要把 UI 抽象成多个隐藏内部细节,又可复用的函数。通过在一个函数中调用另一个函数来实现复杂的 UI,这就是抽象。

  1. function FancyUserBox(user) {
  2. return {
  3. borderStyle: '1px solid blue',
  4. childContent: [
  5. 'Name: ',
  6. NameBox(user.firstName + ' ' + user.lastName)
  7. ]
  8. };
  9. }
  1. { firstName: 'Sebastian', lastName: 'Markbåge' } ->
  2. {
  3. borderStyle: '1px solid blue',
  4. childContent: [
  5. 'Name: ',
  6. { fontWeight: 'bold', labelContent: 'Sebastian Markbåge' }
  7. ]
  8. };