基本ES6 Javascript插件-函数间重用变量

我正在尝试构建一个基本的JS插件，它可以在点击事件后调用，以禁用按钮（防止用户触发多个API调用），并反馈正在加载/正在发生的事情。下面是它的外观：

这在个人基础上非常有效，但我想把它作为插件重新编写，这样我就可以在整个站点上重复使用它

下面是文件loader.plugin.JS中JS的精简版本

let originalBtnText;


export function showBtnLoader(btn, loadingText) {
  const clickedBtn = btn;
  const spinner = document.createElement('div');

  spinner.classList.add('spin-loader');

  originalBtnText = clickedBtn.textContent;
  clickedBtn.textContent = loadingText;
  clickedBtn.appendChild(spinner);
  clickedBtn.setAttribute('disabled', true);
  clickedBtn.classList.add('loading');

  return this;
}


export function hideBtnLoader(btn) {
  const clickedBtn = btn.target;
  clickedBtn.textContent = originalBtnText;
  clickedBtn.removeAttribute('disabled');
  clickedBtn.classList.remove('loading');

  return this;
}


export function btnLoader() {
  showBtnLoader();
  hideBtnLoader();
}

下面是一个我想如何使用它的例子

import btnLoader from 'loaderPlugin';

const signupBtn = document.getElementById('signup-btn');

signupBtn.addEventListener('click', function(e) {
  e.preventDefault();
  btnLoader.showBtnLoader(signupBtn, 'Validating');
  // Call API here
});

// Following API response
hideBtnLoader(signupBtn);

我遇到的问题是，我想存储

showBtnLoader

函数中的

originalBtnText

，然后在

hideBtnLoader

函数中使用该变量。当然，我可以用另一种方式实现这一点（比如将值添加为数据属性，然后再抓取），但我想知道是否有一种简单的方法

我遇到的另一个问题是，我不知道调用每个函数的正确方法，也不知道是否正确导入了它。我试过以下方法

btnLoader.showBtnLoader(signupBtn, 'Validating');
btnLoader(showBtnLoader(signupBtn, 'Validating'));
showBtnLoader(signupBtn, 'Validating');

但我得到了以下错误：

Uncaught ReferenceError: showBtnLoader is not defined
    at HTMLButtonElement.<anonymous>

未捕获引用错误：未定义showBtnLoader
在HTMLButtoneElement。但我有点困惑，如何做到这一点以使其可重用

任何指针都将不胜感激。
您可能正在重写Element.prototype，以便从该元素直接访问它。但是，我不会在该元素上设置值，而是返回一个包含所有必要内容的对象：

export function implementBtnLoader(){
 Element.prototype.showBtnLoader=function( loadingText) {
     const clickedBtn = this;
     const spinner = document.createElement('div');

     spinner.classList.add('spin-loader');

     var originalBtnText = clickedBtn.textContent;
     clickedBtn.textContent = loadingText;
     clickedBtn.appendChild(spinner);
     clickedBtn.setAttribute('disabled', true);
     clickedBtn.classList.add('loading');

    return {
        text:originalBtnText,
        el:this,
        hideBtnLoader: function() {
          const clickedBtn = this.target;
          clickedBtn.textContent = this.text;
          clickedBtn.removeAttribute('disabled');
          clickedBtn.classList.remove('loading');
          return this;
       }
    };
  };
}


export function btnLoader() {
   implementBtnLoader();
}

导入并调用implementBtnLoader时，可以执行以下操作：

var loader=document.getElementById("test").showBtnLoader();
console.log(loader.text);
loader.hideBtnLoader();

我将导出一个函数，该函数创建一个同时具有显示和隐藏函数的对象，如下所示：

export default function(btn, loadingText) {

  function show() {
    const clickedBtn = btn;
    const spinner = document.createElement('div');

    spinner.classList.add('spin-loader');

    originalBtnText = clickedBtn.textContent;
    clickedBtn.textContent = loadingText;
    clickedBtn.appendChild(spinner);
    clickedBtn.setAttribute('disabled', true);
    clickedBtn.classList.add('loading');
  }

  function hide() {
    const clickedBtn = btn.target;
    clickedBtn.textContent = originalBtnText;
    clickedBtn.removeAttribute('disabled');
    clickedBtn.classList.remove('loading');
  }

  return {
    show,
    hide,
  };
}

然后，要使用它：

import btnLoader from 'btnloader';

const signupBtn = document.getElementById('signup-btn');
const signupLoader = btnLoader( signupBtn, 'Validating' );

signupBtn.addEventListener('click', function(e) {
  e.preventDefault();
  signupLoader.show();
  // Call API here
});

// Following API response
signupLoader.hide();

如果需要从显示实例的不同文件中隐藏该实例，则可以导出该实例：

export const signupLoader = btnLoader( signupBtn, 'Validating' );

然后导入它

import { signupLoader } from 'signupform';

function handleApi() {
    signupLoader.hide();
}

从“./page”的目标页面{item，item}将它们导入到花括号中；在目标页面中导出{item，item}插件？进入什么？除非它们是
export default
，否则必须通过
import{showBtnLoader}从'loaderPlugin'显式导入它们我刚刚实现了你的建议，Jonas，但我现在得到了“未捕获类型错误：clickedBtn.showBtnLoader不是HtmlButtoneElement的函数”。我正在使用“从“loaderPlugin”导入btnLoader”导入函数并尝试使用“clickedBtn.showBtnLoader（'Loading'）；”调用加载程序（clickedBtn是点击目标）。@GuerllillaRadio您是否执行了导入的函数？btnLoader（）；这真的很有帮助。必须在show和hide函数之外声明originalBtnText，因为它在这两个函数中都使用，但除此之外，它工作得很好。谢谢。很高兴你弄明白了，干杯！