bonnes pratiques – devfrontend.info

Cette méthodologie consiste à limiter le nombre d’initialisation d’un même plugin (ici Owl Carousel). On l’initialise une seule fois via la classe .js-owl-carousel affectée à tous les carousels utilisés dans le site. On passe ensuite les paramètres pour différentes configs (default, rotating-image, lazy-reference) en fonction d’une classe (.js-owl-default, .js-owl-rotating-image, .js-owl-lazy-reference) présente dans la vue.

Code JS

ACC.carousel = {

    _autoload: [
        ["bindCarousel", $(".js-owl-carousel").length >0]
    ],

    carouselConfig:{
        "default":{
            navigation:true,
            navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"],
            pagination:false,
            itemsCustom : [[0, 2], [640, 4], [1024, 5], [1400, 7]]
        },
        "rotating-image":{
            navigation:false,
            pagination:true,
            singleItem : true,
        },
        "lazy-reference":{
            navigation:true,
            navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"],
            pagination:false,
            itemsDesktop : [5000,7],
            itemsDesktopSmall : [1200,5],
            itemsTablet: [768,4],
            itemsMobile : [480,3],
            lazyLoad:true,
        },
    },

    bindCarousel: function(){

        $(".js-owl-carousel").each(function(){
            var $c = $(this)
            $.each(ACC.carousel.carouselConfig,function(key,config){
                if($c.hasClass("js-owl-"+key)){
                    var $e = $(".js-owl-"+key);
                    $e.owlCarousel(config);
                }
            });
        });

    }

};

ACC.carousel = {

_autoload: [

["bindCarousel", $(".js-owl-carousel").length >0]

carouselConfig:{

"default":{

navigation:true,

navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"],

pagination:false,

itemsCustom : [[0, 2], [640, 4], [1024, 5], [1400, 7]]

"rotating-image":{

navigation:false,

pagination:true,

singleItem : true,

"lazy-reference":{

navigation:true,

navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>", "<span class='glyphicon glyphicon-chevron-right'></span>"],

pagination:false,

itemsDesktop : [5000,7],

itemsDesktopSmall : [1200,5],

itemsTablet: [768,4],

itemsMobile : [480,3],

lazyLoad:true,

bindCarousel: function(){

$(".js-owl-carousel").each(function(){

var $c = $(this)

$.each(ACC.carousel.carouselConfig,function(key,config){

if($c.hasClass("js-owl-"+key)){

var $e = $(".js-owl-"+key);

$e.owlCarousel(config);

}

});

}

};

Vue pour un carousel avec config « lazy-reference »

Notez la présence de la classe .js-owl-lazy-reference (qui déclenche la config) sur le même élément que la classe .js-owl-carousel (qui initialise le plug-in).

<c:choose>
    <c:when
        test="${not empty productReferences and component.maximumNumberProducts > 0}">
        <div class="carousel-component">

            <div class="headline">${component.title}</div>

            <div class="carousel js-owl-carousel js-owl-lazy-reference js-owl-carousel-reference">
                
                <div id="quickViewTitle" class="quickView-header" style="display:none">
                    <div class="headline">      
                        <span class="headline-text"><spring:theme code="popup.quick.view.select"/></span>
                    </div>
                </div>
                
                <c:forEach end="${component.maximumNumberProducts}"
                    items="${productReferences}" var="productReference">
                    <c:url value="${productReference.target.url}/quickView" var="productUrl"/>
                    <div class="item">
                        <a href="${productUrl}" class="js-reference-item" data-quickview-title="<spring:theme code="popup.quick.view.select"/></span>">
                            <div class="thumb">
                                <product:productPrimaryReferenceImage product="${productReference.target}" format="product" />
                            </div>
                         
                        <c:if test="${component.displayProductTitles}">
                            <div class="item-name">${productReference.target.name}</div>
                        </c:if>
                        <c:if test="${component.displayProductPrices}">
                            <div class="priceContainer">
                                <format:fromPrice priceData="${productReference.target.price}" />
                            </div>
                        </c:if>
                        </a>

                    </div>
                </c:forEach>
            </div>
        </div>
    </c:when>

    <c:otherwise>
        <component:emptyComponent />
    </c:otherwise>
</c:choose>

<c:choose>

<c:when

test="${not empty productReferences and component.maximumNumberProducts > 0}">

<div class="headline">${component.title}</div>

</div>

<c:forEach end="${component.maximumNumberProducts}"

items="${productReferences}" var="productReference">

<c:url value="${productReference.target.url}/quickView" var="productUrl"/>

<product:productPrimaryReferenceImage product="${productReference.target}" format="product" />

</div>

<c:if test="${component.displayProductTitles}">

<div class="item-name">${productReference.target.name}</div>

</c:if>

<c:if test="${component.displayProductPrices}">

<format:fromPrice priceData="${productReference.target.price}" />

</div>

</c:if>

</a>

</div>

</c:forEach>

</div>

</c:when>

<c:otherwise>

<component:emptyComponent />

</c:otherwise>

</c:choose>

Apprendre jQuery, bonnes pratiques

Official jQuery Learning Center

jQuery Coding Standards & Best Practices – These are some of the common standards and best practices for writing better code with jQuery.

JQUERY BEST PRACTICES by Greg Franko

10 Ways to Instantly Increase Your jQuery Performance

jsperf.com – jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Always Descend From an #id

Use Tags Before Classes

Cache jQuery Objects

Harness the Power of Chaining

Use Sub-queries

Limit Direct DOM Manipulation

Leverage Event Delegation (a.k.a. Bubbling)

Eliminate Query Waste

Defer to $(window).load

Compress Your JS

Learn the Library

Avoid use of string concat(), Use join() for the long strings.

Use Latest jQuery versions with CDN hosted files instead of older version.

Use of For loop instead of jQuery $.each loop.

Check if an Element Exists before doing operations on the DOM elements.

Always use Return False in functions.

Use of HTML5 Data Attributes.

Identify weight of the page.

Keep your code DRY (Don’t Repeat Yourself)

Articles récents

Catégories

Archives

Méta

Étiquette : bonnes pratiques

[JavaScript] Initialiser un plugin avec plusieurs configs pré-définies

Code JS

Vue pour un carousel avec config « lazy-reference »

[Foundation 6] Astuces, bonnes pratiques, ressources en ligne

Thèmes

[jQuery] Bonnes pratiques, astuces et ressources utiles

Apprendre jQuery, bonnes pratiques

jQuery Performance Rules

Boilerplates, starter kits

Autre (n’a peut-être pas sa place dans ce billet…)