Ví dụ về các mẫu thiết kế hướng đối tượng javascript thực tế

Question 1

Bạn sử dụng mẫu thiết kế hướng đối tượng nào trong javascript của ứng dụng của mình và tại sao?

Hãy thoải mái đăng mã, ngay cả khi không có mẫu thiết kế chính thức nào đính kèm.

Tôi đã viết rất nhiều javascript, nhưng tôi đã không áp dụng nhiều mẫu hướng đối tượng cho những gì tôi đang làm và tôi chắc chắn rằng tôi còn thiếu rất nhiều.

Question 2

Sau đây là ba mẫu JavaScript phổ biến. Những điều này xảy ra có thể dễ dàng thực hiện vì các đóng :

Mô hình Mô-đun - Ví dụ (và được phổ biến) bởi Eric Miraglia
Ghi nhớ - Ví dụ bởi Oliver Steele
Currying - Ví dụ của Dustin Diaz

Bạn cũng có thể muốn xem:

Các mẫu thiết kế JavaScript Pro của Ross Harmes và Dustin Diaz

Sau đây là bài nói chuyện về Google I / O từ năm 2008 do Diaz trình bày, nơi anh ấy thảo luận về một số chủ đề từ cuốn sách của mình:

Google I / O 2008 - Mẫu thiết kế bằng ngôn ngữ biểu cảm

Question 3

Di sản

Tôi sử dụng ký hiệu cho thừa kế dựa trên ExtJS 3 , mà tôi thấy hoạt động khá gần với mô phỏng kế thừa cổ điển trong Java. Về cơ bản nó chạy như sau:

// 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();

Không gian tên

Tôi cũng đồng ý với Eric Miraglia về việc gắn bó với không gian tên vì vậy mã ở trên phải được chạy trong ngữ cảnh riêng của nó bên ngoài đối tượng cửa sổ, điều này rất quan trọng nếu bạn định chạy mã của mình dưới dạng một trong nhiều khung / thư viện đồng thời thực thi trong cửa sổ trình duyệt.

Điều này có nghĩa là cách duy nhất đến đối tượng window là thông qua đối tượng mô-đun / không gian tên của riêng bạn:

// 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

})();

Giao diện

Bạn cũng có thể sử dụng các cấu trúc OOP tiến bộ hơn như giao diện để nâng cao thiết kế ứng dụng của mình. Cách tiếp cận của tôi đối với những điều này là tăng cường Function.prototypeđể có được ký hiệu dọc theo những dòng sau:

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

Các mẫu OO

Đối với 'Mẫu' theo nghĩa Java, tôi chỉ thấy sử dụng cho mẫu Singleton (tuyệt vời cho bộ nhớ đệm) và mẫu Observer cho chức năng hướng sự kiện, chẳng hạn như chỉ định một số hành động khi người dùng nhấp vào nút.

Một ví dụ về việc sử dụng Mô hình trình quan sát sẽ là:

// 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');
});

Và đó chỉ là một vài thủ thuật trong túi OO JS của tôi, hy vọng chúng hữu ích với bạn.

Tôi khuyên nếu bạn có ý định đi theo con đường này, bạn nên đọc Douglas Crockfords Javascript: the Good Parts . Đó là một cuốn sách tuyệt vời cho công cụ này.

Question 4

Tôi là một fan hâm mộ của Mô hình mô-đun . Đó là một cách triển khai các khuôn khổ có thể mở rộng, không phụ thuộc (hầu hết thời gian).

Thí dụ:

Khung, Qđược định nghĩa như sau:

var Q = {};

Để thêm một chức năng:

Q.test = function(){};

Hai dòng mã này được sử dụng cùng nhau để tạo thành các mô-đun . Ý tưởng đằng sau các mô-đun là tất cả chúng đều mở rộng một số khuôn khổ cơ sở, trong trường hợp này Q, nhưng không phụ thuộc vào nhau (nếu được thiết kế chính xác) và có thể được đưa vào bất kỳ thứ tự nào.

Trong một mô-đun, trước tiên bạn tạo đối tượng khung nếu nó không tồn tại (đó là một ví dụ về mẫu Singleton ):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

Bằng cách đó, bạn có thể có nhiều mô-đun (như mô-đun ở trên) trong các tệp riêng biệt và bao gồm chúng theo bất kỳ thứ tự nào. Bất kỳ ai trong số họ sẽ tạo đối tượng khung, và sau đó mở rộng nó. Không cần thủ công để kiểm tra xem khung có tồn tại hay không. Sau đó, để kiểm tra xem mô-đun / chức năng có tồn tại trong mã tùy chỉnh hay không:

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

Question 5

Mô hình singleton thường rất hữu ích cho việc 'đóng gói' và tổ chức. Bạn thậm chí có thể thay đổi khả năng tiếp cận.

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

cách tốt nhất để triển khai một singleton trong javascript

Question 6

Tôi thực sự thích mô hình chuỗi phương thức của jquery , cho phép bạn gọi một số phương thức trên một đối tượng. Nó giúp bạn thực sự dễ dàng thực hiện một số thao tác trong một dòng mã.

Thí dụ:

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

Question 7

Tôi thực sự thích mẫu Decorator với các plugin jQuery. Thay vì sửa đổi các plugin để đáp ứng nhu cầu của bạn, hãy viết một plugin tùy chỉnh chỉ chuyển tiếp các yêu cầu và thêm các thông số và chức năng bổ sung.

Ví dụ: nếu bạn luôn cần chuyển một tập hợp các đối số mặc định và bạn cần hành vi hơi khác liên quan đến logic nghiệp vụ, hãy viết một plugin thực hiện bất cứ điều gì prevà posthoạt động cần thiết để phù hợp với nhu cầu của bạn và chuyển các đối số mặc định của bạn nếu những đối số cụ thể đó không được chỉ định.

Lợi ích chính của việc này là bạn có thể cập nhật thư viện của mình và không phải lo lắng về việc chuyển thư viện thay đổi. Mã của bạn có thể bị hỏng, nhưng ít nhất có khả năng là không.

Question 8

Một trong những mẫu hữu ích trong thế giới javascript là mẫu chuỗi được LINQ phổ biến ngay từ đầu và cũng được sử dụng trong jQuery.

mẫu này cho phép chúng ta gọi các phương thức khác nhau của một lớp theo cách thức chuỗi.

cấu trúc chính của mô hình này sẽ là

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);
    });

ý tưởng chính của mẫu này là thistừ khóa, giúp truy cập vào thành viên công khai khác của Calculator fucntion.