Calling jQuery plugin methods I have two code snippets and the following questions:


Which uses the best practice and why?
Which one is good for performance?


Code 1

jQuery( function( $ ) {

    // Responsive video
    var $area = $( "#sidebar" );
    $area.fitVids();

    // Image gallery
    var $slider = $( ".owl-carousel" );
    $slider.owlCarousel();

});


Code 2

// Global jQuery variable
var $ = jQuery;

/**
 * Responsive video
 */
var fitvidsInit = function() {
    var $area = $( "#sidebar" );
    $area.fitVids();
};

/**
 * Slides
 */
var sliderInit = function() {
    var $slider = $( ".owl-carousel" );
    $slider.owlCarousel();
};

/**
 * Execute code
 */
$( function() {
    fitvidsInit();
    sliderInit();
} )


I also have to defined the variable $ because this is in WordPress.
Any performance difference would be too small to measure.

Code 2 pollutes the global namespace with three variables: $, fitvidsInit, and sliderInit.  Therefore, Code 1 is better.  I suggest eliminating $area and $slider as well:

jQuery( function( $ ) {

    // Responsive video
    $( "#sidebar" ).fitVids();

    // Image gallery
    $( ".owl-carousel" ).owlCarousel();

});