不更改html的情況下，這幾個JS代碼如何簡化？

Question

前幾天板上大神們教了 mysql 簡化方式（同個查詢）
現在想學些 JS 簡化方式
前提是在不動到html的情況下是否可以簡化？

例如

$('.status-btn').mouseenter(function(e) {
  var public_order_id = e.currentTarget.dataset.public_order_id;
  var id = e.currentTarget.dataset.id;
  var type = e.currentTarget.dataset.type;

  $('.'+type+'-'+public_order_id+', .status-sublist-layout-after-btn').show();
});

$('.status-layout').mouseleave(function(e) {
  var public_order_id = e.currentTarget.dataset.public_order_id;
  var id = e.currentTarget.dataset.id;
  var type = e.currentTarget.dataset.type;

  $('.'+type+'-'+public_order_id+', .status-sublist-layout-after-btn').hide();
});

$('.status-sublist-layout-after-btn').click(function(event) {
  $('.admin-status-submenu-layout, .admin-status-submenu-layout-large, .status-sublist-layout-after-btn').hide();
});

這一段比較特別，
有blog-menu, manager-menu, log-menu, setting-menu
只是替換成 quick-menu ，其他都一樣

$('.quick-menu').click(function(e) {
  $('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').hide();
  $('.quick-layout').show();
});
$('.quick-layout').mouseleave(function(e) {
  $('.quick-layout').hide();
});

$('.blog-menu').click(function(e) {
  $('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').hide();
  $('.blog-layout').show();
});
$('.blog-layout').mouseleave(function(e) {
  $('.blog-layout').hide();
});

......

這是我目前想到的簡易方式，已經盡力.....
不過大神們肯定還有方法.....
學會了我就能套用到其他function，受益良多！如果可以的話幫我打一下原理
感謝大神指教！

Answer 1

没有Html结构的前提下，前面的脚本暂无多大优化空间。
主要是后面那段“特殊”的脚本必须优化。 假设你的html结构是这样的：

<div>
    <div class='quick-menu'></div>
    <div class='blog-menu'></div>
    <div class='manager-menu'></div>
    <div class='log-menu'></div>
    <div class='setting-menu'></div>
</div>
<div>
    <div class='quick-layout'></div>
    <div class='blog-layout'></div>
    <div class='manager-layout'></div>
    <div class='log-layout'></div>
    <div class='setting-layout'></div>
</div>

在不动你的html情况下这样改

$('.quick-menu, .blog-menu, .manager-menu, .log-menu, .setting-menu').click(function(e) {
        var menuName = $(this).attr('class').match(/(\w+)\-menu/)[1];
        $('.' + menuName +'-layout').show().siblings().hide();
    });
$('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').mouseleave(function(e) {
         $(this).hide();
    });

Answer 2

    //事件dom绑定关系映射，顺便抽象了一下你方法内部逻辑
     var maps={
        '.status-btn mouseenter show':'toggle',
        '.status-layout mouseenter hide':'toggle',
        '.status-sublist-layout-after-btn click hide':'clickHide',
        '.quick-menu click .quick-layout':'menuToggle',       
        '.blog-menu click .blog-layout':'menuToggle'
        '.quick-layout mouseleave hide':'layOutMsLvHide',
        '.blog-layout mouseleave hide':'layOutMsLvHide'
        
    }
    
   //事件绑定
    function   _delegate(name, selector, func,vis) {
        $(document).on(name, selector, function (e) {
            func.apply(null,[e,$(this),vis])
        });
    }
    //循环解析map,进行绑定
   function _scanEventsMap (maps) {        
        var bind = _delegate;
        for (var keys in maps) {
            if (maps.hasOwnProperty(keys)) {
                var matchs = keys.split(' ');
                if (typeof maps[keys] === 'string') {

                    maps[keys] = this[maps[keys]]; 
                }
                bind(matchs[0], matchs[1], maps[keys].bind(this),matchs[3]);
            }
        }
    }
        
    
    
   function toggle(e,jqObj,vis){
      var public_order_id = e.currentTarget.dataset.public_order_id;
      var id = e.currentTarget.dataset.id;
      var type = e.currentTarget.dataset.type;

      $('.'+type+'-'+public_order_id+', .status-sublist-layout-after-btn')[vis]();
    }
    
    function clickHide(e,jqObj,vis){
        $('.admin-status-submenu-layout, .admin-status-submenu-layout-large, .status-sublist-layout-after-btn')[vis]();
    }
    
    function menuToggle(e,jqObj,el){
      $('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').hide();
      $(el).show();
    }
    
    function layOutMsLvHide(e,jqObj,vis){
      jqObj[vis]();
    }
  
  $(function(){
   _scanEventsMap(maps);
  })        

希望能帮到你。
更完善的实现可以看看我的github