Advantage của việc sử dụng phương pháp trong OOP Javascript

Question

Tôi đã xem qua một file JS được xây dựng một cách kỳ lạ:

var modal = (function(){ 
    var method = {}; 

    // Center the modal in the viewport 
    method.center = function() {}; 

    // Open the modal 
    method.open = function (settings) {}; 

    // Close the modal 
    method.close = function() {}; 

    return method; 
}()); 

tôi hiểu được một phần của gói một hàm vào "phương thức" đối tượng, nhưng tại sao ràng buộc tất cả các chức năng để method và sau đó trả lại nó ở cuối?

Answer 1

Đây là mẫu thiết kế để nhóm các chức năng thành các mô-đun và để loại bỏ các biến toàn cục. Điều này dẫn đến mã tốt hơn.

1. Cuộc gọi hàm tạo 'đóng' nghĩa là phạm vi cho tất cả các biến được khai báo trong hàm đó, chúng giữ nguyên ngay cả khi chức năng đã thoát và chúng không hiển thị bên ngoài chức năng.

    var modal = (function(){ 
        var method = {}; 
        // Center the modal in the viewport 
        method.center = function() {}; 
   
        // Open the modal 
        method.open = function (settings) {}; 
   
        // Close the modal 
        method.close = function() {}; 
   
        return method; 
       }()); // This function call here creates a "closure" (scope) 
   

2. Bây giờ để chắc chắn các thành viên của các mô-đun có sẵn bên ngoài module, họ cần phải được trả về từ hàm, đây return method làm chính xác điều đó, làm cho method một đối tượng nào của các mô-đun, có thể được sử dụng bên ngoài .

3. Thay vì tạo ra các biến invididual như open, close vv, các chức năng liên quan được giao nhiệm vụ như tài sản (phím của đối tượng) cho các đối tượng chính method, để trả lại đối tượng duy nhất làm cho tất cả các chức năng liên quan accesible. Điều này cũng phục vụ mục đích giảm số lượng định danh (tên) trong phạm vi đóng.

Đọc bài viết này rất tốt trên mô hình modular này:

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Answer 2

Cho rằng mã cụ thể, không có lợi thế. Nó không giống như:

var modal = { 

    // Center the modal in the viewport 
    center: function() {}, 

    // Open the modal 
    open: function (settings) {}, 

    // Close the modal 
    close: function() {}, 

}; 

Tuy nhiên, nếu bạn đặt một biến cục bộ trong hàm, đó là một vấn đề khác:

var modal = (function(){ 

    // a variable that is private to the object 
    var local = 'hello world'; 

    var method = {}; 

    // Center the modal in the viewport 
    method.center = function() {}; 

    // Open the modal 
    method.open = function (settings) {}; 

    // Close the modal 
    method.close = function() {}; 

    return method; 
}()); 

Bây giờ tất cả các phương pháp trong đối tượng có thể truy cập các biến riêng, nhưng nó không thể truy cập trực tiếp từ bên ngoài đối tượng.