记录一次多按钮事件开发，该如何合理触发事件对于多按钮事件，肯定不能用传统的给每个按钮绑定个事件，太多了后期维护成本非常大

对于多按钮事件，肯定不能用传统的给每个按钮绑定个事件，太多了后期维护成本非常大，头也晕，我们可通过控制数据来渲染触发事件。

html代码给除外层包裹标签即可

<body>
    <div class="warp">
        <div class="toolbar"></div>
    </div>
</body>

我们通过JavaScript 数据来控制按钮内容个数、事件、是否隐藏、是否是切换按钮、等操作，数据如下：

$(function(){
        var toolbar = {
            show: true, // 是否显示
            backgroundColor: '#fff', //背景颜色
            height: "60px", // 高度
            width: "100%", // 宽度
            btns: [
                {
                    id: 'btn1', //按钮 id
                    name: '按钮1', // 按钮名称
                    icon: 'btn1', //按钮图标 可使用字体图标
                    isSwitch: true, //是否开关，可相互切换
                    switchOn: false, //isSwitch为true时使用用
                    isShow: true, // 是否显示
                    disabled: true // 是否不可点击，禁用状态
                },
                {
                    id: 'btn2',
                    name: '按钮2',
                    icon: 'btn2',
                    isSwitch: true,
                    switchOn: false,
                    isShow: true,
                    disabled: true
                },
            ]
        };
 }

现在不管有多少个按钮，按钮是什么形式，我们都可以通过这个toobar对象来控制，更方便管理。还可以通过后台来输出toobar数据。

现在我们要对toobar对象数据进行判断，循环输出到页面上。渲染出来。

1、通过toobar.show 判断他是否显示还是隐藏。

2、给toobar赋上style样式，让页面按照toobar对象的数值来显示样式。

var toolbarHander = {
    // 渲染toolbar
    renderToolbarHtml: function(){
        if(toolbar && toolbar.show){
            $(".toolbar").css({
                "width": toolbar.width ? toolbar.width : '100%',
                "height": toolbar.height ? toolbar.height : '40px',
                "background-color": toolbar.backgroundColor ? toolbar.backgroundColor : '#acb2bf',
                'color': toolbar.color ? toolbar.color : '#FFF',
            }).show();
        }
    }
}

3、我们要针对boobar.btns 进行循环输出到页面上。记得把btns的数据赋值到标签的自定义属性上。

var toolbarHander = {
    // 渲染toolbar
    renderToolbarHtml: function(){
        var toolbarHtml = '';
        $(toolbar.btns).each(function () {
            toolbarHtml += toolbarHander.renderButton(this);
        });
        $('.toolbar').html(toolbarHtml);
   },
    /**
     * 渲染单个按钮
     * @param {object} btnOptions 
     */
    renderButton: function (btnOptions) {
        var hide = btnOptions.isShow === false ? ' item-hide' : '';
        var html = '',
            css = '',
            optonsString = toolbarHander.optionsToString(btnOptions);
        if (btnOptions.switchOn) {
            css += 'toolbar-item-selected';
        }
        html += '<button title="' + btnOptions.name + '" id="toolbarItem_' + btnOptions.id + '" class="toolbar-item'+hide+' '+ css +' " options="' + optonsString + '">' +
            '<i class="icon icon-' + btnOptions.icon + '"></i>' +
            '<span class="">'+ btnOptions.name +'</span>' +
            '</button>';
        return html;
    },
}

4、进行点击按钮，从自定义属性拿到相应的值，进行事件操作。单个按钮多事件切换，因根据自定义属性的值判断后，重新渲染下button数据。

// 渲染toolbar
renderToolbarHtml: function(){
    if(toolbar && toolbar.show){
        $('.toolbar').on('click', '.toolbar-item', function (e) {
            var optionsString = $(this).attr('options'),
                options = toolbarHander.optionsToJson(optionsString);
            try {
                __handler[options.id].call(this, e, options);
            } catch (error) {
                console.error(error);
            }
        });
     }
}

/**
 * 封装按钮处理方法，加'__'下划线，防止污染window全局
 * 回调方法key值必须是按钮id
 */
var __handler = {

    /**
     * 按钮1
     */
    btn1: function (e, options){
        if (options.isSwitch) {
            if (options.switchOn) {
                options.switchOn = false;
                options.name = 'btn1';
                options.icon = 'btn2';
            } else {
                options.switchOn = true;
                options.name = 'btn1关';
                options.icon = 'btn1';
            }
            toolbarHander.refreshButton(options);
        }
    },

    /**
     * 按钮2
     */
    btn2: function (e, options){
        if (options.isSwitch) {
            if (options.switchOn) {
                options.switchOn = false;
                options.name = 'btn2';
                options.icon = 'btn1';
            } else {
                options.switchOn = true;
                options.name = 'btn2关';
                options.icon = 'btn2';
            }
            toolbarHander.refreshButton(options);
        }
    },
}

代码已上传gitee，需要的朋友去看看 gitee地址

本文来源于个人博客，查看更多个人博客