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

Question

我正在尝试构建一个基本的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);

我的问题是我想存储函数,然后originalBtnText在showBtnLoader函数中使用该变量hideBtnLoader.我当然可以用不同的方式实现这一点(例如将值作为数据属性添加并稍后抓取它)但我想知道是否有一种简单的方法.

我遇到的另一个问题是我不知道调用每个函数的正确方法以及我是否正确导入它.我尝试了以下内容.

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

但是我收到以下错误:

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

我已经阅读了一些很好的文章和SO答案,如http://2ality.com/2014/09/es6-modules-final.html和ES6导出默认,多个函数互相引用,但我有点困惑的是"正确"的方式,使其可重复使用.

任何指针都将非常感激.

Answer 1

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

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();
}