Extjs: mở rộng lớp thông qua hàm tạo hoặc initComponent?

Question

Trong extjs bạn luôn có thể mở rộng một lớp extjs qua constructor(). Đối với các lớp học từ Component, bạn cũng có thể mở rộng qua initComponent().

Tôi tự hỏi tại sao nhiều mã mở rộng qua initComponent, trong khi constructor có vẻ là phương pháp mở rộng phổ dụng. initComponent có cung cấp lợi thế rõ ràng hơn constructor không?

Answer 1

Trước hết, khả năng ghi đè qua constructor đã được thêm vào phiên bản sau của Ext hơn initComponent, vì vậy tất cả mã của một độ tuổi nhất định sẽ phải sử dụng initComponent. Những ngày này, bạn vẫn sẽ ghi đè initComponent nếu bạn muốn làm bất cứ điều gì sau initComponent lớp cơ sở được gọi (hàm khởi tạo sẽ là quá sớm cho điều này), nhưng trước thành phần được hiển thị. Trong nhiều trường hợp (như phổ biến nhất, thiết lập cấu hình), nó không thực sự quan trọng trong cả hai cách và hầu hết mọi người làm bất cứ điều gì là thuận tiện nhất. Tuy nhiên, có một số trường hợp mà nó quan trọng.

Answer 2

Dưới đây là một số trích dẫn có liên quan từ cuốn sách của Jay Garcia ExtJS trong hành động:.

"initComponent được thực hiện bên trong constructor lớp Component, nhưng chỉ sau một vài nhiệm vụ thiết lập quan trọng đối với các thành phần đã diễn ra Những nhiệm vụ này bao gồm các bộ nhớ đệm và áp dụng các thuộc tính đối tượng cấu hình cho trường hợp lớp "

và sau đó, và trong bối cảnh xây dựng được nơi các thông số cấu hình được áp dụng cho các trường hợp:

" nếu cấu hình thể hiện của các lớp con sẽ không bao giờ cần được nhân bản thông qua cloneCo nfig .... sau đó mở rộng thông qua các nhà xây dựng là sự lựa chọn tốt nhất. "

Nhân tiện, mặc dù sách của Jay có về ExtJS 3 nhưng dường như cloneConfig vẫn có liên quan trong ExtJS4; xem:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

và

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig

Answer 3

Hãy để tôi thử một câu trả lời được cập nhật về phiên bản ExtJS 4,0-4,2 và xa hơn nữa.

constructor() là đối tượng/lớp trước khi tạo phương thức. Và initComponent() là thành phần trước khi hiển thị phương pháp.

constructor: function(config) { 
    // ctor #1 - insert code here to modify config or run code to inject config 
    // probably the cheapest place to make changes - before anything has been built 

    this.callParent(arguments); 

    // ctor #2 - insert code here if you need to make changes 
    // after everything has been rendered and shown, IIUC 
}, 
initComponent: function() { 
    // this function runs between ctor #1 and ctor #2 

    // initComponent #1 - the UI component object tree is created, 
    // (this object and child objects from config { items: [{...}]}) 
    // but they have not yet been rendered to DOM or shown. 

    this.callParent(arguments); 

    // initComponent #2 - I believe this is equivalent to ctor #2, 
    // I would prefer ctor as it is more universal. 
} 

Bảng có bố cục con hoặc phức tạp có thể bạn sẽ cần sử dụng initComponent, vì bạn cần kiểm tra và thao tác các thành phần (biểu đồ đối tượng giao diện người dùng).

Nhưng đối với các yếu tố biểu mẫu riêng lẻ (combobox, nút, vv) thì tôi gắn bó với hàm tạo, cái mà tôi tin là nhẹ hơn (trước bất kỳ đối tượng phức tạp hoặc thay đổi DOM) và phổ biến hơn. Các nhà xây dựng IOW có thể được sử dụng cho các giao diện người dùng, mô hình và dữ liệu đơn giản; sau này không thể sử dụng initComponent.

Vì vậy, tôi chỉ sử dụng initComponent khi có lý do để làm như vậy. Thường thì khi tôi viết một hàm initComponent, tôi đang cố gắng thao tác với các đối tượng UI con, và bước tiếp theo của tôi là trích xuất điều khiển con đó vào Ext của riêng nó.define(), di chuyển mã tùy chỉnh để chạy trong lớp điều khiển con, loại bỏ init phức tạp khỏi bảng cha. Quá trình này tôi đã lặp lại 4 lần trong trang mới nhất của tôi.