mercredi 18 décembre 2019

Javascript, commas in IF statements - trying to understand this code

I am working with a WP theme called DIVI and whilst trying to figure out how their Slider works I came across this code I am trying to understand :

    window.et_pb_slider_init=function($this_slider){
            var et_slider_settings={fade_speed:700,
                                    slide:$this_slider.hasClass("et_pb_gallery")?".et_pb_gallery_item":".et_pb_slide"};

            if($this_slider.hasClass("et_pb_slider_no_arrows")&&(et_slider_settings.use_arrows=!1),
            $this_slider.hasClass("et_pb_slider_no_pagination")&&(et_slider_settings.use_controls=!1),
            $this_slider.hasClass("et_slider_auto")){
                    et_slider_settings.slideshow=!0;
                    var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
                    et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
                    }

            $this_slider.parent().hasClass("et_pb_video_slider")&&(et_slider_settings.controls_below=!0,
                    et_slider_settings.append_controls_to=$this_slider.parent(),
                    setTimeout(function(){
                            $(".et_pb_preload").removeClass("et_pb_preload")
                    },500)),
            $this_slider.hasClass("et_pb_slider_carousel")&&(et_slider_settings.use_carousel=!0),
            $this_slider.et_pb_simple_slider(et_slider_settings)
            }

What really confuses me is the IF statement on line 5 and the code following that on line 13.

I saw in another post here that when IF statements are separated by commas, each line is evaluated but only the last operand is returned - but I didn't get that cos if only the last one is returned, what earthy point do the other operands have?! Unless they are actually changing variables - but I've never seen that done in an IF statement before, though IF were only for comparing values.

So I wondered, could this code :

            if($this_slider.hasClass("et_pb_slider_no_arrows")&&(et_slider_settings.use_arrows=!1),
            $this_slider.hasClass("et_pb_slider_no_pagination")&&(et_slider_settings.use_controls=!1),
            $this_slider.hasClass("et_slider_auto")){
                    et_slider_settings.slideshow=!0;
                    var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
                    et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
                    }

Also be written like this? :

    if($this_slider.hasClass("et_pb_slider_no_arrows")){
            et_slider_settings.use_arrows=!1
            }

    if($this_slider.hasClass("et_pb_slider_no_pagination")){
            et_slider_settings.use_controls=!1
            }

    if($this_slider.hasClass("et_slider_auto")){
            et_slider_settings.slideshow=!0;
            var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
            et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
            }

And what is happening in the code after, is that also somehow working like an IF statement?

            $this_slider.parent().hasClass("et_pb_video_slider")&&(
                    et_slider_settings.controls_below=!0,
                    et_slider_settings.append_controls_to=$this_slider.parent(),
                    setTimeout(function(){
                            $(".et_pb_preload").removeClass("et_pb_preload")
                    },500)
                    ),$this_slider.hasClass("et_pb_slider_carousel")&&(et_slider_settings.use_carousel=!0),
                    $this_slider.et_pb_simple_slider(et_slider_settings)

Is this code saying this :

    if($this_slider.parent().hasClass("et_pb_video_slider")){
                    et_slider_settings.controls_below=!0;
                    et_slider_settings.append_controls_to=$this_slider.parent();
                    setTimeout(function(){
                            $(".et_pb_preload").removeClass("et_pb_preload")
                            },500)
                    };

    if($this_slider.hasClass("et_pb_slider_carousel")){
            et_slider_settings.use_carousel=!0
            }

    $this_slider.et_pb_simple_slider(et_slider_settings);

I read that with the && operator the second part is only evaluated if the first part can be converted to true, so I guess it could work like and if statement...or am I completely misunderstanding this? Is this done to optimize the code a bit? Saving of a few characters? Or is this expressing something different to what I am thinking?

Aucun commentaire:

Enregistrer un commentaire