plug-in – 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>

Existe-t’il un moyen d’annuler (à l’image de la méthode unbind) les effets sur des éléments du DOM d’un plug-in jQuery après son initialisation ?

Il n’existe malheureusement pas de méthode jQuery permettant d’annuler les effets d’un plug-in déjà initialisé, car ce dernier doit exécuter du code spécifique pour nettoyer les manipulations de DOM qu’il a entrainé. Nativement, jQuery ne peut anticiper ce que chaque plug-in va faire.

La méthode destroy

Avant de vous lancer dans des développements compliqués, vérifiez que le plug-in jQuery que vous souhaitez activer/désactiver ne bénéficie pas d’une méthode destroy. C’est par exemple le cas pour Superfish ou jQuery UI.

Tirer parti des namespaced events

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events

Ajouter et retirer des évènements sur les listeners

(pas testé) addEventListener et nettoyage avec removeEventListener

Encapsuler le plug-in dans une fonction

Encapsuler le plug-in dans une fonction et l’initialiser uniquement lorsque la largeur du viewport correspond à un certain breakpoint. Lorsqu’on sort du breakpoint prédéfini, on recharge la page à l’aide de document.location = document.location; et le plug-in n’est plus initialisé.

function toto() {
  // mon plug-in
}

function toto() {

// mon plug-in

}

jQuery(document).ready(function(){
  enquire.register("screen and (max-width: 767px)", {
    match : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      // ne fais rien
    },
    unmatch : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      // ne fais rien
    }
  });

  enquire.register("screen and (min-width: 768px)", {
    match : function() {
      jQuery('body').removeClass('is-mobile').addClass('is-desktop');
      toto(); // initialise toto
    },
    unmatch : function() {
      jQuery('body').removeClass('is-desktop').addClass('is-mobile');
      document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px
    }
  });
});

jQuery(document).ready(function(){

enquire.register("screen and (max-width: 767px)", {

match : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

// ne fais rien

unmatch : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

// ne fais rien

}

});

enquire.register("screen and (min-width: 768px)", {

match : function() {

jQuery('body').removeClass('is-mobile').addClass('is-desktop');

toto(); // initialise toto

unmatch : function() {

jQuery('body').removeClass('is-desktop').addClass('is-mobile');

document.location = document.location; // recharge la page dès que la largeur du viewport est inférieure à 768px

}

});

Avantages et inconvénients

+ Nous n’avons ni à ré-écrire des parties du code natif du plug-in, ni à maintenir du code que nous aurions écrit spécifiquement pour pallier aux manipulations de DOM générées par l’initialisation du plug-in.
+ Gain de temps énorme en terme de développement.
– On recharge la page lorsqu’on change de breakpoint. Si l’utilisateur était en-train de remplir un formulaire à ce moment là, les informations sont perdues.

Nullifier le plug-in

(pas testé) destroy a function in javascript (jquery) – nullify the function

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

(pas testé – suggéré dans un fil de discussion stack overflow sans donner d’exemple de code…) One solution may be to cache a pre-plugin .clone() of the element(s) that you could revert back to if/when needed (assuming the plugin doesn’t have « undo » capability).

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)

Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind) .

Reinitializing NivoSlider after simulating destroy

Ok the best way is to forget about all the destroying thing and replace the silder with it’s initial state. suppose the initial state of silder is:

<div id="silder" class="nivoSlider"></div>

1	<div id="silder" class="nivoSlider"></div>

Then the best way to do the destroying and initializing at one step is to do something like:

$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

1	$('#silder').replaceWith('<div id="slider" class="nivoSlider"></div>');

Quelques ressources d’intérêt sur le sujet :

(CSS tricks – bon tuto) Namespaced Events in jQuery
Namespace Your Events
(pas testé) Remove jQuery Plugin Instances
(pas testé) Element Destroyed (a jQuery Special Event)
(pas testé) Shorthand methods for unbind
(pas testé) Removing a Whole Set of Event Handlers
(pas testé) addEventListener et nettoyage avec removeEventListener
Unbind – Remove – Kill a jQuery plugin
(pas testé) destroy a function in javascript (jquery) – nullify the function
(pas testé) Remove jQuery plugins at runtime
(pas testé) Reinitializing NivoSlider after simulating destroy
Tracing Event Binding And Event Triggering In jQuery

Articles récents

Catégories

Archives

Méta

Étiquette : plug-in

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

Code JS

Vue pour un carousel avec config « lazy-reference »

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

La méthode destroy

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

Encapsuler le plug-in dans une fonction

Avantages et inconvénients

Nullifier le plug-in

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)

Reinitializing NivoSlider after simulating destroy

Code JS

Vue pour un carousel avec config « lazy-reference »

La méthode destroy

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

Encapsuler le plug-in dans une fonction

Avantages et inconvénients

Nullifier le plug-in

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes bind et unbind)

Reinitializing NivoSlider after simulating destroy

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes `bind et` unbind)