Làm thế nào để hồ sơ (Debug) ExtJS EventPipe/Sự kiện

Question

Tôi đang làm việc trên một ứng dụng ExtJS MVC tương đối lớn với khoảng> 40 bộ điều khiển,> 100 cửa hàng,> 100 mô hình và như vậy. Tôi không làm theo cách MVC có thể nghiêm ngặt vì vậy tôi thực hiện một khởi tạo điều khiển lười biếng mà khởi tạo bộ điều khiển đầu tiên khi nó được yêu cầu và do đó các cửa hàng. Tôi cũng không đăng ký bất kỳ chế độ xem nào trong bất kỳ trình điều khiển nào, nhưng điều đó đơn giản là nguyên nhân khiến tôi không cần.

Bây giờ, các biểu mẫu (mở trong Ext.window.Window) mất khoảng 1-2 giây cho đến khi chúng hiển thị trong khi cùng một biểu mẫu trong một dự án khá nhỏ xuất hiện ngay lập tức. Vì vậy, các hình thức (bố trí) không thể là vấn đề ở đây những gì mang lại cho tôi các sự kiện. Nhưng tôi không thực sự biết làm thế nào sẽ là cách tốt nhất hoặc là đã có một hướng dẫn tốt làm thế nào để làm điều này. Tôi đoán nó sẽ là tốt đẹp để hồ sơ này, để xem bao lâu toàn bộ ống mất (không chỉ là EventPipe chính nó).

cấu trúc tổ chức sự kiện:

Hầu hết các sự kiện được đăng ký qua control() của bộ điều khiển có trách nhiệm. Tất cả các sự kiện khác được đăng ký nhiều nhất với { single: true }. Các cửa sổ được đóng lại và phục hồi khi tái sử dụng.

Answer 1

Tôi sợ nhưng ExtJS không cung cấp bất kỳ hồ sơ sự kiện nào. Nó sử dụng hệ thống sự kiện tùy chỉnh.

Đây là cách tôi xem giải pháp của vấn đề này.

Có Ext.util.Event lớp cung cấp chức năng gửi và xử lý bất kỳ sự kiện nào được sử dụng trong khung và Ext.app.EventBus cung cấp một điểm để gửi tất cả các sự kiện khung (fireEvent chỉ là trình bao bọc cho phương thức Ext.app.EventBus.dispatch).

Các lớp học riêng tư nên tôi khuyên bạn nên xem mã nguồn của nó.

Bạn có thể ghi đè lên các lớp này để xem có bao nhiêu phải mất từ ​​cách gọi phương thức Ext.app.EventBus.dispatch và kêu gọi sự kiện người nghe trong Ext.util.Event.fire phương pháp smth như thế (EventProfiler được coi là của bạn lớp riêng)

Ext.app.EventBus

dispatch: function (/* event name or Ext.util.Event */event, /* Target class */ target, args) { 
    //start timing 
    var start = new Date(); 

    /* ... */ 

    for (i = 0, ln = events.length; i < ln; i++) { 
     event = events[i]; 
     // Fire the event! 
     if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) { 
      return false; 
     } 
     // start event profiling 
     // here we are sure that event is dispatched and it's instance of Ext.util.Event 
     EventProfiler.startProfile(event, /* time passed from dispath method started */new Date() - start); 
    } 

    /* rest of dispatch method call */ 
} 

Ext.util.Event

fire: function() { 
    /* ... */ 
    if (listener.o) { 
     args.push(listener.o); 
    } 

    EventProfiler.endProfile(this); 

    if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) { 
     return (me.firing = false); 
    } 

    /* ... */  

}