eval – devfrontend.info

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

1	filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

1	filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

Avec Function et sans template literals

Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

1	Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

Inclus dans mon push push():

filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

1	filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

// WITHOUT PARAMETERS:
function runMe(){ console.log("runMe!"); }

// function we want to run
var fnstring = "runMe";

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn();

// results in:
// "runMe!"

// WITHOUT PARAMETERS:

function runMe(){ console.log("runMe!"); }

// function we want to run

var fnstring = "runMe";

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn();

// results in:

// "runMe!"

Fonction avec trois paramètres

// WITH PARAMETERS:
function runMeParams(one, two, three){ 
  console.log("runMe!" + one);
  console.log("runMe!" + two);
  console.log("runMe!" + three);
}

// function name and parameters to pass
var fnstring = "runMeParams";
var fnparams = [1, 2, 3];

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

// results in:
// "runMe!1"
// "runMe!2"
// "runMe!3"

// WITH PARAMETERS:

function runMeParams(one, two, three){

console.log("runMe!" + one);

console.log("runMe!" + two);

console.log("runMe!" + three);

}

// function name and parameters to pass

var fnstring = "runMeParams";

var fnparams = [1, 2, 3];

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn.apply(null, fnparams);

// results in:

// "runMe!1"

// "runMe!2"

// "runMe!3"

Problème

J’ai une tâche style:clean qui supprime des fichiers inutiles et ayant l’extension *.css dans un dossier /style. Le plugin Del fonctionne très bien pour ça, mais j’avais besoin de déclarer le scope des fichiers à cibler par la tâche en 2 entités distinctes :

Le chemin vers le dossier style/ et le format de fichier à cibler (config.paths.styles.dest + '*.css').
Une liste de fichiers à ignorer (config.clean.style.ignore).

Lors de mes tests infructueux, les fichiers ignorés étaient supprimés.

Solution

La méthode .unshift() permet l’insertion d’éléments en début de tableau.

Dans mon fichier gulpconf.json:

{
  "paths": {
    "styles": {
        "src": "src/style/",
        "dest": "style/"
    }
  },
  "clean": {
    "style": {
      "ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]
    }
  }
}

{

"paths": {

"styles": {

"src": "src/style/",

"dest": "style/"

}

"clean": {

"style": {

"ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]

}

Si vous n’avez pas de fichiers à ignorer, laissez le tableau vide comme ceci:

{
  "clean": {
    "style": {
      "ignore": []
    }
  }
}

{

"clean": {

"style": {

"ignore": []

}

Dans mon gulpfile.js:

gulp.task('style:clean', function(){
  var arr = config.clean.style.ignore;
  arr.unshift(config.paths.styles.dest + '*.css');
  del.sync(arr);
});

gulp.task('style:clean', function(){

var arr = config.clean.style.ignore;

arr.unshift(config.paths.styles.dest + '*.css');

del.sync(arr);

});

Optimiser ce code en passant par une fonction

ATTENTION: ce code ne fonctionne pas. En réalité, si vous avez plusieurs tâches de clean (css, js, etc…), le lancement d’une seule de ces tâches va également faire le travail de toutes les autres …

Exemple: je lance gulp js:clean et les fichiers CSS concernés par la tâche gulp css:clean sont effacés également.

function gulpClean(type, format){ var arr = eval("config.clean."+type+".ignore"); arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'")); del.sync(arr); } gulp.task('style:clean', gulpClean('style', 'css'));

1
2
3
4
5
6
7

function gulpClean(type, format){
  var arr = eval("config.clean."+type+".ignore");
  arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'"));
  del.sync(arr);
}

gulp.task('style:clean', gulpClean('style', 'css'));

Articles récents

Catégories

Archives

Méta

Étiquette : eval

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval