Best practices for initializing and deconstructing controllers

问题

When building an application what is the best way to setup your controllers?

I understand that routing, event listeners, and most all interactivity should be managed by the controllers, but my main controller is starting to grow out of control and I'm not sure how to best separate my logic into separate controllers without keeping them all "running" all the time...

回答1:

It's okay to have them all loaded at app start-up, even with hundreds thousands of controllers. It's the view rendering that takes time.

Make sure your app is minimized and concatenated though, using sencha cmd.

In a test, I created 1000 simple controllers, like this:

Ext.define('app.controller.ControllerN', {
    extend: 'Ext.app.Controller',
    init: function(application) {    
        this.control({
            buttonN1: {
                click: function() {
                }
            },
            buttonN2: {
                click:function(){}
            }, 
            ... 20 listeners
        });
    }
});

I concatenated them into one file, and loaded them in app.js like this:

Ext.application({
    name:'app',
    controllers:[
      'Controller0',
      'Controller1'
       ... 1000 controllers
    ],
    launch:function(){}
}

It took ONE second from browser refresh (Chrome) until the last controller's init method was called.

回答2:

I had similar problem so I divided controllers on the basis of business functionality it will support, e.g. userController does all the user related operations like login, logout, update etc whereas cartController does all the operations related to shopping cart like add to cart, apply coupons, payments etc. Since a single view can have many functionalities related to different areas of app so you can add refs to this view in multiple controllers and listen to only relevant events in corresponding controller.

来源：https://stackoverflow.com/questions/16472136/best-practices-for-initializing-and-deconstructing-controllers