Как оптимизировать память в моем приложении Sencha Touch? - PullRequest
Новая
       28

Как оптимизировать память в моем приложении Sencha Touch?

1 голос
/ 20 августа 2011

Я только начал изучать Sencha Touch, и мне это нравится до сих пор. Я начал строить галерею каруселей миниатюр с всплывающим окном, которое появляется при прикосновении к каждой миниатюре. Пока все хорошо, все работает как положено. Однако я осознаю, что способ, которым я кодировал некоторые вещи, не может быть лучшей практикой. Я просмотрел все обучающие видео.

По сути, я добавил слушателя событий к каждому миниатюре (пока у меня есть 8 миниатюр и 8 слушателей) ... которые запускают 8 отдельных всплывающих окон.

Я думаю, что должен быть лучший способ сделать это, возможно, иметь одного слушателя в теле карусели и 1 всплывающее окно, возможно, с функцией шаблона, которая вызывает переменные из другого места. Это будет правильный способ сделать это? Я также где-то читал, чтобы сохранить память, лучше всего определить всплывающее окно сразу после слушателя, чтобы оно не загружалось сразу.

Вот код одного из моих всплывающих окон (я определил 8 из них): 

 var popup1 = new Ext.Carousel({
        floating: true,
        modal: true,
        centered: true,
        padding: 5,
        width: 800,
        height: 600,            
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                title: 'Slide 1',
            }
        ],
        items: [
            {
                html: 'This is a test',
                }, {
                title: 'Tab 2',
                html: '<img src="cricket.jpg"/>',
                }, {
                title: 'Tab 3',
                html: '3'
                }]
            });

и вот мой код карусели: 

 var carousel1 = new Ext.Carousel({
        defaults: {
            cls: 'card'
        },
        items: [{
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    html: '<img src="1.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup1.show('pop');
            });
        }
    }
                },{
                    flex: 1,
                    html: '<img src="2.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup2.show('pop');
            });
        }
    }
                }]
            },

                {
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    html: '<img src="3.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup3.show('pop');
            });
        }
    }
                },{
                    flex: 1,
                    html: '<img src="4.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup4.show('pop');
            });
        }
    }
                }]
            },
            {
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    html: '<img src="5.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup5.show('pop');
            });
        }
    }
                },{
                    flex: 1,
                    html: '<img src="6.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup6.show('pop');
            });
        }
    }
                }]
             },

             {
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                {   flex: 1,
                    html: '<img src="7.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup7.show('pop');
            });
        }
    }
                },
                {   flex: 1,
                    html: '<img src="8.jpg" />',
                    listeners: {
        afterrender: function(c){
            c.body.select('img').on('click', function(e, t){
                popup8.show('pop');
            });
        }
    }

                }      ]
             }   


            ]},
         ]
    });

Думаю, мне лучше поставить всплывающий код после слушателя?

Большое спасибо,

Simon

1 Ответ

0 голосов
/ 17 сентября 2011

Пройдя еще немного чтения, мне кажется, что мне нужно лучше понять делегирование событий.

Я почти уверен, что лучшей практикой было бы помещать 1 слушателя на карусель вместо нескольких слушателей щелчка на каждом большом пальце. Сенча упоминает что-то вроде этого: 

listeners: {
body: {
    click: myHandler,
    delegate: 'img'
}
}

... как вы думаете, лучшее место для размещения этого слушателя на вершине карусели после этого бита? 

var carousel1 = new Ext.Carousel({
    defaults: {
        cls: 'card'
    },

В конце концов я хотел бы заполнить миниатюры изображений с помощью AJAX и tpl (шаблон), но я еще не дошел до этого!

: -)

Si

...