Most of the code duplicates in these two mouse events. How can we merge the duplicate code?

problem description

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

window.onload = function () {

var hdList = $(".hd-list")[0],
    hdLi = $(".hd-list>li");
hdList.onmouseover = function(e){
    var ev = e || window.event,
        target = ev.target || ev.srcElement,
        tagName = target.nodeName.toLowerCase();
    if(tagName!="ul"){
        while (target.nodeName.toLowerCase()!="li"){
            target = target.parentNode;
        }
        clearBlankNodes(target);
        var childNodes = target.childNodes;
        childNodes[0].classList.add("green-text");
        if(childNodes.length>1){
            childNodes[1].classList.remove("dis-hide");
        }
    }
}
hdList.onmouseout = function(e){
    var ev = e || window.event,
        target = ev.target || ev.srcElement,
        tagName = target.nodeName.toLowerCase();
    if(tagName!="ul"){
        while (target.nodeName.toLowerCase()!="li"){
            target = target.parentNode;
        }
        clearBlankNodes(target);
        var childNodes = target.childNodes;
        childNodes[0].classList.remove("green-text");
        if(childNodes.length>1){
            childNodes[1].classList.add("dis-hide");
        }
    }
}

}

what result do you expect? What is the error message actually seen?

Javascript
Dec.08,2021

there are two ways to solve it:

  • first: write a more generic handler , which implements logic similar to that on the first floor, by adding logic through if-else . The advantage of this method is that it is simple and easy, but the disadvantage is that if the logic is complex, noodle code will be formed, readability will become worse, and it will be difficult to maintain
    • .
  • second: extract the custom logic by using higher-order functions and callback , and hand over the specific implementation to the caller, such as 
const handler = function(callback){
    return function(e){
        var ev = e || window.event,
        target = ev.target || ev.srcElement,
        tagName = target.nodeName.toLowerCase();
        if(tagName!='ul'){
            while (target.nodeName.toLowerCase()!='li'){
                target = target.parentNode;
            }
            clearBlankNodes(target);
            
            var childNodes = target.childNodes;
            
            // childNodes[0].classList.remove('green-text');
            // if(childNodes.length>1){
                // childNodes[1].classList.add('dis-hide');
            // }
            
            callback(childNodes)
        }
    }
}

hdList.onmouseout=handler(childNodes => // do something...)
hdList.onmouseover=handler(childNodes =>// do something... )

you can then extract handler into another module file, but be aware that pointing problems involving this may require special handling. At the same time, this model also has certain requirements for the use of the scene, that is, it must have a fixed logic and pattern, but it seems that you happen to fit it here.

is to re-encapsulate a method, then extract the differences, determine which event it is by the event type, and then execute the relative logic 

function hover(e) {
  ...
  if (tagName != 'ul') {
    ...
    if (e.type === 'mouseover') {
      ...
    } else if (e.type === 'mouseout') {
      ...
    }
  }
}
hdList.onmouseover=hover
hdList.onmouseout=hover

Previous: How to convert message generated by grpc/thrift idl file to Java Bean

Next: Will the vue-cli project, which is not used in dependencies, be typed in when packing?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu