Étiquette : function

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

01/07/2022 / admin

Plusieurs sources pour cet article (car plusieurs techniques; à vous de choisir):

Avec le module pattern: How to avoid global variables in JavaScript?
Avec le Revealing module pattern
Avec window['varName'] = varName;: How to avoid global variables in JavaScript?
Un peu de culture générale sur les différentes façons de déclarer des variables en Javascript: Difference between variable declaration syntaxes in Javascript (including global variables)?

Avec le module pattern:

Je détaille celui-ci car il me plait bien 🙂 Mais voir également le Revealing module pattern juste en-dessous qui apporte quelques améliorations.

Variables et les fonctions privées: déclarées au sein d’une closure mais EN-DEHORS du scope du return
Variables et les fonctions publiques: déclarées au sein d’une closure mais DANS le scope du return

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

YAHOO.myProject.myModule = function () {

//"private" variables:

var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

//"private" method:

var myPrivateMethod = function () {

YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");

}

return {

myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."

myPublicMethod: function () {

YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

//Within myProject, I can access "private" vars and methods:

YAHOO.log(myPrivateVar);

YAHOO.log(myPrivateMethod());

//The native scope of myPublicMethod is myProject; we can

//access public members using "this":

YAHOO.log(this.myPublicProperty);

}

};

}(); // the parens here cause the anonymous function to execute and return

Avec le Revealing module pattern

Avec le Revealing module pattern, toutes les variables et toutes les fonctions sont d’abord déclarées en privé et on se sert du return pour lister celles qu’on rend ensuite publiques. C’est plus lisible et plus pratique à l’utilisation.

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';
  var publicProperty = 'I am a public property';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  function publicMethod() {
    _privateMethod();
  }

  return {
    publicMethod: publicMethod,
    publicProperty: publicProperty
  };
})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule.publicProperty); // outputs 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

var myModule = (function() {

'use strict';

var _privateProperty = 'Hello World';

var publicProperty = 'I am a public property';

function _privateMethod() {

console.log(_privateProperty);

}

function publicMethod() {

_privateMethod();

}

return {

publicMethod: publicMethod,

publicProperty: publicProperty

};

})();

myModule.publicMethod(); // outputs 'Hello World'

console.log(myModule.publicProperty); // outputs 'I am a public property'

console.log(myModule._privateProperty); // is undefined protected by the module closure

myModule._privateMethod(); // is TypeError protected by the module closure

[javascript] Les bases: les fonctions

12/02/2019 / admin

let a = 5;
let b = 3;

function sum(a , b) {
    let c = a + b;
    console.log(c);
}

sum(a, b); //8

a = 8;
b = 12;

sum(a, b); //20

let a = 5;

let b = 3;

function sum(a , b) {

let c = a + b;

console.log(c);

}

sum(a, b); //8

a = 8;

b = 12;

sum(a, b); //20

function myFn(a, b) {
    let c;
    a = a + 1;
    c = a + b;
    return c;
}

console.dir(myFn);
console.log(myFn(5, 10)); // 16
console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

function myFn(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

}

console.dir(myFn);

console.log(myFn(5, 10)); // 16

console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

Scope

function myFunction1(a, b) {
	console.log(a, b);
}

function myFunction2(a, b) {
	console.log(a, b);
}

const a = true;
const b = null;

myFunction1(2, 3); // 2, 3
myFunction2(4, 5); // 4, 5
console.log(a, b); // true, null

function myFunction1(a, b) {

console.log(a, b);

}

function myFunction2(a, b) {

console.log(a, b);

}

const a = true;

const b = null;

myFunction1(2, 3); // 2, 3

myFunction2(4, 5); // 4, 5

console.log(a, b); // true, null

return

function sum(a, b) {
	return a + b;
}

sum(10, 5); // 15
sum("abc", 2); // "abc2"
sum(); // NaN (Not a Number)

function sum(a, b) {

return a + b;

}

sum(10, 5); // 15

sum("abc", 2); // "abc2"

sum(); // NaN (Not a Number)

function myFunction(a) {
	console.log(a);
	return a; // function stops HERE
	console.log(a);
	const c = 10;
	console.log(c); // code NOT evaluated
}

myFunction(10);

function myFunction(a) {

console.log(a);

return a; // function stops HERE

console.log(a);

const c = 10;

console.log(c); // code NOT evaluated

}

myFunction(10);

function mult(a, b, c) {
	const result = a * b * c;
	console.log(result);
}

mult(0,3,5); // 0
mult(2,3,5); // 30
mult(2,3,"abc"); // NaN
mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function mult(a, b, c) {

const result = a * b * c;

console.log(result);

}

mult(0,3,5); // 0

mult(2,3,5); // 30

mult(2,3,"abc"); // NaN

mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function concatenatedStrings(str1, str2) {
	return str1 + " " + str2;
}

const str3 = concatenatedStrings("Hello", "World");
console.log(str3); // Hello World

function concatenatedStrings(str1, str2) {

return str1 + " " + str2;

}

const str3 = concatenatedStrings("Hello", "World");

console.log(str3); // Hello World

function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	const sum = a + b;
	const result = innerFunction(sum);

	console.log(result);
}

outerFunction(5, 2); // 49

// ...which can be simplified as:
function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	console.log(innerFunction(a + b));
}

outerFunction(5, 2); // 49

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

const sum = a + b;

const result = innerFunction(sum);

console.log(result);

}

outerFunction(5, 2); // 49

// ...which can be simplified as:

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

console.log(innerFunction(a + b));

}

outerFunction(5, 2); // 49

Fonctions anonymes

Function expression assigned to the variable:

=> variable à laquelle est assignée une « function expression »

const myFunction = function(a, b) {
	let c;
	a = a + 1;
	c = a + b;
	return c;
};

myFunction(5, 3); // 9

const myFunction = function(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

};

myFunction(5, 3); // 9

Function expression as argument in the function call

=> callback function

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

setTimeout(function() {

console.log("Delayed message");

}, 1000);

callback function

setTimeout();

/**
 * CALLBACK FUNCTION
 * setTimeout
 */

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

/**

* CALLBACK FUNCTION

* setTimeout

setTimeout(function() {

console.log("Delayed message");

}, 1000);

setInterval();

setInterval(function(){
	console.log("Message logged each 1 second");
}, 1000);

setInterval(function(){

console.log("Message logged each 1 second");

}, 1000);

Compteur incrémentiel avec la méthode `setInterval()`

let i = 1;
setInterval(function(){
	console.log("Message logged each 1 second " + i);
	i = i + 1;
}, 1000);

let i = 1;

setInterval(function(){

console.log("Message logged each 1 second " + i);

i = i + 1;

}, 1000);

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

let i = 1;
const repeat = setInterval(function() {
    console.log("Here is message number " + i);
    i = i + 1;
}, 1000);

repeat;

setTimeout(function(){
    clearInterval(repeat);
}, 5000);

let i = 1;

const repeat = setInterval(function() {

console.log("Here is message number " + i);

i = i + 1;

}, 1000);

repeat;

setTimeout(function(){

clearInterval(repeat);

}, 5000);

[jQuery] Etendre une fonction existante

21/02/2017 / admin

Source: Extending an existing jQuery function.

(function($)
{
    // maintain a reference to the existing function
    var oldcss = $.fn.css;
    // ...before overwriting the jQuery extension point
    $.fn.css = function()
    {
        // original behavior - use function.apply to preserve context
        var ret = oldcss.apply(this, arguments);

        // stuff I will be extending
        // that doesn't affect/change
        // the way .css() works

        // preserve return value (probably the jQuery object...)
        return ret;
    };
})(jQuery);

(function($)

{

// maintain a reference to the existing function

var oldcss = $.fn.css;

// ...before overwriting the jQuery extension point

$.fn.css = function()

{

// original behavior - use function.apply to preserve context

var ret = oldcss.apply(this, arguments);

// stuff I will be extending

// that doesn't affect/change

// the way .css() works

// preserve return value (probably the jQuery object...)

return ret;

};

})(jQuery);

Aller plus loin avec un callback

Source: Coderbits – Extending jQuery with onShow and onHide events.

<!-- Include latest jquery first! -->
<script>

    //Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function
    (function ($) {

        //Extend show() so that it trigger our event when called
        var show = $.fn.show;
        $.fn.show = function () {
            var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onShow"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };
        //Extend hide()
        var hide = $.fn.hide;
        $.fn.hide = function () {
            var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onHide"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };

        //Define new event functions
        $.fn.onShow = function (callback) {
            if (callback != null) {
                $(this).on("onShow", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onShow"); //If no callback exist we trigger the event
            }
            return this;
        };

        $.fn.onHide = function (callback) {
            if (callback != null) {
                $(this).on("onHide", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onHide"); //If no callback exist we trigger the event
            }
            return this;
        };
    })(jQuery);
    //All the above code could be saved in an external .js file which is much easier to include

    //Testing time!
    $(function () { //DOM ready

        //Define what happens if our element is shown
        $("#testingElement").onShow(function () {
            alert("Hello!");
        });

        //Define what happens if our element is hidden
        $("#testingElement").onHide(function () {
            alert("Goodbye!");
        });

        //Button event
        $("button").click(function () {
            $("#testingElement").toggle();
        });
    });

</script>

<p id="testingElement" style="display:none;">Showing</p>
<button>Show</button>

//Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function

(function ($) {

//Extend show() so that it trigger our event when called

var show = $.fn.show;

$.fn.show = function () {

var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onShow"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Extend hide()

var hide = $.fn.hide;

$.fn.hide = function () {

var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onHide"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Define new event functions

$.fn.onShow = function (callback) {

if (callback != null) {

$(this).on("onShow", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onShow"); //If no callback exist we trigger the event

}

return this;

};

$.fn.onHide = function (callback) {

if (callback != null) {

$(this).on("onHide", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onHide"); //If no callback exist we trigger the event

}

return this;

};

})(jQuery);

//All the above code could be saved in an external .js file which is much easier to include

//Testing time!

$(function () { //DOM ready

//Define what happens if our element is shown

$("#testingElement").onShow(function () {

alert("Hello!");

});

//Define what happens if our element is hidden

$("#testingElement").onHide(function () {

alert("Goodbye!");

});

//Button event

$("button").click(function () {

$("#testingElement").toggle();

});

</script>

<p id="testingElement" style="display:none;">Showing</p>

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

11/02/2015 / admin

En jQuery, l’appel d’une fonction se fait en général de la manière suivante :

$(document).ready(function() {
   $("a").click(function() {
     alert("toto");
   });
 });

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

L’objet $ est utilisé par jQuery en tant que récupérateur de fonctions, et le script sait quelle librairie appeler. Problème : si vous utilisez d’autres librairies qui utilisent aussi le dollar comme objet par défaut (Prototype, Scriptaculous dans Magento par exemple…), vous obtiendrez potentiellement des conflits et un message d’erreur de type $ is not a function !

Solution 1 :

Utiliser la fonction jQuery.noConflict(); et créer une fonction anonyme. Source : jquery – is not a function error.

jQuery.noConflict();
(function($){
    "use strict";
    $(document).ready(function() {
      $("a").click(function() {
        alert("toto");
      });
    });
})(jQuery);

jQuery.noConflict();

(function($){

"use strict";

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

})(jQuery);

Solution 2 :

Remplacer tous les $ par un alias jQuery afin de réassigner toutes les variables de l’objet $ à ce dernier. Source : « $ is not a function » dans JQuery – La solution.

jQuery(document).ready(function() {
   jQuery("a").click(function() {
     alert("toto");
   });
 });

jQuery(document).ready(function() {

jQuery("a").click(function() {

alert("toto");

});

Articles récents

Catégories

Archives

Méta

Étiquette : function

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

Avec le module pattern:

Avec le Revealing module pattern

[javascript] Les bases: les fonctions

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

[jQuery] Etendre une fonction existante

Aller plus loin avec un callback

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

Solution 1 :

Solution 2 :

Avec le module pattern:

Avec le Revealing module pattern

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode setInterval()

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes setInterval(), clearInterval() et setTimeout()

Aller plus loin avec un callback

Solution 1 :

Solution 2 :

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`