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

前幾天板上大神們教了 mysql 簡化方式（同個查詢）
現(xiàn)在想學(xué)些 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();
});

......

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

回答

編輯回答

蟲児飛

沒有Html結(jié)構(gòu)的前提下，前面的腳本暫無多大優(yōu)化空間。
主要是后面那段“特殊”的腳本必須優(yōu)化。假設(shè)你的html結(jié)構(gòu)是這樣的：

<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();
    });

2017年9月2日 13:26

編輯回答

柒喵

    //事件dom綁定關(guān)系映射，順便抽象了一下你方法內(nèi)部邏輯
     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])
        });
    }
    //循環(huán)解析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);
  })

希望能幫到你。
更完善的實現(xiàn)可以看看我的github

2017年4月17日 16:27