Pertanyaan Contoh pola desain berorientasi objek javascript praktis


Pola desain berorientasi objek apa yang Anda gunakan dalam javascript aplikasi Anda, dan mengapa?

Jangan ragu untuk memposting kode, meskipun tidak ada pola desain resmi yang menyertainya.

Saya telah menulis banyak javascript, tetapi saya belum menerapkan banyak pola berorientasi objek untuk apa yang saya lakukan, dan saya yakin saya kehilangan banyak.


76
2017-09-16 00:17


asal


Jawaban:


Berikut ini adalah tiga pola JavaScript populer. Ini terjadi mudah diterapkan karena penutupan:

  • Pola Modul - Contoh (dan dibuat populer) oleh Eric Miraglia
  • Memoisasi - Contoh oleh Oliver Steele
  • Currying - Contoh oleh Dustin Diaz

Anda juga mungkin ingin melihat:

Berikut ini adalah ceramah Google I / O dari tahun 2008 yang disajikan oleh Diaz, di mana dia membahas beberapa topik dari bukunya:


51
2017-09-16 00:23



Warisan

Saya menggunakan notasi untuk warisan yang didasarkan pada ExtJS 3, yang saya temukan bekerja cukup dekat untuk meniru warisan klasik di Jawa. Ini pada dasarnya berjalan sebagai berikut:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

Namespaces

Saya juga setuju dengan Eric Miraglia yang menempel di ruang nama sehingga kode di atas harus dijalankan dalam konteksnya sendiri di luar objek jendela, ini sangat penting jika Anda ingin kode Anda berjalan sebagai salah satu dari banyak kerangka kerja / pustaka yang dijalankan di jendela browser.

Ini berarti bahwa satu-satunya cara ke objek jendela adalah melalui objek namespace / modul Anda sendiri:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

Antarmuka

Anda juga dapat menggunakan lebih banyak kemajuan konstruksi OOP seperti antarmuka untuk meningkatkan desain aplikasi Anda. Pendekatan saya untuk ini adalah untuk meningkatkan Function.prototype untuk mendapatkan notasi sepanjang garis-garis ini:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

Pola OO

Untuk 'Pola' dalam pengertian Java, saya hanya menemukan penggunaan untuk Pola Singleton (bagus untuk caching) dan Pola pengamat untuk fungsionalitas yang digerakkan oleh acara seperti menetapkan beberapa tindakan ketika pengguna mengklik tombol.

Contoh penggunaan Pola Observer adalah:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

Dan itu hanya beberapa trik di tas OO JS saya, semoga mereka berguna bagi Anda.

Saya sarankan jika Anda berniat untuk turun ke jalan ini yang Anda baca Douglas Crockfords Javascript: Bagian-bagian yang Baik. Ini adalah buku yang brilian untuk hal-hal ini.


24
2017-10-10 11:28



Saya seorang penggemar dari Pola Modul. Ini adalah cara menerapkan kerangka kerja yang dapat diperpanjang, tidak bergantung (sebagian besar waktu).

Contoh:

Kerangka kerja, Q, didefinisikan seperti ini:

var Q = {};

Untuk menambahkan fungsi:

Q.test = function(){};

Kedua baris kode ini digunakan bersama untuk membentuk modul. Gagasan di balik modul adalah bahwa mereka semua memperluas beberapa kerangka dasar, dalam hal ini Q, tetapi tidak bergantung satu sama lain (jika dirancang dengan benar) dan dapat dimasukkan dalam urutan apa pun.

Dalam modul, Anda pertama kali membuat objek kerangka kerja jika tidak ada (yang merupakan contoh dari Singleton pola):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

Dengan cara itu, Anda dapat memiliki beberapa modul (seperti yang di atas) dalam file terpisah, dan sertakan dalam urutan apa pun. Salah satu dari mereka akan membuat objek kerangka, dan kemudian memperpanjangnya. Tidak perlu manual untuk memeriksa apakah kerangka kerja ada. Kemudian, untuk memeriksa apakah ada modul / fungsi dalam kode khusus:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

20
2017-09-16 00:23



Pola tunggal sering sangat membantu untuk 'enkapsulasi' dan hal-hal organisasi. Anda bahkan dapat mengubah aksesibilitas.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

cara paling bersih untuk menerapkan tunggal di javascript


6
2017-09-16 00:25



Saya sangat suka jquery's pola chaining metode, memungkinkan Anda untuk memanggil beberapa metode pada satu objek. Itu membuatnya sangat mudah untuk melakukan beberapa operasi dalam satu baris kode.

Contoh:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});

4
2017-09-16 00:23



Saya sangat suka Pola dekorator dengan plugin jQuery. Daripada memodifikasi plugin untuk memenuhi kebutuhan Anda, tulislah plugin khusus yang hanya meneruskan permintaan dan menambahkan parameter dan fungsi tambahan.

Misalnya, jika Anda perlu mengirimkan sekumpulan argumen default di sepanjang waktu, dan Anda memerlukan perilaku yang sedikit berbeda yang terkait dengan logika bisnis, tulislah plugin yang melakukan apa pun pre dan post pekerjaan diperlukan untuk memenuhi kebutuhan Anda dan melewati argumen default Anda jika argumen-argumen khusus tersebut tidak ditentukan.

Manfaat utama dari ini adalah bahwa Anda dapat memperbarui pustaka Anda dan tidak khawatir tentang perubahan pustaka porting. Kode Anda mungkin rusak, tetapi setidaknya ada kemungkinan itu tidak akan terjadi.


3
2017-09-16 00:32



Salah satu pola yang berguna di dunia javascript adalah pola chaining yang dibuat populer oleh LINQ di tempat pertama, dan juga digunakan di jQuery.

pola ini memungkinkan kita untuk memanggil metode yang berbeda dari kelas dalam cara perantaian.

struktur utama dari pola ini adalah sebagai

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

ide kunci dari pola ini adalah this kata kunci, yang memungkinkan akses ke anggota Kalkulator publik lainnya.


3
2018-05-18 18:07