Pola Dekorator Modul JavaScript: Peningkatan Perilaku

Dalam lanskap pengembangan JavaScript yang terus berkembang, menulis kode yang bersih, mudah dipelihara, dan dapat digunakan kembali sangatlah penting. Pola dekorator modul menawarkan teknik yang ampuh untuk meningkatkan perilaku modul JavaScript tanpa memodifikasi logika intinya. Pendekatan ini mempromosikan pemisahan masalah, membuat kode Anda lebih fleksibel, mudah diuji, dan lebih mudah dipahami.

Apa itu Dekorator Modul?

Dekorator modul adalah fungsi yang mengambil modul (biasanya fungsi atau kelas) sebagai masukan dan mengembalikan versi modifikasi dari modul tersebut. Dekorator menambahkan atau memodifikasi perilaku modul asli tanpa mengubah kode sumbernya secara langsung. Ini sesuai dengan Prinsip Terbuka/Tertutup, yang menyatakan bahwa entitas perangkat lunak (kelas, modul, fungsi, dll.) harus terbuka untuk perluasan tetapi tertutup untuk modifikasi.

Bayangkan seperti menambahkan topping tambahan ke pizza. Pizza dasar (modul asli) tetap sama, tetapi Anda telah meningkatkannya dengan rasa dan fitur tambahan (tambahan dekorator).

Manfaat Menggunakan Dekorator Modul

• Peningkatan Penggunaan Kembali Kode: Dekorator dapat diterapkan ke banyak modul, memungkinkan Anda menggunakan kembali peningkatan perilaku di seluruh basis kode Anda.
• Peningkatan Pemeliharaan: Dengan memisahkan masalah, dekorator memudahkan untuk memahami, memodifikasi, dan menguji modul individual dan peningkatannya.
• Peningkatan Fleksibilitas: Dekorator menyediakan cara fleksibel untuk menambahkan atau memodifikasi fungsionalitas tanpa mengubah kode modul asli.
• Kepatuhan Prinsip Terbuka/Tertutup: Dekorator memungkinkan Anda memperluas fungsionalitas modul tanpa memodifikasi kode sumbernya secara langsung, mempromosikan pemeliharaan dan mengurangi risiko memperkenalkan bug.
• Peningkatan Kemampuan Pengujian: Modul yang didekorasi dapat dengan mudah diuji dengan mengejek atau menstub fungsi dekorator.

Konsep Inti dan Implementasi

Pada intinya, dekorator modul adalah fungsi tingkat tinggi. Ia mengambil fungsi (atau kelas) sebagai argumen dan mengembalikan fungsi (atau kelas) baru yang dimodifikasi. Kuncinya adalah memahami cara memanipulasi fungsi asli dan menambahkan perilaku yang diinginkan.

Contoh Dekorator Dasar (Dekorator Fungsi)

Mari kita mulai dengan contoh sederhana mendekorasi fungsi untuk mencatat waktu eksekusinya:

            function timingDecorator(func) {
  return function(...args) {
    const start = performance.now();
    const result = func.apply(this, args);
    const end = performance.now();
    console.log(`Function ${func.name} took ${end - start}ms`);
    return result;
  };
}

function myExpensiveFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

const decoratedFunction = timingDecorator(myExpensiveFunction);

console.log(decoratedFunction(100000));

            

              
                Copy
              
            
          

Dalam contoh ini, timingDecorator adalah fungsi dekorator. Ia mengambil myExpensiveFunction sebagai masukan dan mengembalikan fungsi baru yang membungkus fungsi asli. Fungsi baru ini mengukur waktu eksekusi dan mencatatnya ke konsol.

Dekorator Kelas (Proposal Dekorator ES)

Proposal Dekorator ECMAScript (saat ini dalam Tahap 3) memperkenalkan sintaks yang lebih elegan untuk mendekorasi kelas dan anggota kelas. Meskipun belum sepenuhnya distandarisasi di semua lingkungan JavaScript, ia mendapatkan daya tarik dan didukung oleh alat seperti Babel dan TypeScript.

Berikut adalah contoh dekorator kelas:

            // Requires a transpiler like Babel with the decorators plugin

function LogClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Creating a new instance of ${constructor.name}`);
    }
  };
}

@LogClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("Alice");
instance.greet();

            

              
                Copy
              
            
          

Dalam kasus ini, @LogClass adalah dekorator yang, ketika diterapkan ke MyClass, meningkatkan konstruktornya untuk mencatat pesan setiap kali instance baru dari kelas dibuat.

Dekorator Metode (Proposal Dekorator ES)

Anda juga dapat mendekorasi metode individual dalam kelas:

            // Requires a transpiler like Babel with the decorators plugin

function LogMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling method ${propertyKey} with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class MyClass {
  constructor(name) {
    this.name = name;
  }

  @LogMethod
  add(a, b) {
    return a + b;
  }
}

const instance = new MyClass("Bob");
instance.add(5, 3);

            

              
                Copy
              
            
          

Di sini, @LogMethod mendekorasi metode add, mencatat argumen yang diteruskan ke metode dan nilai yang dikembalikannya.

Pola Dekorator Modul Umum

Dekorator modul dapat digunakan untuk mengimplementasikan berbagai pola desain dan menambahkan masalah lintas-potong ke modul Anda. Berikut adalah beberapa contoh umum:

1. Dekorator Pencatatan Log

Seperti yang ditunjukkan dalam contoh sebelumnya, dekorator pencatatan log menambahkan fungsionalitas pencatatan log ke modul, memberikan wawasan tentang perilaku dan kinerja mereka. Ini sangat berguna untuk men-debug dan memantau aplikasi.

Contoh: Dekorator pencatatan log dapat mencatat panggilan fungsi, argumen, nilai yang dikembalikan, dan waktu eksekusi ke layanan pencatatan log pusat. Ini sangat berharga dalam sistem terdistribusi atau arsitektur layanan mikro di mana melacak permintaan di beberapa layanan sangat penting.

2. Dekorator Caching

Dekorator caching menyimpan hasil panggilan fungsi yang mahal, meningkatkan kinerja dengan mengurangi kebutuhan untuk menghitung ulang nilai yang sama berulang kali.

            function cacheDecorator(func) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("Fetching from cache");
      return cache.get(key);
    }

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log("Performing expensive calculation");
  // Simulate a time-consuming operation
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

const cachedCalculation = cacheDecorator(expensiveCalculation);

console.log(cachedCalculation(1000));
console.log(cachedCalculation(1000)); // Fetches from cache

            

              
                Copy
              
            
          

Contoh Internasionalisasi: Pertimbangkan aplikasi yang perlu menampilkan nilai tukar mata uang. Dekorator caching dapat menyimpan hasil panggilan API ke layanan konversi mata uang, mengurangi jumlah permintaan yang dibuat dan meningkatkan pengalaman pengguna, terutama bagi pengguna dengan koneksi internet yang lebih lambat atau mereka yang berada di wilayah dengan latensi tinggi.

3. Dekorator Otentikasi

Dekorator otentikasi membatasi akses ke modul atau fungsi tertentu berdasarkan status otentikasi pengguna. Ini membantu mengamankan aplikasi Anda dan mencegah akses yang tidak sah.

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Replace with your authentication logic
      return func.apply(this, args);
    } else {
      console.log("Authentication required");
      return null; // Or throw an error
    }
  };
}

function isAuthenticated() {
  // Replace with your actual authentication check
  return true; // For demonstration purposes
}

function sensitiveOperation() {
  console.log("Performing sensitive operation");
}

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

Konteks Global: Dalam platform e-commerce global, dekorator otentikasi dapat digunakan untuk membatasi akses ke fungsi manajemen pesanan hanya untuk karyawan yang berwenang. Fungsi isAuthenticated() perlu memeriksa peran dan izin pengguna berdasarkan model keamanan platform, yang dapat bervariasi tergantung pada peraturan regional.

4. Dekorator Validasi

Dekorator validasi memvalidasi parameter input fungsi sebelum dieksekusi, memastikan integritas data dan mencegah kesalahan.

            function validationDecorator(validator) {
  return function(func) {
    return function(...args) {
      const validationResult = validator(args);
      if (validationResult.isValid) {
        return func.apply(this, args);
      } else {
        console.error("Validation failed:", validationResult.errorMessage);
        throw new Error(validationResult.errorMessage);
      }
    };
  };
}

function createUserValidator(args) {
  const [username, email] = args;
  if (!username) {
    return { isValid: false, errorMessage: "Username is required" };
  }
  if (!email.includes("@")) {
    return { isValid: false, errorMessage: "Invalid email format" };
  }
  return { isValid: true };
}

function createUser(username, email) {
  console.log(`Creating user with username: ${username} and email: ${email}`);
}

const validatedCreateUser = validationDecorator(createUserValidator)(createUser);

validatedCreateUser("john.doe", "john.doe@example.com");
validatedCreateUser("jane", "invalid-email");

            

              
                Copy
              
            
          

Lokalisasi dan Validasi: Dekorator validasi dapat digunakan dalam formulir alamat global untuk memvalidasi kode pos berdasarkan negara pengguna. Fungsi validator perlu menggunakan aturan validasi khusus negara, yang berpotensi diambil dari API eksternal atau file konfigurasi. Ini memastikan bahwa data alamat konsisten dengan persyaratan pos setiap wilayah.

5. Dekorator Coba Lagi

Dekorator coba lagi secara otomatis mencoba lagi panggilan fungsi jika gagal, meningkatkan ketahanan aplikasi Anda, terutama saat berhadapan dengan layanan atau koneksi jaringan yang tidak andal.

            function retryDecorator(maxRetries) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

async function fetchData() {
  // Simulate a function that might fail
  if (Math.random() < 0.5) {
    throw new Error("Failed to fetch data");
  }
  return "Data fetched successfully!";
}

const retryFetchData = retryDecorator(3)(fetchData);

retryFetchData()
  .then(data => console.log(data))
  .catch(error => console.error("Final error:", error));

            

              
                Copy
              
            
          

Ketahanan Jaringan: Di wilayah dengan koneksi internet yang tidak stabil, dekorator coba lagi dapat sangat berharga untuk memastikan bahwa operasi penting, seperti mengirimkan pesanan atau menyimpan data, akhirnya berhasil. Jumlah percobaan ulang dan penundaan antara percobaan ulang harus dapat dikonfigurasi berdasarkan lingkungan spesifik dan sensitivitas operasi.

Teknik Tingkat Lanjut

Menggabungkan Dekorator

Dekorator dapat digabungkan untuk menerapkan beberapa peningkatan ke satu modul. Ini memungkinkan Anda membuat perilaku yang kompleks dan sangat disesuaikan tanpa memodifikasi kode modul asli.

            //Requires transpilation (Babel/Typescript)
function ReadOnly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

function Trace(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`TRACE: Calling ${name} with arguments: ${args}`);
        const result = original.apply(this, args);
        console.log(`TRACE: ${name} returned: ${result}`);
        return result;
    };
    return descriptor;
}

class Calculator {
    constructor(value) {
        this.value = value;
    }

    @Trace
    add(amount) {
        this.value += amount;
        return this.value;
    }

    @ReadOnly
    @Trace
    getValue() {
        return this.value;
    }
}

const calc = new Calculator(10);
calc.add(5); // Output will include TRACE messages
console.log(calc.getValue()); // Output will include TRACE messages

try{
    calc.getValue = function(){ return "hacked!"; }
} catch(e){
    console.log("Cannot overwrite ReadOnly property");
}

            

              
                Copy
              
            
          

Pabrik Dekorator

Pabrik dekorator adalah fungsi yang mengembalikan dekorator. Ini memungkinkan Anda untuk memparameterkan dekorator Anda dan mengonfigurasi perilakunya berdasarkan persyaratan spesifik.

            function retryDecoratorFactory(maxRetries, delay) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

// Use the factory to create a retry decorator with specific parameters
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

Pertimbangan dan Praktik Terbaik

• Pahami Proposal Dekorator ES: Jika Anda menggunakan proposal Dekorator ES, biasakan diri Anda dengan sintaks dan semantiknya. Ketahuilah bahwa itu masih merupakan proposal dan dapat berubah di masa mendatang.
• Gunakan Transpiler: Jika Anda menggunakan proposal Dekorator ES, Anda memerlukan transpiler seperti Babel atau TypeScript untuk mengonversi kode Anda ke format yang kompatibel dengan browser.
• Hindari Penggunaan Berlebihan: Meskipun dekorator sangat kuat, hindari penggunaannya secara berlebihan. Terlalu banyak dekorator dapat membuat kode Anda sulit dipahami dan di-debug.
• Jaga agar Dekorator Tetap Fokus: Setiap dekorator harus memiliki tujuan tunggal yang terdefinisi dengan baik. Ini membuat mereka lebih mudah dipahami dan digunakan kembali.
• Uji Dekorator Anda: Uji dekorator Anda secara menyeluruh untuk memastikan mereka berfungsi seperti yang diharapkan dan tidak memperkenalkan bug apa pun.
• Dokumentasikan Dekorator Anda: Dokumentasikan dekorator Anda dengan jelas, jelaskan tujuan, penggunaan, dan potensi efek sampingnya.
• Pertimbangkan Kinerja: Dekorator dapat menambahkan overhead ke kode Anda. Berhati-hatilah terhadap implikasi kinerja, terutama saat mendekorasi fungsi yang sering dipanggil. Gunakan teknik caching jika sesuai.

Contoh Dunia Nyata

Dekorator modul dapat diterapkan dalam berbagai skenario dunia nyata, termasuk:

• Kerangka Kerja dan Pustaka: Banyak kerangka kerja dan pustaka JavaScript modern menggunakan dekorator secara ekstensif untuk menyediakan fitur seperti injeksi dependensi, perutean, dan manajemen status. Angular, misalnya, sangat bergantung pada dekorator.
• Klien API: Dekorator dapat digunakan untuk menambahkan pencatatan log, caching, dan otentikasi ke fungsi klien API.
• Validasi Data: Dekorator dapat digunakan untuk memvalidasi data sebelum disimpan ke database atau dikirim ke API.
• Penanganan Peristiwa: Dekorator dapat digunakan untuk menyederhanakan logika penanganan peristiwa.

Kesimpulan

Pola dekorator modul JavaScript menawarkan cara yang ampuh dan fleksibel untuk meningkatkan perilaku kode Anda, mempromosikan penggunaan kembali, pemeliharaan, dan kemampuan pengujian. Dengan memahami konsep inti dan menerapkan pola yang dibahas dalam artikel ini, Anda dapat menulis aplikasi JavaScript yang lebih bersih, lebih kuat, dan lebih terukur. Karena proposal Dekorator ES mendapatkan adopsi yang lebih luas, teknik ini akan menjadi lebih lazim dalam pengembangan JavaScript modern. Jelajahi, bereksperimen, dan masukkan pola-pola ini ke dalam proyek Anda untuk membawa kode Anda ke tingkat berikutnya. Jangan takut untuk membuat dekorator khusus Anda sendiri yang disesuaikan dengan kebutuhan spesifik proyek Anda.