利用数据结构思维解决问题

[499689317]

关于UI页面内的按钮

• 问题描述：在一个页面中有大量的按钮须要用户点击时，也许作为开发者我们想让用户在点击的同时让被点击的按钮处于一个特殊状态（比如：高亮状态），但同时让另外之前点击过的按钮还原为普通状态，此时我们有非常多的方法实现这个功能。
• 使用一个工厂模式将所有的按钮生成出来，然后为每一个按钮赋予一个标记tag值。
• 使用一个开关语句来各自处理所有的点击事件。
• 我们将所有生成的按钮放入一个全局数组中，在点击处理事件的方法中我们使用一个for循环遍历该数组。
• 根据tag值我们可以轻松将点击按钮变成特殊状态，将其它按钮还原。
• 我们将未点击过的按钮一起处理进去了，如果按钮的数里达到一定范围将会影响整个页面的性能。

    system.right.singleitem = function(index,btn_pic,icon_pic,title_str,date_str,con_view){

        var itembg = kk.sprite(btn_pic);
        itembg.$anchor(0,0);

        var icon = kk.sprite(icon_pic);
        icon.$anchor(0,0);
        icon.x = 10;
        icon.y = 8;
        console.log(icon_pic);
        itembg.addChild(icon);

        var titlebg = kk.sprite(hl.res.public.ui.textbg1);
        titlebg.$anchor(0,0);
        titlebg.x = 90;
        titlebg.y = 16;
        itembg.addChild(titlebg);

        var title_text = kk.text(title_str,{
            font : "20px 黑体",
            fill : "#ffffff"
        });
        title_text.$anchor(0,0);
        title_text.x = 102;
        title_text.y = 18;
        itembg.addChild(title_text);

        var date_text = kk.text(date_str,{
            font : "18px 黑体",
            fill : "#994900"
        });
        date_text.$anchor(0,0);
        date_text.x = 102;
        date_text.y = 70;
        itembg.addChild(date_text);

        // var itemarr = [];
        itembg.interactive = true;
        itembg.on(PIXI.$EV_END,function(){

            system.left.scrolllayer(hdcontent,con_view);

            switch(itembg.tag){
                case 0:
                {
                    for (var i = 0; i < itemarr.length; i++) {
                        if (itemarr[i].tag == 0) {
                            itemarr[i].$setTexture(hl.res.public.ui.selecte);
                        } else{
                            itemarr[i].$setTexture(hl.res.public.ui.normal);
                        }
                    }
                }
                break;
                case 1:
                {
                    for (var i = 0; i < itemarr.length; i++) {
                        if (itemarr[i].tag == 1) {
                            itemarr[i].$setTexture(hl.res.public.ui.selecte);
                        } else{
                            itemarr[i].$setTexture(hl.res.public.ui.normal);
                        }
                    }
                }
                break;
                case 2:
                {
                    for (var i = 0; i < itemarr.length; i++) {
                        if (itemarr[i].tag == 2) {
                            itemarr[i].$setTexture(hl.res.public.ui.selecte);
                        } else{
                            itemarr[i].$setTexture(hl.res.public.ui.normal);
                        }
                    }
                }
                break;
                default:
                break;
            }

        });

        return itembg;
    };

• 首先我第一思维是使用一个队列，我们知道队列具有先进先出的功能，这个数据结构能够非常好的处理这个问题。
• 但是作一个普通的产UI页面我觉得用一个队列来处理按钮对程序运行偏重，所以巧用数组来完成队列的功能能够更快处理问题。
• 虽然数组使用起来更像一个栈，但因为按钮只有俩种状态，所以让完全可以让一个数组装入俩个对象即可完成此功能。
• 即每加入第二个新点击的按钮之前将数组最后一个按钮splice掉，使用起来相当于一个队列的功能。

    system.right.singleitem = function(index,btn_pic,icon_pic,title_str,date_str,con_view){

        var itembg = kk.sprite(btn_pic);
        itembg.$anchor(0,0);

        var icon = kk.sprite(icon_pic);
        icon.$anchor(0,0);
        icon.x = 10;
        icon.y = 8;
        console.log(icon_pic);
        itembg.addChild(icon);

        var titlebg = kk.sprite(hl.res.public.ui.textbg1);
        titlebg.$anchor(0,0);
        titlebg.x = 90;
        titlebg.y = 16;
        itembg.addChild(titlebg);

        var title_text = kk.text(title_str,{
            font : "20px 黑体",
            fill : "#ffffff"
        });
        title_text.$anchor(0,0);
        title_text.x = 102;
        title_text.y = 18;
        itembg.addChild(title_text);

        var date_text = kk.text(date_str,{
            font : "18px 黑体",
            fill : "#994900"
        });
        date_text.$anchor(0,0);
        date_text.x = 102;
        date_text.y = 70;
        itembg.addChild(date_text);

        // var itemarr = [];
        itembg.interactive = true;
        itembg.on(PIXI.$EV_END,function(){
            console.log(itembg.tag);
            /*俩个按钮间的切换，用一个数组过虑保证不会影响性能*/
            itemarr.push(itembg);

            system.left.scrolllayer(hdcontent,con_view);

            if (itemarr.length > 1) {

                itemarr[0].$setTexture(hl.res.public.ui.normal);
                itemarr.splice(0,1);
            }

            itembg.$setTexture(hl.res.public.ui.selecte);

        });

        return itembg;
    };

此时不管我们在这个UI界面不管加入了多少按钮，但是我们要处理的只有数组中的俩个，其它的不用管，在大量按钮的界面下也算是优化了一部份性能。