1
votes

Comment créer des fonctions de suivi pour les contrôles sélectionnés?

Dernièrement, j'ai suivi les didacticiels D3 à partir d'ici D3 - Didacticiels sur les documents basés sur les données

de toute façon, j'ai un projet pour lequel j'ai besoin de créer des graphiques et je prévoyais de créer une bibliothèque pour générer des graphiques basés sur les exigences du projet avec une approche professionnelle du code.

comme jquery a:

myProjectLibrary('#someSelector').buildBarChart();

jusqu'à présent, je sais comment objectiver les fonctionnalités telles que:

someModuleFunctionality = {
        getStuff = function(objParams){//bring data},
        sendStuff = function(objParams){//save data},
        someCalculations  = function(i,j,k){//some calculations}
   }

mais cela ne me permet pas d'utiliser ces choses comme je veux qu'elles utilisent comme:

$('#someSelector').someFunction();

Je ne veux pas que ma bibliothèque soit dépendante de Jquery, tout comme D3. J'apprécierai l'aide, merci.

javascript object function

0 commentaires

3 Réponses :

0
votes

Vous devez renvoyer un objet à partir de votre fonction myProjectLibraryMethod .

function MyProject() {
    this.buildBarChart = function() { /* Build bar chart */ };
    //Other methods...
}

Ensuite, il vous suffit de joindre les méthodes à MyProject . p>

function myProjectLibraryMethod(arg) {
    doStuff.with(arg);
    return new MyProject(arg);
}

2 commentaires

J'apprécie toutes les réponses car elles m'ont toutes donné une compréhension du concept avec des approches différentes, mais la vôtre est propre et organisée, merci à tous.

pourriez-vous me rejoindre sur canal SQL ?

1
votes

Vous devez créer une fonction nommée myProjectLibrary qui renvoie un objet qui a une fonction buildBarChart()

function myProjectLibrary(selector) {
  let element = document.querySelector(selector);

  if (element) {
      element.buildBarChart = () => {
          // code to build bar chart
      }
  }

  return element;
}

0 commentaires

1
votes

Il existe deux façons de procéder en fonction de vos besoins si vous souhaitez pouvoir accéder uniquement aux méthodes. Ensuite, vous pouvez simplement renvoyer les fonctions en tant qu'objets ou certaines fonctionnalités de module que vous avez. par exemple:

function myProjectLibrary(selector) {
  getStuff = () => {
    this.data = selector.data;
    return this;
  }

  logStuff = msg => {
    console.log(`${msg} ${data}`);
    return this;
  }
  return {
    getStuff, 
    logStuff
  }
}

myProjectLibrary({data: 'World'}).getStuff().logStuff("Hello");

Mais si vous voulez pouvoir enchaîner des fonctions comme dans jquery, vous devez renvoyer la référence de la fonction mainLIbrary dans chaque méthode par exemple:

function myLibrary() {
  let someModuleFunctionality = {
    /** Your functions here */
  }
  return someModuleFunctionality;
}

Vous pouvez ensuite continuer à chaîner les fonctions autant que vous le souhaitez.

0 commentaires