Pengembang menunjukkan niat positif dalam mempelajari pola desain JavaScript. Pola desain JS memberikan kode sumber Anda desain untuk membuatnya efisien & dapat dipelihara.

Pola Desain Javascript

Ringkasan

Sejumlah besar programmer JavaScript tidak jelas tentang pola desain javascript dan celah ini harus diisi. Dalam seri ini tutorial JavaScript, kami menulis posting blog ini yang akan mencakup pola desain JavaScript yang paling banyak digunakan seperti pola desain modul, pola pengamat, dan banyak lagi. Selain itu, kami akan mencoba menunjukkan menggunakan contoh kode sehingga tidak ada ambiguitas yang tersisa dalam pikiran Anda. Topik ini sangat penting jika Anda mengejar karir di JavaScript. Oleh karena itu, tetap terhubung di seluruh artikel ini, dan pada akhir posting blog ini, Anda harus memiliki pemahaman yang kuat tentang pola desain JS. Poin -poin berikut harus dibahas dalam panduan pemula Javascript ini:

Apa itu pola desain JavaScript?

Pola desain JavaScript adalah solusi dalam bentuk templat yang memberikan solusi efisien untuk masalah umum yang terjadi berulang kali dalam menulis kode sumber. Dengan kata yang lebih sederhana, pola desain adalah gaya/pesanan yang telah ditentukan sebelumnya untuk menulis kode javasciprt yang dapat dikelola, dan dikelola. Dalam organisasi kecil, sebagian besar pengembang tidak memperhatikan pola desain tetapi menjadi subjek yang kritis ketika Anda membangun perangkat lunak bisnis skala besar. Pada dasarnya, ada sejumlah pengembang yang bekerja untuk perangkat lunak tingkat perusahaan yang memiliki gaya kode penulisan sendiri. Oleh karena itu, Anda memilih pola desain untuk mencegah masalah berulang, membangun blok kode yang dapat digunakan kembali, dan mempercepat pengembangan aplikasi.

Pola Desain Modul

Ini adalah pola desain yang paling umum dan masuk akal yang dipilih pengembang. Sesuai pola desain ini, blok kode aplikasi diletakkan secara terpisah dari satu sama lain dalam bentuk modul. Pola desain JavaScript ini memberikan isolasi dan enkapsulasi. Selain itu, Anda dapat membuat fungsi dan atribut publik/pribadi yang tidak dapat Anda akses dari luar modul. Di atas segalanya, modul dalam pola desain modular selalu mengembalikan objek. Anda dapat menggunakan pola desain ini jika Anda sedang membangun aplikasi bisnis unggulan kaya tingkat perusahaan. Jadi, Anda dapat membangun modul terpisah untuk setiap fitur untuk membawa kemandirian. Cuplikan kode berikut menunjukkan pola desain modular:

const student = (function () {
  // Private
  let name = "mustafa";
  let program = "computer science";
  const getStudentName = () => name;
  const getStudentProgram = () => program;

  // Public
  return {
    name,
    program,
    getName: () => getStudentName(),
    getStudentProgram: () => getStudentProgram(),
  };
})();

student.name;
student.program;
student.getStudentProgram();

JavaScript pola pabrik

Sesuai pola desain ini, Anda membuat objek menggunakan antarmuka daripada memanggil konstruktor dengan operator****baru. Bahkan, kami menentukan jenis objek dan pabrik membuat contoh dan mengirim kami kembali untuk digunakan. Selain itu, pola desain JavaScript ini memberikan kontrol penuh atas pembuatan objek. Lebih lanjut, Anda dapat memilih pola desain ini untuk menangani objek yang sederhana dan kompleks dan juga bijaksana untuk menggunakan pola pabrik untuk decoupling. Mari kita tulis cuplikan kode untuk eksplorasi lebih lanjut.

// sandwich.js
const Sandwich = function({name }) {
  this.name = name || "";
};
module.exports = Sandwich;

// burger.js
const Burger = function({name }) {
    this.name = name || "";
};
module.exports = Burger;

// gadFoodFactory.js
const Sandwich = require("./sandwich");
const Burger = require("./burger");
const food = { Burger, Sandwich };
module.exports = {
    createFood(type, attributes) {
        const GadFoodType = food[type];
        return new GadFoodType(attributes);
    }
};

// index.js
const gadFoodFactory = require("./gadFoodFactory");
const mySandwich = gadFoodFactory.createFood("Sandwich", {
    name: "Chicken"
});
const myBurger = gadFoodFactory.createFood("Burger", {
    name: "Grilled",
});
console.log(mySandwich);
console.log(myBurger);

JavaScript pola singleton

Pola desain ini sangat populer yang membatasi instantiasi kelas menjadi satu objek. Layanan dalam JavaScript Framework Angular mengikuti pola ini di mana ia hanya membuat satu contoh layanan dan objek itu dapat diakses oleh semua modul. Selain itu, semua klien yang terhubung ke objek tunggal berbagi sumber daya dan tingkat akses yang sama. Demonstrasi pola singleton adalah sebagai berikut:

let singletonPattern = new (function () {

  let name = "mustafa";

  this.printName = function() {
      console.log(name);
  }
})();

singletonPattern.printName();

// output: mustafa

JavaScript Pola Pengamat

Pola pengamat cukup membantu dalam membangun aplikasi bisnis yang dapat diskalakan. Mekanisme pemberitahuan terlibat dalam pola kode ini. Setiap kali ada perubahan, itu memicu peristiwa yang memberi tahu langganan tergantung lainnya. Jadi, pola ini menyiarkan status terbaru ke objek lain di seluruh modul. Bahkan, ini semua tentang menginformasikan perubahan ke pelanggan secara otomatis. Contoh kode berikut mengikuti pola pengamat:

function ObserverFunc() {
this.observerArray = [];
}

ObserverFunc.prototype.subscribe = function (ele) {
this.observerArray.push(ele);
}

ObserverFunc.prototype.unsubscribe = function (element) {
const elementIndex = this.observerArray.indexOf(element);
if (elementIndex > -1) {
this.observerArray.splice(elementIndex, 1);
}
}

ObserverFunc.prototype.notifyAll = function (element) {
this.observerArray.forEach(function (observerElement) {
observerElement(element);
});
}

Kesimpulan

Itu saja untuk pola desain JavaScript . Kami harap Anda menikmati tutorial JavaScript ini dan mempelajari konsep -konsep pola desain. Kami telah membahas pola kode yang paling umum digunakan seperti pola desain modul, singleton, pengamat, dan pola desain pabrik. Artikel ini akan memberi Anda gambaran yang jelas dengan bantuan cuplikan kode. Selain itu, ada posting blog lain yang sangat relevan yang mungkin Anda temukan di bagian “Lihat juga” di bawah ini.

Terhubung dengan kami

Akhirnya, containerize.com sedang dalam proses yang konsisten dalam menulis posting JavaScript tentang topik baru. Anda dapat tetap berada di loop dengan mengikuti kami di platform media sosial kami, termasuk Facebook, LinkedIn, dan Twitter.

Berikan pertanyaan

Anda dapat memberi tahu kami tentang pertanyaan atau pertanyaan Anda di [forum] kami 11.

FAQ

Apa pola desain paling populer di JavaScript? Pola modul, pengamat, pola pabrik dan singleton banyak digunakan dalam pemrograman JavaScript. Harap ikuti tautan ini untuk mengeksplorasi lebih lanjut.

Lihat juga