Podstawowe ES6 JavaScript Plugin - ponowne zmienny między funkcjami

Question

Jestem próbujących budować podstawowe wtyczki JS, które można nazwać po zdarzeniu kliknięcia przycisku, aby wyłączyć (aby uniemożliwić użytkownikom odpalane wiele wywołań API) i wyrazić opinię, że coś jest ładowanie/happening. Oto jak to wygląda:

Działa to doskonale na zasadzie indywidualnej, ale chcę, aby ponownie zapisać go jako plugin więc mogę używać go po drugiej stronie.

Oto obniżyć wersja JS od loader.plugin.js plików.

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

Oto przykład tego, jak chciałbym go użyć.

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

Problem mam jest, że chcę, aby zapisać originalBtnText z funkcji showBtnLoader a następnie użyć tej zmiennej w funkcji hideBtnLoader. Mogłem oczywiście osiągnąć to w inny sposób (np. Dodając wartość jako atrybut danych i chwytając go później), ale zastanawiałem się, czy istnieje prosty sposób.

Kolejna kwestia to fakt, że nie wiem prawidłowy sposób wywoływania poszczególnych funkcji i czy jestem importowania go prawidłowo. Próbowałem następujące.

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

Ale pojawia się następujący błąd:

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

Przeczytałem kilka dobrych artykułów i tak odpowiedzi takie jak http://2ality.com/2014/09/es6-modules-final.html i ES6 export default with multiple functions referring to each other ale jestem lekko zdezorientowana co do „poprawny” sposób prowadzenia tak, aby można go było ponownie wykorzystać.

Wszelkie wskazówki będą mile widziane.

Answer 1

bym eksport funkcji, która tworzy obiekt z obu pokazywać i ukrywać funkcji, takich jak to:

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, 
    }; 
} 

Następnie, aby go użyć:

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

Jeśli chcesz ukryć go z innego pliku, z którego pokazał go, a następnie można wyeksportować instancję:

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

A później zaimportować go.

import { signupLoader } from 'signupform'; 

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

Answer 2

Być może nadpisujesz element.prototyp, aby był dostępny od tego elementu. Jednak nie pojadę ustawić wartości na tym elemencie, wolałbym wrócić obiektu wraz ze wszystkimi neccessary rzeczy:

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

Po zaimportowaniu i implementBtnLoader nazwano, można zrobić:

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