Skip to main content
Code Review

Return to Question

Rollback to Revision 3
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238
jQuery( function( $ ) {

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

    // Isotope variable
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks$area = $( ".filter-links""#sidebar" );
 
    // Initialize isotope
    $wrapper$area.imagesLoaded( functionfitVids() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
       Image event.preventDefault();
gallery
        var selector$slider = $( this )".attr( "dataowl-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active"carousel" );
        $( this ).closest( "li" )$slider.addClassowlCarousel( "active" );

    } );

});

// Global jQuery variable
var $ = jQuery;

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

/**
 * Isotope
 */
var isotopeInit = function() {
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks$area = $( ".filter-links""#sidebar" );

    // Initialize isotope
    $wrapper$area.imagesLoaded( functionfitVids() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links**
    $filterLinks.on( "click", "a", function( event )* {Slides
        event.preventDefault();
*/
        var selectorsliderInit = $( this ).attrfunction( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

     var $slider = $( this ).closest( "ul" ).find( "li" )".removeClass( "active"owl-carousel" );
        $( this ).closest( "li" )$slider.addClassowlCarousel( "active" );

    } );
};

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

Code 3

jQuery( function() {
    fitvidsInit();
    isotopeInit();
});

/**
 * Responsive video
 */
function fitvidsInit() {
     jQuery( "#sidebar" ).fitVids();
}

/**
 * Isotope
 */
function isotopeInit() {
   var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();
 
        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClasssliderInit( "active" );
 
    } );
}

As you can see, to call the isotope plugin needs more lines of code and I think Code 2 and Code 3 are more organized. What do you think?

jQuery( function( $ ) {

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

    // Isotope variable
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );
 
    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );

});

// Global jQuery variable
var $ = jQuery;

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

/**
 * Isotope
 */
var isotopeInit = function() {
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );
};

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

Code 3

jQuery( function() {
    fitvidsInit();
    isotopeInit();
});

/**
 * Responsive video
 */
function fitvidsInit() {
     jQuery( "#sidebar" ).fitVids();
}

/**
 * Isotope
 */
function isotopeInit() {
   var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();
 
        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );
 
    } );
}

As you can see, to call the isotope plugin needs more lines of code and I think Code 2 and Code 3 are more organized. What do you think?

jQuery( function( $ ) {

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

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

});

// 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();
} )
add more code example
Source Link
Satrya
Satrya
  • 21
  • 4
jQuery( function( $ ) {

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

    // Isotope variable
    var $area$wrapper     = $( "#sidebar"".themes-wrapper" );
    $area    $filterLinks = $( ".fitVidsfilter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // ImageIsotope galleryfilter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var $sliderselector = $( "this ).owlattr( "data-carousel"filter" );
    $slider    $wrapper.owlCarouselisotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );

});

// Global jQuery variable
var $ = jQuery;

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

/**
 * SlidesIsotope
 */
var sliderInitisotopeInit = function() {
    var $slider$wrapper     = $( ".owlthemes-carousel"wrapper" );
    $slider    $filterLinks = $( ".owlCarouselfilter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );
};

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

Code 3

jQuery( function() {
    fitvidsInit();
    isotopeInit();
});

/**
 * Responsive video
 */
function fitvidsInit() {
     jQuery( "#sidebar" ).fitVids();
}

/**
 * Isotope
 */
function isotopeInit() {
   var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault(); 

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );
}

As you can see, to call the isotope plugin needs more lines of code and I think Code 2 and Code 3 are more organized. What do you think?

jQuery( function( $ ) {

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

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

});

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

jQuery( function( $ ) {

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

    // Isotope variable
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );

});

// Global jQuery variable
var $ = jQuery;

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

/**
 * Isotope
 */
var isotopeInit = function() {
    var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault();

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );
};

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

Code 3

jQuery( function() {
    fitvidsInit();
    isotopeInit();
});

/**
 * Responsive video
 */
function fitvidsInit() {
     jQuery( "#sidebar" ).fitVids();
}

/**
 * Isotope
 */
function isotopeInit() {
   var $wrapper     = $( ".themes-wrapper" );
        $filterLinks = $( ".filter-links" );

    // Initialize isotope
    $wrapper.imagesLoaded( function() {
        $wrapper.isotope({
            itemSelector: ".themes",
            percentPosition: true,
            layoutMode: "fitRows",
        });
    } );

    // Isotope filter links
    $filterLinks.on( "click", "a", function( event ) {
        event.preventDefault(); 

        var selector = $( this ).attr( "data-filter" );
        $wrapper.isotope({
            filter: selector
        });

        $( this ).closest( "ul" ).find( "li" ).removeClass( "active" );
        $( this ).closest( "li" ).addClass( "active" );

    } );
}

As you can see, to call the isotope plugin needs more lines of code and I think Code 2 and Code 3 are more organized. What do you think?

added 3 characters in body; edited tags; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Which code is best practice and good for performance to call the Calling jQuery plugin method?methods

I've 2I have two code belowsnippets and my question isthe following questions:

  1. Do you think which isWhich uses the best practice and why?
  2. 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();
} )

nb: I've to defined the variable $ because this is in WordPress area. I also have to defined the variable $ because this is in WordPress.

Which code is best practice and good for performance to call the jQuery plugin method?

I've 2 code below and my question is:

  1. Do you think which is the best practice and why?
  2. 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();
} )

nb: I've to defined the variable $ because this is in WordPress area.

Calling jQuery plugin methods

I have two code snippets and the following questions:

  1. Which uses the best practice and why?
  2. 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.

edit title
Link
Satrya
Satrya
  • 21
  • 4
Source Link
Satrya
Satrya
  • 21
  • 4