variable – devfrontend.info

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

Avec gulp-ruby-sass

Attention:

$toto: lorem;
@import url('/themes/' + $toto + '/style/bootstrap.min.css');

1 2	$toto: lorem; @import url('/themes/' + $toto + '/style/bootstrap.min.css');

Nous donnera: @import url("/themes/lorem/style/bootstrap.min.css");.

Articles récents

Catégories

Archives

Méta

Étiquette : variable

[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] Changer la valeur d’une variable globale depuis une fonction

[jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

[SASS] Intégrer une variable dans une URL

Avec gulp-sass

Avec gulp-ruby-sass

[jQuery] Utiliser la pseudo-classe CSS nth-child avec une valeur récupérée d’une variable