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


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

Cảm thấy tự do để đăng mã, ngay cả khi không có mẫu thiết kế chính thức gắn liền với nó.

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 tôi đang thiếu rất nhiều.


76
2017-09-16 00:17


gốc


Bạn có thể đã không nhìn thấy OOP cổ điển theo nghĩa mà bạn có thể nghĩ. Tuy nhiên, bạn có thể sử dụng các tính năng với OOP nguyên mẫu và chỉ không bao giờ thực sự nhận ra nó. - dave
Tôi thực sự làm (đôi khi) nhận ra khi tôi đang sử dụng OOP - tôi muốn bắt đầu sử dụng OOP nhiều ý thức hơn, chính xác bởi vì tôi muốn được nhiều hơn nữa có chủ ý về nó - ming yeow
Tôi đang bỏ phiếu để đóng câu hỏi này là không có chủ đề vì nó chỉ yêu cầu một danh sách những thứ người khác làm trong mã của họ. - Almo


Các câu trả lời:


Sau đây là ba mẫu JavaScript phổ biến. Điều này xảy ra dễ dàng thực hiện được vì đóng cửa:

Bạn cũng có thể muốn kiểm tra:

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


51
2017-09-16 00:23



tốt đẹp! cà ri trông giống như một cách thông minh hơn để làm một số khái quát tôi đã cố gắng để làm. đã sử dụng các dạng mô-đun và ghi nhớ đơn giản - nhưng cần phải nghiên cứu các ví dụ này để đẩy cách tôi hiện đang thực hiện. Bạn sử dụng cái nào nhất? - ming yeow
@ming: Có lẽ, đó là mô hình mô-đun. Rất dễ thực hiện và dễ hiểu, và nó đi kèm với một số tính năng thú vị, bao gồm cả các biến không gian tên và các biến / phương thức riêng. - Daniel Vassallo


Di sản

tôi sử dụng một ký hiệu thừa kế dựa trên ExtJS 3, mà tôi thấy các công trình khá gần với việc mô phỏng thừa kế 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 các không gian tên nên mã bên trên phải 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 dự định mã của bạn chạy như một trong nhiều khung / thư viện đồng thời thi hành trong cửa sổ trình duyệt.

Điều này có nghĩa là cách duy nhất để đối tượng cửa sổ là thông qua đối tượng namespace / module 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 nhiều tiến bộ OOP xây dựng như giao diện để nâng cao thiết kế ứng dụng của bạn. Cách tiếp cận của tôi với những là tăng cường Function.prototype để có được ký pháp dọc theo các dòng này:

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

Mẫu OO

Đối với 'Mẫu' theo nghĩa Java, tôi chỉ tìm thấy cách sử dụng cho Mẫu Singleton (tuyệt vời cho bộ nhớ đệm) và Mẫu quan sát 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ẫu Observer 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 của tôi về OO JS, hy vọng chúng hữu ích cho bạn.

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


24
2017-10-10 11:28





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

Thí dụ:

Cơ cấu, Q, được định nghĩa như sau:

var Q = {};

Để thêm một hàm:

Q.test = function(){};

Hai dòng mã này được sử dụng cùng nhau để tạo thành mô-đun. Ý tưởng đằng sau các mô-đun là tất cả chúng đều mở rộng một số khung cơ sở, trong trường hợp này Qnhưng không dựa vào nhau (nếu được thiết kế chính xác) và có thể được bao gồm theo 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ề Singleton mẫu):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

Bằng cách đó, bạn có thể có nhiều mô-đun (giống 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ỳ một trong số họ sẽ tạo ra đối tượng khung, và sau đó mở rộng nó. Không cần hướng dẫn sử dụng để kiểm tra xem khuôn khổ có tồn tại hay không. Sau đó, để kiểm tra xem một mô-đun / hàm 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

20
2017-09-16 00:23



Điều này trông cực kỳ hữu ích. bạn đang sử dụng mã này như thế nào trong mã của mình? cám ơn vì đã chia sẻ! - ming yeow
Tôi đã sử dụng nó trên một dự án gần đây tôi đã làm nơi mà tôi có các tệp JavaScript riêng biệt cho các chức năng chung, giao diện người dùng và hai cơ chế chuyên biệt khác. Tất cả các tệp đã thêm các hàm vào cùng một khung công tác (được định nghĩa bằng cách sử dụng phương thức mà tôi đã trình bày ở trên) và chúng được gọi là các hàm như tôi đã làm ở trên. - Chris Laplante
Một trong những ứng dụng chính cho loại kỹ thuật này là tránh ô nhiễm không gian tên toàn cầu. Điều gì gây ô nhiễm nhiều hơn? Một đơn Q biến khung, hoặc hàng chục và hàng chục chức năng và các biến? - Chris Laplante


Mẫu đơn thường rất hữu ích cho việc đóng gói 'và đóng gói'. Bạn thậm chí có thể thay đổi accesibility.

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

cách sạch nhất để thực hiện một singleton trong javascript


6
2017-09-16 00:25



tuyệt vời - Đây là một trong những tôi sử dụng tất cả các thời gian! Nhưng đó chỉ là về mức độ OO javascript của tôi. ;) - ming yeow


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

Thí dụ:

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

4
2017-09-16 00:23



đúng - đồng ý! bạn đã phát triển các phương pháp tùy chỉnh của riêng bạn hoạt động theo cách này chưa? - ming yeow


tôi thực sự thích thế Mẫu trang trí với các plugin jQuery. Thay vì sửa đổi plugin để đáp ứng nhu cầu của bạn, hãy viế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 cần phải vượt qua một tập hợp các đối số mặc định xung quanh mọi lúc, và bạn cần một hành vi hơi khác nhau liên quan đến logic nghiệp vụ, hãy viết một plugin làm bất cứ điều gì pre và post công việc là cần thiết cho 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 các đố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 thay đổi thư viện. Mã của bạn có thể bị phá vỡ, nhưng có ít nhất cơ hội mà nó sẽ không.


3
2017-09-16 00:32



Điều này nghe có vẻ như một ý tưởng tuyệt vời. Bạn có một ví dụ thực tế về mã để mở rộng thực tế không? Ngay cả một ví dụ đơn giản cũng sẽ giúp mọi người rất nhiều. - ming yeow


Một trong những mô hình hữu ích trong thế giới javascript là chuỗi mô hình được làm phổ biến bởi LINQ ở vị trí đầu tiên, 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 kiểu chuỗi.

cấu trúc chính của mẫu 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à this từ khóa, từ đó có thể truy cập vào thành viên công cộng khác của tính toán fucntion.


3
2018-05-18 18:07