Pola Desain JS: Pola Pembuatan Objek

Jadi, warga Khabrovsk, sudah Kamis ini di OTUS kursus "Pengembang JavaScript Fullstack" akan dimulai. Dan hari ini kami berbagi dengan Anda publikasi penulis lain untuk mengantisipasi dimulainya kursus.



Penulis artikel: Pavel Yakupov

---

Pada artikel ini, kita akan berbicara tentang pola desain paling sederhana dan paling umum dalam bahasa Javascript - dan mencoba menjelaskan mana yang akan diterapkan kapan.
Apa pola desain secara umum? Pola desain adalah istilah yang digunakan untuk solusi umum yang sering digunakan untuk masalah umum dalam membuat program.

Sederhananya, pola desain adalah solusi sukses yang cukup sering digunakan. Pola desain sebagai konsep yang terbentuk bahkan pada saat bahasa pemrograman JavaScript tidak disebutkan, di bidang pola desain rekayasa perangkat lunak dijelaskan secara rinci pada tahun 1994 oleh Big Four. Namun, dalam artikel kami, kami akan beralih ke penerapan beberapa pola sederhana dalam bahasa pemrograman JavaScript.

Mari kita cepat membahas jenis utama pola desain:

Pola Desain Penciptaan

Seperti namanya, pola-pola ini terutama digunakan untuk membuat objek baru. Ini termasuk pola seperti Konstruktor, Pabrik, Prototipe, dan Singleton.

Pola Desain Struktural

Pola-pola ini dikaitkan dengan kelas dan komposisi objek. Mereka membantu untuk menyusun atau merestrukturisasi objek atau bagian-bagiannya tanpa mengganggu operasi seluruh sistem.

Pola Desain Perilaku

Jenis pola desain ini bertujuan untuk meningkatkan komunikasi antara berbagai objek. Pola desain perilaku termasuk Komandan, Iterator, Mediator, Pengamat, Pola Negara, Strategi, dan Templat.

Pada artikel ini, kami menganalisis hanya pola desain yang terkait dengan membuat objek - karena mereka sedikit lebih sederhana dan lebih cocok untuk pemula untuk mulai membuat aplikasi yang harus dilakukan, RPG teks di konsol, game sederhana di Kanvas, dll.

Pola "Modul"

Pola desain ini muncul dalam bahasa JavaScript, begitulah, tanpa sadar. Pada awalnya, bahasa tersebut tidak berpikir untuk menangkal fenomena seperti pencemaran ruang lingkup global (dan dalam bahasa lain, seperti C # atau C ++, ada namespace yang memecahkan masalah ini di luar kotak). Selain itu, modul sebagian diperlukan untuk penggunaan kembali kode, karena setelah mereka dapat dibuat dan digunakan untuk pertama kalinya, mereka dapat dihubungkan ke proyek-proyek tim lain menggunakan jam kerja jauh lebih kompeten.
Modul modul sepanjang keberadaannya (sudah dalam ES5 itu banyak digunakan) menggunakan IIFE (segera disebut ekspresi fungsional).

Berikut adalah contoh sederhana dari pola "Modul":

const first_Module = (function() { let Surname = "Ivanov"; let Nickname = "isakura313"; function declare_Surname() { console.log(Surname); } return { declare_Nickname: function() { alert(Nickname); } } })(); first_Module.declare_Nickname(); console.log(Surname); //       

Pola "Modul" sepenuhnya merangkum data yang terkandung di dalamnya. Kami dapat mengaksesnya hanya menggunakan metode publik, dan hingga JavaScript menerapkan metode publik dan pribadi "di luar kotak" harus dilaksanakan dengan cara ini.

Pola Konstruktor

Ini adalah pola desain yang dirancang untuk membuat objek. Konstruktor adalah fungsi yang menciptakan objek baru. Namun, dalam JavaScript, objek dapat dibuat dengan cepat, bahkan tanpa fungsi konstruktor atau definisi kelas.
Konstruktor adalah salah satu pola desain yang paling umum digunakan. Ini digunakan untuk membuat objek dari tipe tertentu.

 //     to-do  //,    ,           class ItemDeal { constructor(name, color) { this.name = name; this.color = color; } } //     ,       localStorage  ? let item = new ItemDeal(`${text}`, `${select.value - 1}`); // text -   , a select.value -    let myJson = JSON.stringify(item); //        //localStorage,        //localStorage.setItem(item.name, myJson); 

Pola pabrik

Pola Pabrik adalah pola lain yang berfokus pada membuat objek dari kelas. Di dalamnya, kami menyediakan antarmuka umum yang mendelegasikan pembuatan objek subclass.

Pola desain ini paling sering digunakan untuk memanipulasi koleksi objek yang memiliki karakteristik berbeda dan sama.
Pada contoh di bawah ini, kita akan membuat kelas musuh (EnemyFactory) untuk pencarian teks kita. Ya, contohnya cukup sederhana, tetapi ini adalah masalah pola desain: mereka diperlukan untuk aplikasi "besar". Jika Anda hanya memiliki tiga gambar yang terbang dengan mengklik halaman, maka tidak ada pola desain yang akan sangat berguna bagi Anda.

Oke, cukup tunjukkan sepotong kode untuk RPG teks kami di konsol:

 class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  

Pola Prototipe

Di sini kita menggunakan beberapa jenis "kerangka" objek nyata untuk membuat objek baru. Dan prototyping adalah jenis OOP bangunan paling asli dalam JavaScript.

 //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true 

Pola Prototipe berguna jika aplikasi Anda entah bagaimana dapat memperluas atau mengurangi fungsionalitas.

Pola Penyendiri

Atau, karena dia lebih dikenal, "Singleton." "Penyendiri" adalah pola khusus di mana hanya satu instance kelas yang dapat eksis. Pola ini berfungsi sebagai berikut - inisialisasi objek akan berfungsi jika tidak ada satu pun instance yang dibuat atau dikembalikan. Jika ada, objek yang dipicu akan dikembalikan.
Misalkan kita membuat kelas karakter utama, dan kita menginginkannya menjadi 1, bukan 4, seperti dalam Jumanji.

 class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } } //    const smolder = new Hero('Smolder!'); console.log(smolder.getName()); // Smolder! const ruby = new Hero('Ruby'); console.log(ruby.getName()); // Smolder! // ,       .         . //            

Jadi terima kasih atas perhatiannya! Saya berharap artikel ini akan menjadi awal yang baik untuk OOP di JavaScript (walaupun, sejujurnya, kolega saya dengan pengalaman bertahun-tahun di Jawa dan JavaScript, OOP tidak terlalu berkembang di sana, untuk membuatnya lebih sederhana). Namun, dalam standar baru, bahasa telah meningkat secara signifikan, dan saya yakin metodologi ini hanya akan digunakan lebih sering (atau Dart akan datang dan mengganti semuanya).

Tautan yang bermanfaat:

developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create
pelajari.javascript.ru/class
developer.mozilla.org/en/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript