trjhtr

I'd like to see if it's possible to make this code more DRY.

$( '#menu-primary-navigation' ).on(
 mouseenter: function() 
 pageScreen.fadeIn();
 ,
 mouseleave: function() 
 pageScreen.fadeOut();
 
);

I must admit to a bit of a chuckle when reading this question as there are only 8 lines of code which is already fairly DRY.

As it stands alone one change you could make to DRY it out a little is use function shorthand for the mouse events

$( '#menu-primary-navigation' ).on(
 mouseenter() pageScreen.fadeIn() ,
 mouseleave() pageScreen.fadeOut() 
);

You could go ultra dry and unreadable, using an array to hold only the parts of the names that change, and Array.reduce to construct the object required for $().on.

$( '#menu-primary-navigation' ).on(
 [["enter", "in"], ["leave", "out"]].reduce((obj, n) =>
 (obj["mouse" + n[0]] = () => pageScreen["fade" + n[1]](), obj),
 
 )
)

That would be the worst way to dry out the code

Or you could reference the functions directly, BUT I am not familiar enough with JQuery to know if you would need to bind the functions to pageScreen or not. That would however add repeating code, defeating the exercise

// may work 
$( '#menu-primary-navigation' ).on(
 mouseenter : pageScreen.fadeIn,
 mouseleave : pageScreen.fadeOut
);

// or if not bind the functions to pageScreen
$( '#menu-primary-navigation' ).on(
 mouseenter : pageScreen.fadeIn.bind(pageScreen),
 mouseleave : pageScreen.fadeOut.bind(pageScreen)
);