Penghias JavaScript dan Auto-Aksesori

Panduan tentang cara membuat penghias JavaScript dan cara menggunakan pengakses automatik membantu meningkatkan pengalaman pembangun anda.

Jadual Kandungan

• Konteks dan Spesifikasi
• Pendahuluan
• Auto Akses
• Mencipta Penghias
  • Penghias Mudah
  • Pengesahan Dengan Penghias
  • Pilihan Penghias
• Metadata

Konteks dan Spesifikasi

Cadangan Penghias di GitHub sudahpun melakukan kerja yang baik untuk memecahkan kes penggunaan asas penghias. Matlamat saya bukan untuk mencipta semula contoh tersebut di sana, sebaliknya untuk menyerlahkan beberapa ciri dan interaksi yang kurang dikenali. Selain itu, dalam artikel seterusnya dalam siri ini, saya akan menyerlahkan cara mengarang atau rantai berbilang penghias pada satu sifat kelas.

Mukadimah

Setiap sampel kod akan disertakan dengan pautan ke taman permainan Babel REPL interaktif, jadi anda boleh mencubanya sendiri tanpa perlu menyediakan polyfill atau memutar repo. Pilihan "Evaluate" di bahagian atas sebelah kiri (di bawah Tetapan) harus disemak dalam semua contoh saya, yang bermaksud bahawa anda akan dapat melihat kod, mengeditnya, membuka konsol dev penyemak imbas anda dan melihat log / hasil di sana.

Anda tidak perlu memberi perhatian kepada kod transpil di sebelah kanan Babel REPL, melainkan anda ingin menggali ke dalam polifill untuk penghias. Bahagian kiri Babel REPL ialah tempat anda boleh mengedit dan menulis kod untuk mencuba sendiri.

Untuk menekankan, konsol alat pembangun anda harus menunjukkan log konsol. Jika tidak, pastikan Evaluate ditandakan di bahagian atas sebelah kiri.

Auto-Aksessor

Ciri penting bagi spesifikasi Penghias ialah pengakses automatik. Kami akan mulakan dengan mempelajari apa itu dan cara menggunakan auto-aksesor akan memudahkan penghias tulisan.

Cadangan Penghias menggariskan pengakses automatik di sini. Tetapi akhirnya ia adalah ciri yang mudah; mari lihat contoh kerja asas: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

Dalam takrifan kelas ini kata kunci pengakses mendahului nama harta. Walau bagaimanapun, ini masih belum benar-benar mengubah apa-apa tentang harta itu - seterusnya, kita akan melihat betapa bergunanya pengakses automatik apabila digabungkan dengan penghias.

(Perhatikan bahawa anda juga boleh menggunakan statik dengan pengakses automatik, seperti pengakses statik myBoolean = false)

Mencipta Penghias

Untuk lebih memahami sebab kami menggunakan pengakses automatik, mari bina beberapa penghias.

Seorang Penghias Sederhana

Kita akan mulakan dengan menggabungkan pengakses automatik dengan penghias yang sebenarnya tidak banyak membantu, untuk mendapatkan idea tentang sintaks.

Berikut ialah penghias berfungsi yang mengekalkan pembolehubah dalaman dan membolehkan anda mendapatkan dan menetapkan pembolehubah itu melalui sifat pada kelas: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

Penghias ini mengembalikan objek dengan dua kaedah: get() dan set(). Beginilah cara penghias untuk pengakses automatik boleh "menghias" atau membungkus kedua-dua penetap dan pengambil untuk harta di satu tempat; kita tidak perlu mencipta simpleGetterDecorator dan simpleSetterDecorator. Sebaliknya, kami telah menggabungkannya menjadi satu takrifan dengan pengakses automatik, yang lebih mudah.

Pada akhirnya, ini kelihatan seperti fungsi yang agak normal setakat ini - yang bagus untuk pengenalan!

Pengesahan Dengan Penghias

Untuk menyediakan kami untuk artikel yang lain, mari kemas kini penghias kami supaya ia benar-benar melakukan semacam pengesahan. Kami akan membuat penghias yang hanya membenarkan anda menetapkan nombor genap dan tiada yang lain. Begini rupanya: Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

Jadi kami menambah logik pada kaedah set() dan kini sesiapa yang cuba menetapkan sifat myEvenNumber pada kelas kami akan melalui logik pengesahan itu. Bagus.

Pilihan Penghias

Sekarang kita mempunyai penghias genap sahaja yang bagus, mari kita kendalikan nombor genap dan ganjil dengan pilihan untuk mengkonfigurasi jenis nombor yang kita mahu!

Nasib baik, kerana ini adalah JavaScript yang kelihatan agak normal yang kami tulis di sini, tidaklah terlalu sukar untuk mengkonfigurasinya supaya berfungsi dengan cara ini. Kami membalut penghias asal dengan fungsi yang mengambil pilihan, dan kemudian mengembalikan penghias. Babel REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

Kami kini telah mengkonfigurasi penghias kami untuk mengambil pilihan sewenang-wenangnya, yang membolehkan pengguna penghias kami menyesuaikan tingkah lakunya. Yay.

Metadata

Satu alat tambahan yang boleh digunakan oleh penghias anda ialah context.metadata. Objek ini dihantar kepada setiap penghias dan anda boleh menggunakannya untuk pelbagai perkara, tetapi anda perlu berhati-hati kerana objek metadata adalah sama untuk semua seruan setiap penghias.

Teruskan Belajar

Teruskan ke siaran seterusnya dalam siri ini untuk mengetahui cara mengarang (atau menggunakan berbilang) penghias pada satu sifat!

Atas ialah kandungan terperinci Penghias JavaScript dan Auto-Aksesori. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!