Как создать функции трейлинга для выбранных элементов управления?

Question

В последнее время я взял учебники D3 отсюда D3 - учебники по управляемым данными документам

В любом случае, у меня есть проект, для которого мне нужно построить несколько диаграмм, и я планировал создатьбиблиотека для создания диаграмм на основе требований проекта с профессиональным подходом к коду.

подобно jquery библиотека имеет:

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

до сих пор я знаю, как объективизировать такие функции, как:

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

но это не позволяет мне использовать эти вещи так, как я хочу, чтобы они использовали, например:

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

Я не желаю, чтобы моя библиотека зависела от Jquery, простокак D3.Мне не хватает многих концепций JavaScript, которые я хочу изучить, и я буду признателен за помощь, спасибо.

Answer 1

Вам необходимо создать функцию с именем myProjectLibrary, которая возвращает объект с функцией buildBarChart()

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

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

  return element;
}

Answer 2

Существует два способа сделать это в зависимости от ваших требований, если вы хотите иметь доступ только к методам.Затем вы можете просто вернуть функции в виде объектов или некоторой функции MoMduleFunction, которая у вас есть.например:

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

Но если вы хотите иметь возможность связывать функции, как в jquery, вам нужно возвращать ссылку на функцию mainLIbrary в каждом из методов, например:

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");

Затем вы можете продолжить цепочку функций сколько захотите.

Answer 3

Вам необходимо вернуть объект из вашей функции myProjectLibraryMethod.

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

Тогда вы просто присоединяете методы к MyProject.

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