Cách tách plugin jQuery qua nhiều tệp

Question

Tôi đang viết một CMS nhỏ làm plugin jQuery AJAX và mặc dù nó không có nghĩa là quá dài (hiện tại khoảng 500 dòng) tôi có thể thấy nó sẽ rất hay để có thể chia nhỏ nó vào các tập tin riêng biệt, một cho mỗi "phân lớp":

(function($) { 
    $.fn.myCMS = function() { 
     this.classOne = function() { 
     ... 
     } 
     this.classTwo = function() { 
     ... 
     } 
    } 
})(jQuery); 

trong ví dụ trên, tôi muốn đặt mã cho classOne trong một tập tin, classTwo trong một và myCMS "baseclass" trong một phần ba. Có thể đạt được điều này với một cái gì đó như thế này (trong mỗi tập tin "phân lớp")?

$.extend(myCMS,classOne = function() { 
... 
}) 

Rất cám ơn,

JS

Answer 1

Bạn muốn thêm vào "cắm" với một phạm vi private/tách quan tâm. Điều này có thể quan trọng để bảo trì và khả năng mở rộng lâu dài của ứng dụng web dựa trên plugin của bạn, bất kể mọi thứ sẽ được tích hợp vào một tệp hay nhiều tệp.

Bạn có thể tạo một phạm vi riêng tư và mở rộng một phương pháp jQuery.fn hiện bằng cách gắn các phương pháp trực tiếp hoặc bằng cách thêm vào nguyên mẫu của phương pháp jQuery.fn.foo

(function ($) { 

    // instance method attached to the constructor function 
    $.fn.myCMS.classOne = function() { 

    }; 

    // or "shared" method attached to prototype 
    $.fn.myCMS.prototype.classOne = function() { 

    }; 

})(jQuery); 

Bạn có thể sử dụng jQuery.extend(), mà trong trường hợp này thực sự là một "viết tắt" để thêm phương thức vào thể hiện của hàm tạo như là phương thức đầu tiên ở trên. Bạn phải đóng gói bất cứ điều gì bạn đang thêm vào một đối tượng (thường đây sẽ là một đối tượng ẩn danh):

$.extend($.fn.myCMS,{ classOne: function() { } }); 

Từ góc độ thiết kế nếu bạn có "lớp học" mà cần phải nhận được tại các biến closured cùng thường họ có lẽ nên là một phần của cùng một phạm vi chức năng/đóng cửa, hoặc bạn nên để lộ getters và setters cho những biến đóng (có lẽ với quy ước _foo cho thấy chúng được dự định chỉ được sử dụng bởi mã của bạn).

(function ($) { 

    var foo = "foo!"; 

    // combined getter/setter 
    // could also check arguments.length 
    $.fn.myCMS._foo = function (value) { 
      if (typeof(value) != "undefined") { 
       foo = value; 
      } else { 
       return foo; 
      } 
    }; 

)(jQuery); 

Nếu bạn muốn trở thành một hacker và bạn cần phải nhận được ít biến closured từ một phạm vi khác nhau, tôi tin rằng bạn có thể làm như vậy bằng cách thực hiện những phương pháp mới với phạm vi riêng của họ sử dụng .call() hoặc .apply() từ phạm vi khác. Tôi có thể cố gắng roi lên một số mẫu về cách thức hoạt động của nó, nhưng sẽ là một ý kiến ​​hay nếu bạn tự nghiên cứu về cách giải quyết phạm vi hoạt động trong các loại kịch bản này.

Tôi tin rằng bạn có thể "mượn" phạm vi từ phương thức "plugin" gốc bằng cách sử dụng cấu trúc có ($ .fn.myCMS) {} nhưng tôi không hoàn toàn 100% về điều đó vì tôi chưa thực hiện bản thân mình, chỉ đọc về nó.

Answer 2

Nó cũng sẽ giúp bạn xem mã jQuery ui. Ví dụ, plugin thanh tiến trình yêu cầu ba tệp ui.core, ui.widget và ui.progressbar. Tải xuống gói nguồn jQuery UI và xem ví dụ về thanh tiến trình trong thư mục demos. (Tôi không thể tìm thấy phiên bản được đơn giản hóa được lưu trữ ở bất kỳ đâu, nhưng gói nguồn đã có các ví dụ đơn giản)